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" /> baidu <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需刷新才能执行]