JS中事件绑定函数,事件捕获,事件冒泡
Posted html55
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS中事件绑定函数,事件捕获,事件冒泡相关的知识,希望对你有一定的参考价值。
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); //将会弹出aaa 7 } 8 </script>
这种绑定不存在什么兼容性问题,但是如果想绑定2个事件,就麻烦了。上面的js代码改成如下:
1 var oDiv1 = document.getElementById(‘div1‘); 2 oDiv1.onclick = function(){ 3 alert(this.innerHTML); //将会弹出aaa 4 } 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中事件绑定函数,事件捕获,事件冒泡的主要内容,如果未能解决你的问题,请参考以下文章