关于JavaScript的事件处理一些知识

《JS事件处理》

Event对象详细信息：http://www.w3school.com.cn/jsref/dom_obj_event.asp

JS原生支持3中绑定事件方式：

1.以标签属性形式

<div onclick="clicked(event)"></div>

本质上这种方式是直接执行引号当中的JS语句。

2.以DOMObject对象属性赋值方式

var div=document.getElementById("div");

div.onclick=function(e){...};

3.以事件侦听器方式：

div.addEventListener("click",function(e){...},bool);

默认false，代表冒泡。

一个完整的浏览器事件流：

window->document->html->body->bigDiv->div->[p]->div->bigDiv->...->window

注意，从window到p，再从p到window，中间目标元素p会触发两次。比如，给p加上true和false两个事件侦听器，那么点击p标签，console先后输出true的event和false的event。

标准的Event属性：

1.bubbles         返回布尔值，如果事件是起泡类型为true，否则为fasle（其值就是addEventListener时的第三个参数值）

2.cancelable      返回布尔值，如果preventDefault方法可以取消与事件关联的默认动作，则为true，否则为fasle

3.currentTarget   返回事件传播到的这个元素

4.eventPhase      返回事件传播的当前阶段，它的值是下面的三个常量之一（Event.CAPTURING_PHASE == 1，Event.AT_TARGET == 2，Event.BUBBLING_PHASE == 3），分别表示捕获、目标和起泡阶段

5.target          返回发生事件的元素

6.timeStamp       返回一个从网页被打开到触发该事件的毫秒数

7.type            返回这个事件的事件类型

误区解释：

target & currentTarget傻傻分不清？看下面例子就懂了：

<div id="one">

   <div id="three"></div>

</div>

one.addEventListener("click",function(e){

   console.log(e.target);         //three

   console.log(e.currentTarget);  //one

},false);

注释：点击three，在冒泡阶段，从three开始向window传播时经过了one，即传播到了one这个元素，one绑定了click事件，这时触发对应的事件处理函数，然后先后输出three和one。另外，这事件处理函数中，关键词this等价于currentTarget。

标准的Event方法：

preventDefault()           通知浏览器不要执行与事件关联的默认动作（如果该元素的e.cancelable==false，说明不存在默认动作或无法阻止该元素的默认动作，只要cancelable为假，该方法不起作用）

stopPropagation()          不再派发事件（可以在捕获、目标、冒泡各阶段使用来停止事件传播）

stopImmediatePropagation() 不再派发事件（可以在捕获、目标、冒泡各阶段使用来停止事件传播）

误区解释：

stopPropagation() & stopImmediatePropagation()傻傻分不清？看下面例子就懂了：

<div id = "div1">

    <button id = "button1"></button>

</div>

var div = document.getElementById("div1");

var btn = document.getElementById("button1");

div.addEventListener("click" ,function(){alert("第一次执行");} ,true);//1

div.addEventListener("click" ,function(){alert("第二次执行");} ,true);//2

btn.addEventListener("click" ,function(){alert("button 执行");});  

这两者区别仅仅发生在对一个元素的一个阶段（冒泡或捕获）绑定了多个事件处理函数时（多个事件处理函数顺序按照定义时的顺序），如上面，如果在//1这行的alert后加上stopImmediatePropagation()那么只会弹出一个对话框“第一次自行”，但是如果换成stopPropagation()会弹出“第一次执行”和“第二次执行”。

简单的说下return false：（极其不赞成使用，现在return false只会阻止默认行为，不会停止事件传播）

1.使用事件侦听器注册的事件处理函数里面使用该语句无任何效果，不能阻止默认行为

2.使用DOMObj=onclick=function(e){...}注册的事件处理函数，该语句能阻止默认行为

3.在标签里面使用onclick="fun(event)"，然后fun函数里面写了该语句，无法阻止默认行为

4.在标签里面使用onclick="return fun(event)"，然后fun函数里面写了该语句，能阻止默认行为

5.在标签里面使用onclick="return false"，能阻止默认行为

也就是说，使用return false阻止默认行为只有两种情况：

1，在标签属性里面写return false，这就是上述4和5的情况

2，在DOMObj的事件处理函数里面写return false，这就是上述2的情况