js 跨浏览器实现事件
2017-05-30 10:56
211 查看
我们知道不同的浏览器实现事件是不同的,就比如说我们常见的有三种方法:
1,dom0处理事件的方法,以前的js处理事件都是这样写的。
2,dom2 处理时间的方法 如下:可以同时添加两个相同的事件类型,移除这个时间的时候,函数必须不是匿名函数,否则不起作用
3,ie处理事件,删除事件detachEvent 注意此处是onclick ,不是click
如何写一个跨浏览器的事件处理程序呢:综上所述如下:
(function () { var p=document.getElementById("huchao1"); //dom0处理方法 p.onclick=function (a) { console.log(a.type); // body... } //移除方法如下: p.onclick=null;
// body... })()
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浏览器滚轮事件实现横向滚动照片展
- js:浏览器端同一页面多区域同步退出[同步事件]思想与实现
- 原生JS实现跨浏览器的事件处理程序
- js实现浏览器窗口大小被改变时触发事件的方法
- js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器) 转
- js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交)
- js 实现一些跨浏览器的事件方法详解及实例
- ireport超链接支持js事件简单实现 兼容火狐谷歌IE等浏览器
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)
- js实现浏览器窗口大小被改变时触发事件的方法
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)
- Js实现浏览器下标签页间切换触发的事件
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交)
- Raphael JS:SVG/VML+JS实现跨浏览器的矢量图形实现方案
- jsp写js,浏览器不支持href="javascrpt:void(0)"引起事件
- 一种基于浏览器的自动小票机打印实现方案(js版)