夺命雷公狗---javascript NO:10 解决事件监听兼容性问题和移除事件
思路：通过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>
