JavaScript事件處理程序(事件偵聽器)

2019-11-20 23:43:49

字體：大中小

來源：轉載

供稿：網友

我們知道，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的面向對象的特性實現限制試用期