js事件监听的兼容写法

 1 addEvent:function(el,type,fn,capture) {
 2     if (window.addEventListener) {
 3         if (type === "mousewheel" && document.mozHidden !== undefined) {
 4             type = "DOMMouseScroll";
 5         }
 6         el.addEventListener(type, fn, !!capture);
 7     } else if (window.attachEvent) {
 8         el.attachEvent("on" + type, fn);
 9     }
10 },
11 removeEvent:function(el,type,fn,capture) {
12     if (window.removeEventListener) {
13         if (type === "mousewheel" && document.mozHidden !== undefined) {
14             type = "DOMMouseScroll";
15         }
16         el.removeEventListener(type, fn, !!capture);
17     } else if (window.detachEvent) {
18         el.detachEvent("on" + type, fn);
19     }
20 },
21 //对鼠标滚轮做的兼容性处理
22 eventCompat:function(e) {
23     e || (e = window.event);
24     var type = e.type;
25     if (type == ‘DOMMouseScroll‘ || type == ‘mousewheel‘) {
26         e.delta = (e.wheelDelta) ? -e.wheelDelta / 120 : (e.detail || 0) / 3;
27     }
28     //alert(e.delta);
29     if (e.srcElement && !e.target) {
30         e.target = e.srcElement;
31     }
32     if (!e.preventDefault) {
33         e.preventDefault = function() {
34             e.returnValue = false;
35         };
36     }
37     if (!e.stopPropagation && e.cancelBubble !== undefined) {
38         e.stopPropagation = function() {
39             e.cancelBubble = true;
40         };
41     }
42     /*
43        ......其他一些兼容性处理 */
44     return e;
45 },
46 bindAsEventListener:function(context, fun) {
47     var self = this;
48     return function(e) {
49         return fun.call(context, self.eventCompat(e));
50     }
51 }
52
53
54 //调用:
55 var dom = document.getElementById(‘btn‘);
56 var object = {
57     clickCtrl:function(e){
58         alert(e);
59     }
60 };
61
62 addEvent(dom, "click", function(){
63     alert(dom.id);
64 });
65
66 addEvent(dom, "mousedown",
67     bindAsEventListener(object, function(e){
68         object.ClickCtrl(e);
69 }));
时间: 2024-11-04 20:26:11

js事件监听的兼容写法的相关文章

js事件监听机制(事件捕获)总结

在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒泡,没有事件监听的机制,对于事件监听的兼容性问题是最大的难题: 1.直接把事件的方法写在页面结构上 function eventfun(){ //console.log(this); } <input type="button" onclick="eventfun()&qu

js事件监听-addEventListener (w3c标准) 和 attachEvent(ie)

研究了一个小时,没看懂这两个属性 window.onload = function(){ var oDiv = document.getElementById("J_myDiv"); //找到对象 oDiv.onclick = function(){ //设置事件监听函数 alert("click"); }} 缺点:1.添加单一事件 2.不能删除事件 第二:IE中监听函数 var oDiv; function fnClick(){ alert("click

js 事件监听封装

var eventUtil={//添加句柄 //element,节点 //type,事件类型 //handler,函数 addHandler:function(element,type,handler){  if(element.addEventListener){   element.addEventListener(type,handler,false);   }else if(elemnt.attachEvent){//对ie进行判断   element.attachEvent('on'+

js事件监听简介

1.什么是事件监听? 就是让计算机监视一个事件是否发生. 2.事件和事件处理程序 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应某个事件的函数就叫事件处理程序(也叫事件处理函数.事件句柄).事件处理程序的名字以"on"开头,因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload. 总之,事件就是一个动作瞬间,如鼠标点击,事件处理程序是一个过程,处理事件发生时的函数的函数. 3.事件监听器 监听

js事件监听

通过添加事件监听进一步实现业务处理.可以对同一个元素添加相同的事件监听,执行会从上到下的原则,也可以添加多个事件监听针对同一元素. 针对元素监听: document.getElementById("idName").addEventListener("eventType",functionName);//注意:前面不加on 如click事件 针对window对象监听: window.addEventListener(“resize”,function(){ aler

JS事件监听的添加方法

一. 我们一般在的事件添加时是这样做的: elm.onclick = function( ) { //handler } 这样的写法兼容主流的浏览器,但是存在一个问题,当同一个elm绑定多个事件时,只有最后一个事件会被添加 如:elm.onclick = handler1; elm.onclick = handler2; elm.onclick = hander3; 只有handler3会被添加执行,所以我们使用另外一种方法添加事件: 二. IE:attachEvent elm.attachEv

JS事件监听手机屏幕触摸事件 Touch

JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:     //手指放到屏幕上时触发 touchmove:      //手指在屏幕上滑动式触发 touchend:    //手指离开屏幕时触发 touchcancel:     //系统取

JS事件监听 JS:attachEvent和addEventListener 使用方法

attachEvent与addEventListener区别 适应的浏览器版本不同,同时在使用的过程中要注意attachEvent方法          按钮onclickaddEventListener方法    按钮click 两者使用的原理:可对执行的优先级不一样的事件进行操作:attachEvent方法,为某一事件附加其它的处理事件.(不支持Mozilla系列) addEventListener方法 用于 Mozilla系列 举例: Js代码 document.getElementByI

js 事件监听

addEventListener() 方法 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 "click" 或 "mousedown"). 第二个参数是事件触发后调用的函数. 第三个参数是个布尔值用于描述事件是冒泡还是捕获.该参数是可选的. 注意:不要使用 "on" 前缀. 例如,使用 "click" ,而不是使用 "oncl