优秀的编程知识分享平台

网站首页 > 技术文章 正文

JavaScript 事件监听函数及其兼容性

nanyue 2024-07-23 13:26:04 技术文章 8 ℃

IE中的监听方法:

attachEvent(事件名称, 函数),绑定事件处理函数

detachEvent(事件名称, 函数),解除绑定

标准DOM的事件监听:

addEventListener(事件名称,函数, 捕获)

removeEventListener(事件名称, 函数, 捕获)

判断浏览器是否兼容事件处理函数

<script>
var x = document.getElementById("myBtn");
if (x.addEventListener) {
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
x.attachEvent("onclick", myFunction);
}
function myFunction() {
alert("Hello World!");
}
</script>

编写兼容性事件监听函数

function myAddEvent(obj, ev, fn)
{
    if(obj.attachEvent)
    {
    obj.attachEvent('on'+ev, fn);
    }
    else
    {
    obj.addEventListener(ev, fn, false);
    }
}

实例:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
function myAddEvent(obj, ev, fn)
{
    if(obj.attachEvent)
    {
    obj.attachEvent('on'+ev, fn);
    }
    else
    {
    obj.addEventListener(ev, fn, false);
    }
}
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');

    myAddEvent(oBtn, 'click', function (){
    alert('a');
    });

    myAddEvent(oBtn, 'click', function (){
    alert('b');
    });
};
</script>
</head>
<body>
<input id="btn1" type="button" value="按钮" />
</body>
</html>
最近发表
标签列表