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)就会失效。
当然,这里只是很简单的两个函数例子,可以很容易将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>
未完待续...