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

更新時(shí)間：2011年08月04日 18:03:18 作者：

一個(gè)簡單的示例來演示如何使用自定義的eventUtil對(duì)象，javascript事件處理函數(shù)

我們知道，javascript與HTML之間的交互是通過事件來實(shí)現(xiàn)的，事件就是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作，比如click、mounseover、load……,而響應(yīng)事件的函數(shù)就叫做事件處理函數(shù)（或事件偵聽器）。

<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需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

事件處理

相關(guān)文章

JavaScript圖片上傳并預(yù)覽的完整實(shí)例
上傳是個(gè)老生常談的話題了,多數(shù)情況下各位想必用的是uplodify,webUploader之類的插件,這篇文章主要給大家介紹了關(guān)于JavaScript圖片上傳并預(yù)覽的相關(guān)資料,需要的朋友可以參考下
2022-01-01
Js利用console計(jì)算代碼運(yùn)行時(shí)間的方法示例
最近看了一本書，發(fā)現(xiàn)了個(gè)計(jì)算代碼執(zhí)行時(shí)間的方法，感覺還挺有用的，所以這篇文章主要給大家介紹了關(guān)于Javascript利用console計(jì)算代碼運(yùn)行時(shí)間的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。
2017-09-09
JS實(shí)現(xiàn)判斷數(shù)組是否包含某個(gè)元素示例
這篇文章主要介紹了JS實(shí)現(xiàn)判斷數(shù)組是否包含某個(gè)元素,涉及javascript屬性操作與正則判斷相關(guān)使用技巧,需要的朋友可以參考下
2019-05-05
瀏覽器復(fù)制插件zeroclipboard使用指南
ZeroClipboard 是國外大神開發(fā)的一個(gè)用于剪貼板復(fù)制的 JS 插件，它是基于 Flash 來實(shí)現(xiàn)跨瀏覽器的復(fù)制功能的。當(dāng)我們使用 ZeroClipboard 的時(shí)候，它會(huì)悄悄隱藏一個(gè)小小的 Flash 影片(swf)，不會(huì)對(duì)我們的用戶界面造成影響。我們只需要借助它實(shí)現(xiàn)復(fù)制功能就行了。
2016-03-03
Ajax與服務(wù)器（JSON）通信實(shí)例代碼
這篇文章主要介紹了Ajax與服務(wù)器（JSON）通信實(shí)例代碼的相關(guān)資料,并附實(shí)例代碼，幫助大家學(xué)習(xí)理解此部分知識(shí)，需要的朋友可以參考下
2016-11-11
JavaScript之json_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了JavaScript之json，JSON它是一種數(shù)據(jù)交換格式。有興趣的可以了解一下
2017-06-06
IE6-IE9不支持table.innerHTML的解決方法分享
讓ie6-ie9支持table.innerHTML，其實(shí)這里只是對(duì)table做了處理，對(duì)其他不支持的元素可以用類似的方案
2012-09-09
微信小程序?qū)崿F(xiàn)搜索功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)搜索功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-03-03
簡約JS日歷控件實(shí)例代碼
這篇文章介紹了一款簡約JS日歷控件的全部代碼，有需要的朋友可以參考一下
2013-07-07
javascript自適應(yīng)寬度的瀑布流實(shí)現(xiàn)思路
這里主要介紹瀑布流的一種實(shí)現(xiàn)方法：絕對(duì)定位(css)+javascript+ajax+json。簡單一點(diǎn)如果不做滾動(dòng)加載的話就是絕對(duì)定位(css)+javascript了，ajax和json是滾動(dòng)加載更多內(nèi)容的時(shí)候用到的，感興趣的你可以參考下哦
2013-02-02