Event对象跨浏览器兼容性写法
各种事件举例
Event对象跨浏览器兼容写法 - 锐客网
点击我
跳转链接
="text/javascript">
//Event addEventListener chrome firefoxIE9event.targetpreventDefaultstopPropagation
//Event attachEventIE8系列的event.srcElementreturnValuecancelBubble
var EventUtil = {
addHandler: function(element, type, handler) {
//绑定事件
//Chrome Firefox IE9等addEventListener
//IE8及IE8以下的浏览器attachEvent
if(element.addEventListener) {
element.addEventListener(type, handler, false);
} else if(element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler
}
},
removeHandler: function(element, type, handler) {
//移除事件
//Chrome Firefox IE9等
//IE8及IE8以下的浏览器
if(element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if(element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = handler
}
},
getTarget: function(event) {
return event.target || event.srcElement;
},
preventDefault: function(event) {
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = https://www.it610.com/article/false;
}
},
stopPropagation: function(event) {
if(event.stopPropagation) {
event.stopPropagation()
} else {
event.cancelBubble = true;
}
}
}var parent = document.getElementById("parent");
EventUtil.addHandler(parent, "click", function(event) {
alert("parent被触发了")
})var child = document.getElementById("child");
EventUtil.addHandler(child, "click", function(event) {
//alert(111)
alert("child被触发了")
var target = EventUtil.getTarget(event);
console.log(target);
//阻止事件冒泡
EventUtil.stopPropagation(event)
})
var a = document.getElementById("a");
EventUtil.addHandler(a, "click", function(event) {
EventUtil.preventDefault(event);
})
推荐阅读
- 《跨界歌手》:亲情永远比爱情更有泪点
- 数组常用方法一
- 也许第一步很难，但跨过去就好了
- GIS跨界融合赋能多领域技术升级，江淮大地新应用成果喜人
- jQuery插件
- iOS面试题--基础
- 口红选得好，对象不愁找......
- java静态代理模式
- Python-类和对象
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查