夺命雷公狗---javascript NO:10 解决事件监听兼容性问题和移除事件

最新推荐文章于 2024-09-29 11:25:09 发布

1361976860

最新推荐文章于 2024-09-29 11:25:09 发布

阅读量61

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/leigood/p/5031858.html

版权

思路：通过JavaScript代码判断当前用户所使用的浏览器（IE、W3C）

① 创建public.js核心公用js库

② 创建事件监听函数addEvent()

③ 创建代码如下：

function $(id){
return document.getElementById(id);
}

    //解决事件监听兼容性问题（判断浏览器类型）
    function addEvent(obj,type,callback){
        if(obj.addEventListener){
            obj.addEventListener(type,callback);
        }else{
            obj.attachEvent(‘on’+type,callback);
        }
}

④ 在html页面中调用addEvent方法实现事件监听

1）载入public.js文件和定义事件监听按钮

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
<script src=”./public.js”></script>
</head>
<body>
<input type=”button” id=”btnok” value=”点击”>
</body>
</html>

为btnok按钮绑定事件监听程序

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
<script src=”./public.js”></script>
<script>
window.onload = function(){
addEvent($(‘btnok’),’click’,function(){
alert(‘hello’);
})
addEvent($(‘btnok’),’click’,function(){
alert(‘world’);
})
}
</script>
</head>
<body>
<input type=”button” id=”btnok” value=”点击”>
</body>
</html>

运行结果：在IE与W3C中都可以正常弹出hello与world

事件监听的移除

在有些情况下，我们可能需要移除某个对象的某个事件，那么我们可以采用移除事件监听的方式，代码如下：

IE模型下：

attachEvent ：添加

detachEvent(type,callback); ：移除

参数说明：

type：带on前缀的事件类型

callback：要移除的事件处理程序

W3C模型下：

addEventListener ：添加

removeEventListener(type,callback);

参数说明：

type：不带on前缀的事件类型

callback：要移除的事件处理程序

注：如果想进行移除相关事件监听程序，那么在添加事件监听时必须为事件处理程序命名。

示例代码：

IE模型浏览器

<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
<script src=”./public.js”></script>
<script>
function fun1(){
alert(‘hello’);
}
function fun2(){
alert(‘world’);
}
window.onload = function(){
//绑定事件监听
addEvent($(‘btnok’),’click’,fun1);
//在次绑定事件监听
addEvent($(‘btnok’),’click’,fun2);
//移除事件
$(‘btndel’).onclick = function(){
//IE模型
$(‘btnok’).detachEvent(‘onclick’,fun1);
}
}
</script>
</head>
<body>
<input type=”button” id=”btnok” value=”点击” />
<input type=’button’ id=”btndel” value=”移除” />
</body>
</html>

W3C模型浏览器

<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
<script src=”./public.js”></script>
<script>
function fun1(){
alert(‘hello’);
}
function fun2(){
alert(‘world’);
}
window.onload = function(){
//绑定事件监听
addEvent($(‘btnok’),’click’,fun1);
//在次绑定事件监听
addEvent($(‘btnok’),’click’,fun2);
//移除事件
$(‘btndel’).onclick = function(){
//IE模型
$(‘btnok’).removeEventListener(‘click’,fun1);
}
}
</script>
</head>
<body>
<input type=”button” id=”btnok” value=”点击” />
<input type=’button’ id=”btndel” value=”移除” />
</body>
</html>

解决移除事件监听兼容性问题

① 在public.js公用函数库中定义removeEvent方法

② 定义一下函数

示例：

function removeEvent(obj,type,callback){
    if(obj.removeEventListener){
        obj.removeEventListener(type,callback);
    }else{
        obj.detachEvent(‘on’+type,callback);
    }
}

创建点击与移除按钮

<body>
<input type=”button” id=”btnok” value=”点击” />
<input type=’button’ id=”btndel” value=”移除” />
</body>

为按钮添加事件监听（要求有名字），和调用移除事件监听方法

<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
<script src=”./public.js”></script>
<script>
function fun1(){
alert(‘hello’);
}
function fun2(){
alert(‘world’);
}
window.onload = function(){
//绑定事件监听
addEvent($(‘btnok’),’click’,fun1);
//在次绑定事件监听
addEvent($(‘btnok’),’click’,fun2);
//移除事件
$(‘btndel’).onclick = function(){
removeEvent($(‘btnok’),’click’,fun1);
}
}
</script>
</head>
<body>
<input type=”button” id=”btnok” value=”点击” />
<input type=’button’ id=”btndel” value=”移除” />
</body>
</html>