Event 对象(重点) -06

2016-0914 day06

3. event(事件)

1. 什么是事件: 用户手动触发的或浏览器自动触发的页面或元素状态的改变。

这个网页里例举了所有的事件: https://developer.mozilla.org/en-US/docs/Web/Events
当事件发生时，浏览器会自动调用事件处理函数 (事件处理函数: 当事件发生时，自动调用的函数)
on事件名 ——其实就是一个元素的特殊属性 (特殊: 需要绑定一个函数)

如何绑定事件处理函数: 3种:

1. 在元素的开始标签中绑定:

button.onclick=function(){//this->button
        eval("js语句(this)")
 }

当单击按钮时: button.onclick()
问题: 不符合内容与行为分离的原则，不便于维护，用以下办法解决

2. 在js中为元素的事件处理函数属性赋值:

btn.onclick=function(){//this->button
    ...
}

问题: 一个事件处理函数属性，只能绑定一个函数对象，用以下办法解决

3. 使用API添加事件监听:

btn.addEventListener("事件名",函数对象)
btn.removeEventListener("事件名",函数对象)

优点:

1. 同一事件处理函数属性同时可绑定多个函数对象
2. 可移除绑定的函数对象
3. 可改变事件触发的顺序

事件周期（DOM: 3个阶段: ）:

1. 捕获: 从最外层元素，向内层元素，逐个记录绑定的事件处理函数。默认,暂不触发任何事件。

2. 目标触发: 优先触发目标元素上绑定的事件处理函数

目标元素: 实际点击的元素

3. 冒泡: 按照捕获的顺序,由内层，向外层逐层触发捕获的事件处理函数

例子：
html中

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  当提交前触发

正课

1. ***event
   事件坐标:
   参照屏幕左上角: e.screenX, e.screenY
   参照文档显示区左上角: e.clientX||e.x , e.clientY||e.y
   参照所在父元素的左上角: e.offsetX , e.offsetY

   页面滚动事件:
   onscroll:
   获得页面滚动过的距离:
   document.body.scrollTop|| document.documentElement.scrollTop

2. cookie:
   创建: document.cookie=
   "变量名=值;expires="+date.toGMTString();