- it
- JS事件之跨浏览器事件处理程序与Event对象跨浏览器兼容性写法
JS事件之跨浏览器事件处理程序与Event对象跨浏览器兼容性写法
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="UTF-8">
<title
>Event对象跨浏览器兼容写法
</title
>
</head
>
<body
>
<div id
="parent">
<div id
="child">点击我
</div
>
</div
>
<a href
="http://www.baidu.com" id
="a">跳转链接
</a
>
<script type
="text/javascript">
var EventUtil
= {
addHandler
: function(element
, type
, handler
) {
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
) {
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
= 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("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
);
})
</script
>
</body
>
</html
>
