javascript - 各事件绑定有什么区别

Question

 1.$(selector)[type](fn());
 2.$(selector).on(type,fn());
 3.document.getElementById[x].addEventListener(type,fn());（attachEvent）
 4.document.getElementById[x][type]=fn();

老是顺便用，也不知到区别，请大牛指导下什么时候该用什么

Answer 1

• 1、2两个是jquery封装的兼容各种浏览器的绑定事件的方法，并且绑定的函数是放在一个存放jquery专门的扩展数据的对象里。
  也就是说，通过jquery以外的途径移除DOM对象比如利用浏览器原生api移除某个元素XXX.removeChild(XXX);这样移除的元素，并不会把jQuery的事件方法所绑定的函数也移除。
  XXX.removeEventListener方法也不能移除jQuery所绑定的函数。

• 3、addEventListener是DOM3级API里的绑定事件的方法，就是浏览器原生的。attachEvent是IE特有的。

• 4、这个是DOM1级里的，和addEventListener之类的区别在于这样只能绑定一个处理事件的函数，如果设置多次，后面的会覆盖前面的。
  比如 XXX.onclick = fn1;XXX.onclick = fn2;点击对应元素就只执行fn2不会执行fn1。

Answer 2

第一种是jQuery封装好的事件方法调用，方法名称前面一般都比原生事件少了个on，兼容性也处理的比较好，将需要执行的函数之间传参进去就可。

$('.xxx').click(function(){
    //...
})

第二种是使用jQuery封装好的事件绑定on方法，可以同时绑定多少事件

$('.xxx').on({
    'mouseenter' : function(){//...},
    'mouseleave' : function(){//...}
})

还有更多种用法，具体可以参考jQuery api

第三种是原生的DOM3级事件处理程序,主要的好处就是可以添加多个事件处理程序。
在标准浏览器下，使用addEventListener()来监听事件，事件名称与jQuery中的事件名称一样，不需要前面的on，而且还可以使用参数true/false来决定它是在捕获阶段还是冒泡阶段调用事件处理程序。

var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
    console.log('...')
},false);
btn.addEventListener('click',function(){
    alert(this.id)
},false)

上面的代码先会打印出...,然后再弹出这个btn的ID。

在IE浏览器下，使用attachEvent()来监听，但是事件名称要与DOM1级事件名称一样，即前面要带个on，由于早期的IE下没有事件捕获阶段，所以通过这个添加的事件处理程序都被添加到冒泡阶段。

var btn = document.getElementById('btn');
btn.attachEvent('onclick',function(){
    console.log('...')
})

第四种是DOM1级事件处理程序，是指定事件处理程序的传统方式。简单、具有跨浏览器的优势。