兼容绑定事件的3种方法

最新推荐文章于 2021-12-23 18:50:11 发布

Hobootu

最新推荐文章于 2021-12-23 18:50:11 发布

阅读量1.5k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/debugingstudy/article/details/10478041

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

一、直接绑定(不利于UI和代码分离,event详见后面）

<input type="button" οnclick="doEventThing(event)">

二、DOM事件句柄

document.getElementById("divid").onclick = function(){};

三、侦听函数

var tb = document.getelementbyid("tab1"); 
if(window.event==null){// 只有ie下，event是window的对象属性，注意两个侦听函数的区别.该方法只能在没定义event才行
td.attachEvent('onclick', function(){alert('21');}); 
td.attachEvent('onclick', function(){alert('21');})
}
else { // mozilla, netscape, firefox，w3c
td.addEventListener('click', alert('11'), false); 
td.addEventListener('click', alert('12'), false); 
}

下面是比较安全点的写法：

var tb = document.getelementbyid("tab1"); 
if(window.attachEvent){// 判断这个方法是否存在
td.attachEvent('onclick', function(){alert('21');}); 
td.attachEvent('onclick', function(){alert('21');})
}
else { // mozilla, netscape, firefox，w3c
td.addEventListener('click', alert('11'), false); 
td.addEventListener('click', alert('12'), false); 
}

补充：

1、event对象记录当前发生的事件状态，因此它会在有事件发生时自动创建，最初没事件它是undefined。ie下比较特别，因为它作为window的对象属性，直接就创建了，初始值为null。

  document.writeln(event);          //ie输出null，非ie输出undefined

2、说明一下addEventListener()的第三个参数useCapture，表示事件流顺序：

<html>
<body>
<div id="test1">

 <input type="button" id="btn_test" value="se4.cn技术基地" />
 
 </div> 
 
<script>

window.οnlοad=function(){ 
	 document.getElementById("test1").addEventListener("click",test1,false);
	 document.getElementById("test2").addEventListener("click",test2,false); }
	 
 	 function test1(){ alert("外层div触发") }
  	 function test2(){ alert("内层input触发") }  
</script>

</body>
</html>

如果把第三个参数 useCapture设置为true表示采用捕捉顺序；设为false，表示采用冒泡顺序执行。

如果设置useCapture=true，单击button，则先发生test1(),后发生test2();所以建议使用false。

3、移除事件是个好习惯，避免内存泄漏

removeEventListener("click",test2,true); 

document.detachEvent("onclick",test2);

Hobootu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
兼容绑定事件的3种方法

一、直接绑定(不利于UI和代码分离,event详见后面）二、DOM事件句柄document.getElementById("divid").onclick = function(){}; 三、侦听函数var tb = document.getelementbyid("tab1"); if(window.event){// 只有ie下，event是window的对象属性，注意两
复制链接

扫一扫