javascript 事件-1-优快云博客

本文介绍标准的事件监听方法，包括事件触发的过程、如何移除监听、事件代理的好处及使用方法，以及如何阻止事件冒泡。同时，还介绍了jQuery中.on()方法的用法及其参数传递。

本文参考 http://f2e.im/t/850

事件的监听

//标准的事件监听
//eventName 可以是 click , mouseover
//callback 就是回调函数
//use-capature:true 表示捕获阶段
//false 表示冒泡阶段
element.addEventListener(<eventName>,<callBack>,<use-capature>);

移除监听

var  fun = function(){} ;

element.addEventListener('click',fun,false);

element.removeEventListener('click',fun,false);

函数不能在是匿名函数

事件触发过程

举例点击按钮

点击事件从window出发寻找到目标节点（捕获阶段）

在目标节点上出发事件（目标阶段）

到达目标节点后从原路返回到window（冒泡阶段）

在前面的监听事件中第三个参数为什么设为false （就是在冒泡阶段监听）

因为 IE 浏览器不支持在捕获阶段监听事件

使用事件代理

好处

1 直接绑定在父节点上，可以减少绑定子节点的数量，减少监听的数量

2 可以监听动态的DOM事件

element.addEventListener('click',function(event){
    if(event.target.targetName == 'a'){
          //do something
    }

},false)

停止事件冒泡

element.addEventListener('click',function(event){
          event.stopPropagation();
},false);

关于event 对象

属性有

type 例如'click'

target 目标节点(node)

还有诸多其他属性在http://f2e.im/t/850 中可以查看

使用jQuery

.on(event,[selector],[data],callback);

//举例
$(document).on('click',"#btn",{name:123},function(event){
    //弹出123
    alert(event.data.name);
    $("#btn1").trigger("click");
})

关于on 可以查看api 说明

收获

1 明白了事件触发的几个阶段

2 知道可以有event 这种对象

$("#btn").on("click",function(event){

   for(var key in event){
     console.log(key);
  }
})

3 明白 jQuery.on 传递data 就是第三个参数是直接传递到event.data = data