各事件绑定有什么区别

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。