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

更新时间：2011年08月04日 18:03:18 作者：

一个简单的示例来演示如何使用自定义的eventUtil对象，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图片上传并预览的完整实例
上传是个老生常谈的话题了,多数情况下各位想必用的是uplodify,webUploader之类的插件,这篇文章主要给大家介绍了关于JavaScript图片上传并预览的相关资料,需要的朋友可以参考下
2022-01-01
Js利用console计算代码运行时间的方法示例
最近看了一本书，发现了个计算代码执行时间的方法，感觉还挺有用的，所以这篇文章主要给大家介绍了关于Javascript利用console计算代码运行时间的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
2017-09-09
JS实现判断数组是否包含某个元素示例
这篇文章主要介绍了JS实现判断数组是否包含某个元素,涉及javascript属性操作与正则判断相关使用技巧,需要的朋友可以参考下
2019-05-05
浏览器复制插件zeroclipboard使用指南
ZeroClipboard 是国外大神开发的一个用于剪贴板复制的 JS 插件，它是基于 Flash 来实现跨浏览器的复制功能的。当我们使用 ZeroClipboard 的时候，它会悄悄隐藏一个小小的 Flash 影片(swf)，不会对我们的用户界面造成影响。我们只需要借助它实现复制功能就行了。
2016-03-03
Ajax与服务器（JSON）通信实例代码
这篇文章主要介绍了Ajax与服务器（JSON）通信实例代码的相关资料,并附实例代码，帮助大家学习理解此部分知识，需要的朋友可以参考下
2016-11-11
JavaScript之json_动力节点Java学院整理
这篇文章主要介绍了JavaScript之json，JSON它是一种数据交换格式。有兴趣的可以了解一下
2017-06-06
IE6-IE9不支持table.innerHTML的解决方法分享
让ie6-ie9支持table.innerHTML，其实这里只是对table做了处理，对其他不支持的元素可以用类似的方案
2012-09-09
微信小程序实现搜索功能
这篇文章主要介绍了微信小程序实现搜索功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-03-03
简约JS日历控件实例代码
这篇文章介绍了一款简约JS日历控件的全部代码，有需要的朋友可以参考一下
2013-07-07
javascript自适应宽度的瀑布流实现思路
这里主要介绍瀑布流的一种实现方法：绝对定位(css)+javascript+ajax+json。简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了，ajax和json是滚动加载更多内容的时候用到的，感兴趣的你可以参考下哦
2013-02-02

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具