JavaScript中绑定事件监听函数的通用方法addEvent() 和 事件绑定之bindEvent()与 unBindEvent()函数
下面绑定事件的代码，进行了兼容性处理，能够被所有浏览器支持：
function addEvent(obj,type,handle){
try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
obj.addEventListener(type,handle,false);
}catch(e){
try{ // IE8.0及其以下版本
obj.attachEvent('on' + type,handle);
}catch(e){ // 早期浏览器
obj['on' + type] = handle;
}
}
}
这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句，避免浏览器出现错误提示。
bindEvent(element, eventName, func) —— 绑定func到element的eventName事件上（不重复绑定）
unBindEvent(element, eventName, func) —— 删除element上的eventName事件上的func函数。
下面是这两个函数的源码:
// ---------- 事件绑定与删除绑定 ---------- //
function bindEvent(element, eventName, func) {
var events = element['the'+eventName]; //用于保存某个事件序列
if(!events) { //如果不存在一个序列，则创建它，并加入HTML标记当中的onEvent = function(){}形式的绑定
events = element['the'+eventName] = [];
if (element['on'+eventName]) { events.push(element['on'+eventName]); }
} //检测是否为重复绑定
for(var i=; i<events.length; i++) {
if(events[i] === func) { flag = true; break; }
} // 非重复绑定，则加入该函数事件
if(i >= events.length) { events.push(func); } // 重新定义这个事件的执行方式
element['on'+eventName] = function(event) {
event = event || (function() { //修复IE的事件对象
var e = window.event;
e.preventDefault = function() { e.returnValue = false; }
e.stopPropagation = function() { e.cancelBubble = true; }
//根据需要继续修复
return e;
})();
//顺序执行这些函数
for(var i=; i<events.length; i++) { events[i].call(element, event); }
}
} // 删除事件绑定
function unBindEvent(element, eventName, func) {
var events = this['the'+eventName];
//如果不存在一个事件序列
if(!events) { return false; } //检测该函数是否存在该事件序列当中
for(var i=; i<events.length; i++) {
if(func === events[i]) {
[].splice.call(events, i, );
return true;
}
} // 函数不存在该事件序列当中
return false;
}
该事件绑定函数具有如下特点：
1、在事件函数中，this指向的是当前元素
2、每个事件其实是一个有序列，按顺序执行这个序列。
3、正确的传递了event对象。对于event对象在W3C标准与IE中的不同之处可以做出修复，本例修复了事件冒泡与阻止默认行为。
4、本机测试通过IE、Firefox、Chrome、Opera、Safari（可以说通用主流浏览器）
5、支持删除事件绑定
当然，还得拿来做一个测试，下面是测试的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#test {background-color: #f00; }
</style>
<script type="text/javascript" src="event.js"></script>
<script type="text/javascript">
bindEvent(window, 'load', function() {
var ul = document.getElementById("test");
var a = document.getElementById("baidu"); bindEvent(ul, 'click', function(e){
alert("我是" + this + "元素, 你点击了我!");
}); bindEvent(a, 'click', function(e) {
alert("我是" + this + "，你点击了我！");
}); });
</script>
</head> <body>
<ul id="test">
<p class="t">Hello,world!</p>
<p>Hello,<a href="http://www.baidu.com" id="baidu">百度</a>!</p>
<li id="haha" class="t">afasdfsa</li>
<li>sfk</li>
<li class="t">sdklfajsfjk</li>
<li>end</li>
<li class="te">of</li>
</ul>
<ol id="test2">
<li class="t">附加的第一项</li>
<li class="t">附加的第二项</li>
<li class="t">附加的第三项</li>
</ol>
</body>
</html>
首先，点击红色的UL试试看 —— 将预期弹出：你好，我是HTMLUListElement元素，你点击了我！
好的，再点一下其中的百度链接 ——
预期弹出：你好，我是http://www.baidu.com/，你点击了我！
非预期弹出：你好，我是HTMLULlistElement元素，你点击了我？
为什么非预期弹出？——对，这就是事件的冒泡，当我们点击百度的链接后，该事件将产生冒泡，过程如：<a> -- <li> -- <ul> -- <body> -- document。而ul我们绑定了一个单击事件，所以这时将触发其click事件，而出了非预期弹出。
那么如何阻止？在绑定百度链接的函数体后追加一行：e.stopPropagation()，再次测试：非预期弹出已经没有了。
如果我只想在点击百度链接时，弹出对话框，而不跳转到百度去呢？在绑定百度链接的函数体再次追加一行：e.preventDefault();
测试完毕！具有怀疑精神的朋友可以Copy之后，另做其它测试！！！！
转载自web前端开发
JavaScript中绑定事件监听函数的通用方法addEvent() 和 事件绑定之bindEvent()与 unBindEvent()函数的更多相关文章
- 事件监听和window.history以及自定义创建事件
1.事件监听window.addEventListener方法: Window.addEventListener(event, function, useCapture); useCapture:表示 ...
- Android事件监听（二）——点击鼠标事件
Button.ImageButton事件监听(setOnClickListener) 方法一:通过匿名内部类实现 代码如下: package com.note.demo2; import androi ...
- 关于实现自定义Dialog和实现Dialog里view的事件监听的两种方法
一.自定义dialog. 二.实现dialog里view的事件监听 1.自定义dialog比较简单.在实例化new的时候,加入样式,布局就行了.或者重写dialog. 2.实现dialog里view的 ...
- Javascript事件监听
FireFox : addEventListener()方法 IE : attachEvent()方法 为HTML元素添加一个事件监听, 而不是直接对元素的事件属性(如:onclick.onmouse ...
- 利用JavaFx开发RIA桌面应用-事件监听
1 事件监听 最近利用javaFX开发桌面客户端,碰到需要给各种UI控件添加事件监听,在这里做一个简单的小结,供日后参考. 2 分类处理 在JavaGUI 和Android中,事件通常通过实现list ...
- Android 事件监听处理
事件监听的处理模型包括三个成员:事件源.事件以及事件监听器. 基于监听的事件处理模型一般包括几个步骤: 1.获取普通界面组件: 2.实现事件监听器类 3.将监听器对象注冊给普通组件 当事件源上发生指定 ...
- Java swing（awt）：事件监听机制的实现原理+简单示例
(1)实现原理 事件监听机制的实现: 参考图:事件模型_ActionEvent 为了节省资源,系统无法对某个事件进行实时的监听.故实现的机制是当发生某个事件后,处理代码将被自动运行,类似钩子一般.(回 ...
- [转]addEventListener() 方法，事件监听
转载 白杨-M http://www.cnblogs.com/baiyangyuanzi/p/6627401.html addEventListener() 方法,事件监听 你可以使用 remov ...
- addEventListener() 方法，事件监听
知识点1:addEventListener() 方法,事件监听,可以使用 removeEventListener() 方法来移除事件的监听. 语法 element.addEventListener(e ...
随机推荐
- C# 创建Windows服务
创建windows服务项目 2 右键点击Service1.cs,查看代码, 用于编写操作逻辑代码 3 代码中OnStart用于执行服务事件,一般采用线程方式执行方法,便于隔一段事件执行一回 END ...
- 彻底弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...
- hashCode的作用
在一般的应用中你不需要了解hashCode的用法,但当你用到HashMap,HashSet等集合类时要注意下hashCode. 你想通过一个object的key来拿HashMap的value, ...
- Immutable笔记
Immutable笔记 转换成js数据 获取或则改变嵌套式imutable数据类型
- python之三层菜单递归
首先非常感谢11期的学长薜保库提供了一种非常实用函数递归方法,让实现三层菜单如此简单,不过对所遍历的嵌套字典或列表格式有所要求.有特定的环境下非常实用. 主要针对中国的各省市区进行展示,采用了百度的j ...
- Problems with MMM for mysql(译文)
Problems with mmm for mysql posted in MySQL by shlomi 原文:http://code.openark.org/blog/mysql/problems ...
- Linux:-防火墙iptables如何个性化定制？
身份标签/usr/local/etc/identity,主脚本iptables.sh,附属目录functions/iptables.d ├── iptables.sh ├── functions│ ...
- cocos2d-x视频控件VideoPlayer的用户操作栏进度条去除(转载)
目前遇到两个问题: (1)视频控件移除有问题,会报异常. (2)视频控件有用户操作栏,用户点击屏幕会停止视频播放. 对于第一个问题,主要是移除控件时冲突引起的,目前简单处理是做一个延时处理,先stop ...
- android中webrtc的几个关键的状态
在android层使用webrtc的时候,都是通过native层回调的形式来触发ui的改变,比如在什么时候绘出对方的视频窗口,什么时候表示双方连接已经建立等等... 我现在把我知道的列出来用于备忘. ...
- python中文乱码问题
在学习python的时候,当我要print中文的时候,会出现以下提示: py = '你好,世界!'print py File "n2.py", line 1 SyntaxError ...