首页 > 代码库 > js 跨浏览器实现事件
js 跨浏览器实现事件
我们知道不同的浏览器实现事件是不同的，就比如说我们常见的有三种方法：
1，dom0处理事件的方法，以前的js处理事件都是这样写的。
(function () { var p=document.getElementById("huchao1"); //dom0处理方法 p.onclick=function (a) { console.log(a.type); // body... } //移除方法如下： p.onclick=null; // body... })()
2，dom2 处理时间的方法 如下：可以同时添加两个相同的事件类型，移除这个时间的时候，函数必须不是匿名函数，否则不起作用
(function () { var a=document.getElementById("huchao1"); a.addEventListener("click",function () { console.log(this.id); // body... // false 表示在冒泡阶段 },false); a.addEventListener("click",function () { console.log("alll"); // body... },false); //这样移除不起作用，函数必须不是匿名函数 a.removeEventListener("click",function () { // body... },false); // body... })()
3，ie处理事件，删除事件detachEvent 注意此处是onclick ,不是click
(function () { var btn=document.getElementById("huchao1"); btn.attachEvent("onclick",function () { alert("dd"); // body... }) // body... })()
如何写一个跨浏览器的事件处理程序呢：综上所述如下：
(function () { var EventUtil={ addHandler:function (element,type,Handler) { //此处dom2事件 if (element.addEventListener) { //false表示冒泡阶段 element.addEventListener(type,Handler,false); }else if(element.attachEvent){ //ie处理事件 element.attachEvent("on"+type,Handler); }else{ //dom0处理事件 element["on"+type]=Handler; } // body... }, removeHandler:function (element,type,Handler) { // body... if (element.addEventListener) { element.removeEventListener(type,Handler,false); }else if(element.attachEvent){ element.removeEvent("on"+type,Handler); }else{ element["on"+type]=null; } } } var btn=document.getElementById("huchao1"); var handler=function () { alert("huchao"); // body... } EventUtil.addHandler(btn,"click",handler); EventUtil.removeHandler(btn,"click",handler); // body... })()
(function () { var p=document.getElementById("huchao1"); //dom0处理方法 p.onclick=function (a) { console.log(a.type); // body... } //移除方法如下： p.onclick=null;
// body... })()
js 跨浏览器实现事件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。