您的位置：首页 > 其它

兼容绑定事件的3种方法

2013-08-29 00:50 183 查看
一、直接绑定(不利于UI和代码分离,event详见后面）

<input type="button" onclick="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.onload=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);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航