javascript之事件绑定
曾经写过一篇随笔，attachEvent和addEventListener，跟本文内容有很多相似之处
本文链接：javascript之事件绑定
1、原始写法
<div onclick="alert(‘you clicked me just now);‘">click me</div>
在刚开始学习前端的时候，我们不免这么将事件绑定写在html中，后来我们想将html和js脚本进行分离便这么写
<div id="test">click me</div> <script type="text/javascript"> test.onclick=function(){ alert("you click me just now"); }; </script>
这么写其实和上一种写法在执行上是没有任何分别的，只是他略微显得“高大上”一点。
当我们写更复杂一些的脚本的时候，发现这种“对象.事件=事件处理函数”方式并不好，因为后面的事件明显得会覆盖前一个事件处理函数，多次事件绑定的结果往往是仅执行最后一个事件处理函数，可以看attachEvent和addEventListener文中示例。
后来，我们必须在实际开发中放弃这种“非主流”的写法了。
2.attachEvent和addEventListener
首先得说明，attachEvent是仅在万恶的IE是下可行的，addEventListener是在其它遵循W3C标准的浏览器中可行(常用的浏览器可以放心使用addEventListener)，并且在IE9和之后的版本中也可以使用addEventListener。看来在大势所趋下，MS不得不妥协了。
在此得说明，上述的无论是“对象.事件=事件处理函数”的方式，attachEvent事件绑定的方式还是addEventListener不带第三个参数的情形下，都是冒泡型事件处理方式。至于什么是冒泡事件什么是捕获事件，这个涉及到DOM文档对象模型和事件流。简单来说就是，冒泡就是事件的传播方式是从事件目标节点到DOM文档结构的根节点方向传播，而捕获型事件就是从DOM文档结构的根节点到事件目标节点。
obj = document.getElementById("testdiv");
obj.attachEvent(‘onclick‘,function(){{alert(‘1‘);});
obj.attachEvent(‘onclick‘,function(){{alert(‘2‘);});
obj.attachEvent(‘onclick‘,function(){{alert(‘3‘);});
//执行顺序是alert(3),alert(2),alert(1);
obj = document.getElementById("testdiv");
obj.addEventListener(‘click‘,function(){{alert(‘1‘);},false);
obj.addEventListener(‘click‘,function(){{alert(‘2‘);},false);
obj.addEventListener(‘click‘,function(){{alert(‘3‘);},false);
//点击obj对象时,执行顺序为alert(‘1‘),alert(‘2‘),alert(‘3‘);
从这段例子可以看出：
对于同一个DOM对象绑定多个事件处理函数时，attachEvent是先绑定后执行，而addEventListener是先绑定先执行，这么看来attachEvent绑定的事件不符合程序员开发的思路啊，我后绑定的事件处理函数却要先执行，完全不遵循“先来后到”的规矩，搞得莫名其妙，看来这个attachEvent在不远的将来应该会被淘汰。
attachEvent在事件绑定的事件还必须加上这个“on”，如果不注意的话很容易忘记添加，这个“on”关键字可能是从那种原始写法中没有进化完全吧。
当了解完了这两个函数的区别后，我们可以写一些共同方法用来兼容IE和其它的浏览器
function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); // W3C标准，根据useCapture来判断是冒泡事件还是捕获事件 return true; } else if (elm.attachEvent) { var r = elm.attachEvent(‘on‘ + evType, fn);//IE5+，仅支持冒泡事件 return r; } else { elm[‘on‘ + evType] = fn;//DOM事件 } }
当然这个方法也有弊端，在IE8跟之前版本下，还是事件的后绑定先执行且一直都是冒泡事件。或者使用如下的方法：
var addEvent = (function () { if (document.addEventListener) { return function (el, type, fn) { if (el.length) { for (var i = 0; i && el.length; i++) { addEvent(el[i], type, fn); } } else { el.addEventListener(type, fn, false); } }; } else { return function (el, type, fn) { if (el.length) { for (var i = 0; i && el.length; i++) { addEvent(el[i], type, fn); } } else { el.attachEvent(‘on‘ + type, function () { return fn.call(el, window.event); }); } }; } })();
这些都是原生的脚本事件绑定处理方式，显得低调有内涵。
继续
<div id="a1" style="float: left; width: 200px; height: 200px; background-color: red;"> a1 <div id="a2" style="float: left; width: 100px; height: 100px; background-color: blue;">a2</div> </div> <script type="text/script"> a1.addEventListener(‘click‘, function (e) { console.log(‘a1‘); }); a2.addEventListener(‘click‘, function (e) { console.log(‘a2‘); e.stopPropagation(); }); </script>
在a2的事件处理函数中添加了e.stopPropagation()，这句代码可以阻止事件的继续传播（无论是继续捕获阶段还是继续冒泡阶段），在实际开发中应该会经常性的用到，IE还是不支持。Event.preventDefault()可以阻止事件目标的默认动作，IE也是不支持的。
3.jQ的bind，delegate，on和live
有了jQ之后，所有的事件绑定都变得轻而易举了。bind，delegate，on和live他们的使用在此就不做赘述，jQ api上都有详细讲解。
首先说bind，bind已经很好的解决了IE的attachEvent先绑定后执行的问题了，请看
<div id="a1" style="float: left; width: 200px; height: 200px; background-color: red;"> a1 </div> <script src="jquery-1.10.2.js" type="text/javascript"></script> <script type="text/javascript"> $(‘#a1‘).bind(‘click‘, function () { console.log(‘1‘); }).bind(‘click‘, function () { console.log(‘2‘); }); </script>
点击a1后，打出的log是先1后2，跟事件的绑定顺序一致。
在jQ1.7之前的版本中，bind方法会直接将事件处理函数附加到元素上，而事件处理函数被添加到当前元素的jQuery对象上，当有很多元素绑定时间处理函数时，这时便需要大量的存储空间来存储这个事件处理函数了。那个时候，推荐使用的方法是live，因为live是将事件处理函数添加document对象上，因此可以省去为每个元素都附加存储事件处理函数的空间。
不过，jQ1.7之后的版本中，有了on方法，live方法也就被取消了，on方法将事件处理函数添加到了当前选定的jQuery对象上。其实它等价于delegate方法。
<ul id="ul"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <ul> <script type=‘text/javascript‘> $(‘#ul‘).on(‘mouseover‘,‘li‘,function(){alert(‘1‘);}); </script>
上例中，将事件处理函数function(){alert(‘1‘);}附加到的对象就是ul。
delegate是事件委托，因为是委托，事件绑定在ul上，动态在ul里添加的元素也能激发上述绑定的事件处理函数
<script type=‘text/javascript‘> $(‘#ul‘).delegate(‘li‘,‘mouseover‘,function(){alert(‘1‘);}); </script>
看一下jQ源码就知道，delegate等价于on方法。
delegate: function( selector, types, data, fn ) { return this.on( types, selector, data, fn ); },
综上所述，在jQ中推荐的事件绑定方式是delegate、on，它们是等价的，在1.7之后的版本中live方法不可以使用，bind方法也可以绑定事件，但是最好是简单元素结构下使用bind。
4.关于事件处理函数的移除
<div id="test">aaa</div> <script type="text/javascript"> test.onclick = function(){alert(‘1‘)}; test.onclick = null; </script>
这种方式其实就是覆盖。
针对于attachEvent和addEventListener两个函数，他们的解除方法分别是detachEvent和removeEventListener
obj = document.getElementById("testdiv");
obj.detachEvent(‘onclick‘,function(){{alert(‘1‘);});
obj.detachEvent(‘onclick‘,function(){{alert(‘2‘);});
obj.detachEvent(‘onclick‘,function(){{alert(‘3‘);});
obj = document.getElementById("testdiv");
obj.removeEventListener(‘click‘,function(){{alert(‘1‘);},false);
obj.removeEventListener(‘click‘,function(){{alert(‘2‘);},false);
obj.removeEventListener(‘click‘,function(){{alert(‘3‘);},false);
对于jQ的事件解除绑定分别是
bind---->unbind
on---->off
live---->die
delegate---->undelegate
等等
为了防止jQ事件解除的时候将所有的方法都给解除了，可以给事件绑定时添加命名空间来区分
$element.delegate(‘.boot‘,‘click.dismiss.modal‘,fn1) .delegate(‘.boot‘,‘dblclick.dismiss‘,fn2)
.delegate(‘.boot‘,‘mouseover‘,fn3); //do sth $element.undelegate(‘.modal‘);//仅将fn1解除绑定 //do sth $element.undelegate(‘.dismiss‘);//能够将fn1和fn2都解除绑定，但fn1已经解除 ,此处实现的效果是解除fn2
//do sth
$element.undelegate(); //解除所有事件，此处仅解除fn3
另外，如果我们想方法绑定后仅执行一次的话，可以使用jQ的one方法，省去我们解除事件绑定的过程。
$element.one(‘dblclcik‘,function(){ // do sth }); // 可以省去解绑这个过程，仅能执行一次
事件绑定的方式很多，需要看时机过程中的需求，需要考虑的因素是简便，简介，性能好，同时需要兼容各种浏览器，做到这些就可以以不变应万变了。
本文参考：attachEvent和addEventListener
全文中如果有不正确的地方，请斧正。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
