2016-0914 day06
3. event(事件)
1. 什么是事件: 用户手动触发的或浏览器自动触发的页面或元素状态的改变。
这个网页里例举了所有的事件: https://developer.mozilla.org/en-US/docs/Web/Events
当事件发生时，浏览器会自动调用事件处理函数 (事件处理函数: 当事件发生时，自动调用的函数)
on事件名 ——其实就是一个元素的特殊属性 (特殊: 需要绑定一个函数)
如何绑定事件处理函数: 3种:
1. 在元素的开始标签中绑定:
<button onclick="js语句(this)"></button>
button.onclick=function(){//this->button
eval("js语句(this)")
}
当单击按钮时: button.onclick()
问题: 不符合内容与行为分离的原则，不便于维护，用以下办法解决
2. 在js中为元素的事件处理函数属性赋值:
btn.onclick=function(){//this->button
...
}
问题: 一个事件处理函数属性，只能绑定一个函数对象，用以下办法解决
3. 使用API添加事件监听:
btn.addEventListener("事件名",函数对象)
btn.removeEventListener("事件名",函数对象)
优点:
- 同一事件处理函数属性同时可绑定多个函数对象
- 可移除绑定的函数对象
- 可改变事件触发的顺序
事件周期（DOM: 3个阶段: ）:
1. 捕获: 从最外层元素，向内层元素，逐个记录绑定的事件处理函数。默认,暂不触发任何事件。
2. 目标触发: 优先触发目标元素上绑定的事件处理函数
目标元素: 实际点击的元素
3. 冒泡: 按照捕获的顺序,由内层，向外层逐层触发捕获的事件处理函数
例子：
html中
<div id="d1" class="d1">
<div id="d2" class="d2">
<div id="d3" class="d3">
</div>
</div>
</div>
css中
.d1 .d2 .d3{cursor:pointer}
.d1 {
background-color: green;
position: relative;
width: 150px;
height: 150px;
text-align: center;
cursor: pointer;
}
.d2 {
background-color: blue;
position: absolute;
top: 25px;
left: 25px;
width: 100px;
height: 100px;
}
.d3 {
background-color: red;
position: absolute;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
line-height: 50px;
}
js中
function highLight(e){
this.style.background="yellow";
alert("我心里想着"+e.target.id);
this.style.background="";
//阻止冒泡:
//e.stopPropagation();
}
d1.addEventListener("click",highLight,false);
d2.addEventListener("click",highLight,false);
d3.addEventListener("click",highLight,false);
执行结果
修改事件触发的顺序:
btn.addEventListener("事件名",函数对象,capture)
其中:capture表示是否在捕获阶段就提前触发
默认false, 只在冒跑阶段才触发
改为true, 在捕获阶段提前触发
事件对象: event
事件发生时，自动创建的，封装事件信息的对象
还提供了对事件进行操作的API
获得event对象:
DOM: 事件发生时，会自动创建event对象
会将event对象作为事件处理函数的第一个参数自动传入。
阻止冒泡:
e.stopPropagation();
利用冒泡:
优化: 尽量少的创建事件监听对象
事件监听对象容易形成闭包，很难释放
解决: 如果多个平级子元素需要绑定相同的事件处理函数时，只要在父元素上绑定一次即可。所有子元素共用
核心问题:
1. 如何获得目标元素: e.target
2. 屏蔽不需要的元素的干扰
取消事件(阻止默认行为): 当事件执行过程中，遇到问题，可取消事件。不再触发
如何: e.preventDefault();
练习: form对象: 事件: onsubmit 当提交前触发
正课
-
***event
事件坐标:
参照屏幕左上角: e.screenX, e.screenY
参照文档显示区左上角: e.clientX||e.x , e.clientY||e.y
参照所在父元素的左上角: e.offsetX , e.offsetY页面滚动事件:
onscroll:
获得页面滚动过的距离:
document.body.scrollTop|| document.documentElement.scrollTop cookie:
创建: document.cookie=
"变量名=值;expires="+date.toGMTString();
