跨浏览器事件.js
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] = null;
}
},
getEvent: function (event) {
return event ? event : window.event;
}，
getTarget: function (event) {
return event.target || event.srcElement;
},
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
};
事件.html
<body>
<ul id="myLinks">
</ul>
</body>
<script src='跨浏览器事件.js'> </script>
<script>
var link = document.getElementById('myLinks')
var lis = `<li id="goSomewhere">Go somewhere</li>
<li id="doSomething">Do something</li>
<li id="sayHi">Say hi</li>`
link.innerHTML = lis
EventUtil.addHandler(link, 'click', function (event) {
var e = EventUtil.getEvent(event)
var target = EventUtil.getTarget(e)
if (target.id == 'goSomewhere') {
console.log('Go somewhere')
return false;
}
if (target.id == 'doSomething') {
console.log('Do something')
return false;
}
if (target.id == 'sayHi') {
console.log('Say hi')
return false;
}
})
</script>
