JavaScript事件处理程序(事件侦听器)_javascript技巧

我们知道，javascript与HTML之间的交互是通过事件来实现的，事件就是用户或浏览器自身执行的某种动作，比如click、mounseover、load……,而响应事件的函数就叫做事件处理函数（或事件侦听器）。

<html> <head> <title>event util test</title> <script type="text/javascript"> var eventUtil = { addListener: function(element, type, hander) { if (element.addEventListener) { element.addEventListener(type, hander, false); } else if (element.attachEvent) { element.attachEvent('on' + type, hander); } else { element['on' + type] = hander; } }, getEvent: function(event) { return event || window.event; //return event ? event : window.event; }, getTarget: function(event) { return event.target || event.srcElement; }, preventDefault: function(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, removeListener: function(element, type, hander) { if (element.removeEventListener) { element.removeEventListener(type, hander, false); } else if (element.deattachEvent) { element.detachEvent(type, hander); } else { element['on' + type] = null; } }, stopPropagation: function(event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } } }; </script> </head> <body> <input type="button" value="click me" id="btn" /> <a href="http://www.baidu.com">baidu</a> <script type="text/javascript"> (function() { var btn = document.getElementById("btn"); var link = document.getElementsByTagName("a")[0]; eventUtil.addListener(link, "click", function(event) { alert("prevent default event"); var event = eventUtil.getEvent(event); eventUtil.preventDefault(event); }); eventUtil.addListener(btn, "click", function(event) { var event = eventUtil.getEvent(event); var target = eventUtil.getTarget(event); alert(event.type); alert(target); eventUtil.stopPropagation(event); }); eventUtil.addListener(document.body, "click", function() { alert("click body"); }); })(); </script> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

JavaScript事件处理程序(事件侦听器)_javascript技巧_