EventUtil

介绍

用于抹平 IE 旧版本(IE8 及以下) 与现代浏览器在事件绑定的差异。

https://mqyqingfeng.github.io/EventUtil/

兼容性

支持 IE5+

依赖

原生 JavaScript 实现，无依赖。

说明

IE 旧版本与现代浏览器在事件绑定上的区别有：

事件绑定	现代浏览器	IE8 及以下	区别
添加事件	addEventListener	attachEvent	1. attachEvent 第一个参数是 "onclick"，而非 addEventListener 中的 "click"。 2. 事件处理程序的作用域不同。在 addEventListener 中，this 指向当前元素，而在 attachEvent 中，this 指向 window。 3. 当添加多个事件处理成时，addEventListener 是按照添加顺序顺序执行，attachEvent 以相反的顺序被触发。
移除事件	removeEventListener	detachEvent	detachEvent 不支持捕获，只能冒泡
事件对象-阻止默认	preventDefault	returnValue
事件对象-阻止默认	preventDefault	returnValue
事件对象-阻止冒泡	stopPropagation	cancelBubble
事件对象-鼠标相对于文档的位置	event.pageX 和 event.pageY	无
事件对象-键盘码	event.which	无
事件对象-鼠标按键	event.button	event.button	对应的值不同
事件对象-目标元素	target	srcElement
事件对象-关联元素	relatedTarget	toElement/fromElement

使用 eventUtil 后，不用再担心这些差异，直接按照现代浏览器的使用方法即可。

下载

git clone git@github.com:mqyqingfeng/EventUtil.git

使用

<script src="path/eventUtil.js"></script>

或者

import E from 'path/eventUtil.js'

API

添加事件

var div1 = document.getElementById("div1");
E.addEvent(div1, 'mouseover', function() {
    this.style.backgroundColor = "#3498db";
})

支持面向对象的方式：

var div1 = document.getElementById("div1-1");
E(div1).addEvent('mouseover', function(){
    this.style.backgroundColor = "#3498db";
})

删除事件

var removeFn = function(){...}
E.removeEvent(div1, "click", removeFn)

触发事件

E.triggerEvent(div1, 'click')

事件对象

addEvent 函数中的 event 对象已经是修复后的对象，可以直接使用。

var div1 = document.getElementById("div1");
E.addEvent(div1, 'mouseover', function(event) {
    // 阻止冒泡
    event.stopPropagation();
    // 阻止默认行为
    event.preventDefault();
    // pageX 和 pageY
    event.pageX
    event.pageY
    // target
    event.target
    // relatedTarget
    event.relatedTarget
    // which
    event.which
    // button
    event.button
})

在元素上保存数据

E.setData(div1, 'name', 'Kevin')

获取保存在元素上的数据

E.getData(div1, 'name')

删除保存在元素上的数据

E.removeData(div1)