1 事件绑定：事件与函数绑定和怎么取消绑定
1.1 元素.onclick这种形式，如下：
1 ????????<div id="div1">aaa</div>2 ????????3 ????????<script type="text/javascript">4 ????????????var oDiv1 = document.getElementById(‘div1‘);5 ????????????oDiv1.onclick = function(){6 ????????????????alert(this.innerHTML); //将会弹出aaa7 ????????????}8 ????????</script>这种绑定不存在什么兼容性问题，但是如果想绑定2个事件，就麻烦了。上面的js代码改成如下：
1 ????????????var oDiv1 = document.getElementById(‘div1‘);2 ????????????oDiv1.onclick = function(){3 ????????????????alert(this.innerHTML); //将会弹出aaa4 ????????????}5 ????????????oDiv1.onclick = function(){6 ????????????????alert(this.nodeType);7 ????????????}我们给oDiv1后面又绑定了onclick，前面的那个alert(this.innerHTML)就会失效。
这种方式绑定了，后面的代码需要取消这个绑定，哪怎么取消呢
1 //取消刚才的绑定2 oDiv1.onclick = null;
当然，这里只是很简单的两个函数例子，可以很容易将2个onclick合并，但是如果是多人合作，代码多，结构复杂，还是看看其他的事件和函数绑定的方式吧。
1.2 元素.attachEvent 和 元素.addEventListener进行事件和函数绑定和取消，如下：
这种方式存在浏览器兼容性问题
/* 总结ie6/7/8 ：obj.attachEvent(事件名称，事件函数); ???1.没有捕获（事件捕获在后面讲，是和冒泡相反的，IE不支持） ???2.事件名称带有on，如这里是onclick ????3.事件函数执行的顺序是反着的，后绑定的那个函数先执行 ???4.事件函数中this指向window，这不是本意，带来了不方便标准浏览器及高版本IE：obj.addEventListener(事件名称，事件函数，是否捕获); ???1.有捕获 ???2.事件名称不带on ???3.事件执行的顺序是正常的 ???4.this触发该事件的对象*/
上面的代码继续改，如下：
下面的代码只能在IE6.7.8.9下运行，但是ie9也有addEventListener方法，就是IE9下attachEvent和addEventListener都行
1 ????????<div id="div1">aaa</div> 2 ?????????3 ????????<script type="text/javascript"> 4 ????????????var oDiv1 = document.getElementById(‘div1‘); 5 ????????????//改的是这里，事件和函数进行绑定 6 ????????????oDiv1.attachEvent(‘onclick‘,function(){ 7 ????????????????//这里的this变成了window，也不能用this.innerHTML了 8 ????????????????alert(oDiv1.innerHTML); ????????????????9 ????????????});10 ????????????oDiv1.attachEvent(‘onclick‘,function(){11 ????????????????alert(oDiv1.nodeType); ???????????????12 ????????????}); ???????????13 ????????</script>再看看标准浏览器，如谷歌火狐浏览下怎么写
1 ????????<div id="div1">aaa</div> 2 ?????????3 ????????<script type="text/javascript"> 4 ????????????var oDiv1 = document.getElementById(‘div1‘); 5 ????????????//改的是这里，事件和函数进行绑定，IE.6.7.8不支持addEventListener 6 ????????????oDiv1.addEventListener(‘click‘,function(){ 7 ????????????????//在标准浏览器下，this还是只oDiv1 8 ????????????????alert(this.innerHTML); ????????????????9 ????????????});//addEventListener第三个参数没写，默认：冒泡10 ????????????oDiv1.addEventListener(‘click‘,function(){11 ????????????????alert(this.nodeType); ???????????????12 ????????????}); ???????????13 ????????</script>存在兼容性问题，我们封装一个函数进行事件绑定操作
1 ????????<div id="div1">aaa</div> 2 ?????????3 ????????<script type="text/javascript"> 4 ????????????var oDiv1 = document.getElementById(‘div1‘); 5 ?????????????6 ????????????//改的是这里，封装了一个bind函数来解决 7 ????????????function bind(obj,evname,fn){ 8 ????????????????if(obj.addEventListener){ //IE9+、谷歌、火狐等 9 ????????????????????obj.addEventListener(evname,fn);10 ????????????????}else{//IE6.7.8，虽然IE9也支持attachEvent，但是IE9用上面的addEventListener了11 ????????????????????obj.attachEvent(‘on‘+evname,function(){12 ????????????????????????fn.call(obj);13 ????????????????????});14 ????????????????}15 ????????????}16 17 ????????????//使用18 ????????????bind(oDiv1, ‘click‘, function(){19 ????????????????alert(this.innerHTML); ???20 ????????????});21 ????????????bind(oDiv1, ‘click‘, function(){22 ????????????????alert(this.nodeType); ???23 ????????????});24 ????????</script>那怎么取消掉这种方式绑定呢？
/* ???????????老ie : obj.detachEvent(事件名称，事件函数); ???????????标准 ???: obj.removeEventListener(事件名称，事件函数，是否捕获); ???????????*//**上面事件绑定的时候，我没有给函数命名，是个匿名函数。那匿名函数看着是一样的代码，确是不同的对象，就没有办法取消的了。
*/ ???????????????????????oDiv1.addEventListener(‘click‘, fn1, true); ????????????// 绑定的时候是true，取消的时候，最后那个参数也需要为true，为false则取消不掉 ???????????// 下面fn1改为fn2不报错，虽然document没有绑定fn2，但是改为fn3就不行了，报错：不存在fn3这个函数 ???????????oDiv1.removeEventListener(‘click‘, fn1, true);
???????????var oDiv1 = document.getElementById(‘div1‘); ???????????????????????oDiv1.addEventListener(‘click‘,function(){ ???????????????alert(this.innerHTML); ???????????}); ???//取消不了，因为匿名函数没有抓手，得用有名字的函数 ???????????oDiv1.removeEventListener(‘click‘,function(){ ???????????????alert(this.innerHTML); ???????????});而上面这个换成下面这样就起效果。
???????????var oDiv1 = document.getElementById(‘div1‘); ???????????????????????oDiv1.addEventListener(‘click‘,fn1}); ???????????//这样点击就没有效果，因为取消掉了 ???????????oDiv1.removeEventListener(‘click‘,fn1); ???????????????????????function fn1(){ ???????????????alert(this.innerHTML); ???????????} ???未完待续...
JS中事件绑定函数，事件捕获，事件冒泡
原文地址：https://www.cnblogs.com/html55/p/10262371.html