javascript处理事件的一些兼容写法

绑定事件

addEventListener:W3C标准写法IE不兼容

attachEvent：兼容IE

注意：1：事件名不同：IE下要加“on“,W3C不加

2：加载事件的执行顺序不同，W3C按绑定事件的顺序来执行，而IE6，7是后绑定的时间先发生

3：this的指向，W3C中，绑定函数中的this指向DOM对象，而IE6,7指向WINDOWS对象

var addEvent = function( obj, type, fn ) {if (obj.addEventListener)obj.addEventListener( type, fn, false );else if (obj.attachEvent) {obj["e"+type+fn] = fn;obj.attachEvent( "on"+type, function() {obj["e"+type+fn]();} );}
};

另一个实现

var addEvent = (function () { if (document.addEventListener) { return function (el, type, fn) { el.addEventListener(type, fn, false); }; } else { return function (el, type, fn) { el.attachEvent('on' + type, function () { return fn.call(el, window.event); }); } }
})();

移除事件

var removeEvent = function(obj, type, fn) {if (obj.removeEventListener)obj.removeEventListener( type, fn, false );else if (obj.detachEvent) {obj.detachEvent( "on"+type, obj["e"+type+fn] );obj["e"+type+fn] = null;}
}

加载事件与脚本

var loadEvent = function(func) {var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = func;}else {window.onload = function() {oldonload();func();}}
}

阻止事件

var cancelEvent = function(event) {event = event||window.eventif (event.preventDefault) {event.preventDefault(  );event.stopPropagation(  );} else {event.returnValue = false;event.cancelBubble = true;}
}

取得事件源对象

相当于Prototype.js框架的Event.element(e)

var getTarget = function(event){event = event || window.event;var obj = event.srcElement ? event.srcElement : event.target;return obj
}

转载于:https://www.cnblogs.com/mingjixiaohui/p/5246353.html

javascript处理事件的一些兼容写法相关推荐

Javascript鼠标滚轮事件兼容写法
1.mousewheel事件(兼容opera,chrome,safari,IE) mousewheel事件对应的event对象包含一个wheelDelta属性.用户滚动鼠标滚轮时,wheelDelta ...
JavaScript中的数组遍历forEach()与map()方法以及兼容写法
原理: 高级浏览器支持forEach方法语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是 ...
原生JS forEach()和map()遍历的区别以及兼容写法
一.原生JS forEach()和map()遍历共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...
前端主流浏览器兼容写法（css、js）以及主流框架vue,react的兼容性
前言: 前端样式很重要,但是因为浏览器种类繁多,内核不同,会导致各种兼容问题.尤其ie,但好在微软对ie不在更新了. 常见浏览器: 常见的浏览器有:IE.Edge(替代了ie).Firefox.QQ浏 ...
map语法获取index_JavaScript中的数组遍历forEach()与map()方法以及兼容写法
原理: 高级浏览器支持forEach方法语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是 ...
[js] 获取浏览器当前页面的滚动条高度的兼容写法
[js] 获取浏览器当前页面的滚动条高度的兼容写法 document.documentElement.scrollTop || document.body.scrollTop; 个人简介我是歌谣,欢 ...
ie浏览器样式兼容写法_IE浏览器兼容问题-----html和css的兼容写法
用户使用的浏览器五花八门,我们要保证每一种浏览器都能兼容我们的代码,不能要求用户去改变浏览器,那么就得在我们的代码上下功夫.此时我们要用到hack. HACK就是针对不同的浏览器写不同的HTML.CS ...
【转载】前端开发之CSS兼容写法经验总结
为什么80%的码农都做不了架构师?>>> 前端开发之CSS兼容写法经验总结技术 maybe yes 发表于2014-11-23 22:47 原文链接 : http://blog ...
获取滚动条滚动距离兼容写法
在chrome中,浏览器的滚动条是属于body的,可以通过 document.body.scrollTop来获取垂直滚动距离, document.body.scrollLeft来获取水平滚动距离, 火 ...