下面绑定事件的代码，进行了兼容性处理，能够被所有浏览器支持：

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()函数的更多相关文章

  1. 事件监听和window.history以及自定义创建事件

    1.事件监听window.addEventListener方法: Window.addEventListener(event, function, useCapture); useCapture:表示 ...

  2. Android事件监听（二）——点击鼠标事件

    Button.ImageButton事件监听(setOnClickListener) 方法一:通过匿名内部类实现 代码如下: package com.note.demo2; import androi ...

  3. 关于实现自定义Dialog和实现Dialog里view的事件监听的两种方法

    一.自定义dialog. 二.实现dialog里view的事件监听 1.自定义dialog比较简单.在实例化new的时候,加入样式,布局就行了.或者重写dialog. 2.实现dialog里view的 ...

  4. Javascript事件监听

    FireFox : addEventListener()方法 IE : attachEvent()方法 为HTML元素添加一个事件监听, 而不是直接对元素的事件属性(如:onclick.onmouse ...

  5. 利用JavaFx开发RIA桌面应用-事件监听

    1 事件监听 最近利用javaFX开发桌面客户端,碰到需要给各种UI控件添加事件监听,在这里做一个简单的小结,供日后参考. 2 分类处理 在JavaGUI 和Android中,事件通常通过实现list ...

  6. Android 事件监听处理

    事件监听的处理模型包括三个成员:事件源.事件以及事件监听器. 基于监听的事件处理模型一般包括几个步骤: 1.获取普通界面组件: 2.实现事件监听器类 3.将监听器对象注冊给普通组件 当事件源上发生指定 ...

  7. Java swing（awt）：事件监听机制的实现原理+简单示例

    (1)实现原理 事件监听机制的实现: 参考图:事件模型_ActionEvent 为了节省资源,系统无法对某个事件进行实时的监听.故实现的机制是当发生某个事件后,处理代码将被自动运行,类似钩子一般.(回 ...

  8. [转]addEventListener() 方法，事件监听

    转载  白杨-M  http://www.cnblogs.com/baiyangyuanzi/p/6627401.html addEventListener() 方法,事件监听 你可以使用 remov ...

  9. addEventListener() 方法，事件监听

    知识点1:addEventListener() 方法,事件监听,可以使用 removeEventListener() 方法来移除事件的监听. 语法 element.addEventListener(e ...

随机推荐

  1. 随手编程---快速排序(QuickSort)-Java实现

    背景 快速排序,是在上世纪60年代,由美国人东尼·霍尔提出的一种排序方法.这种排序方式,在当时已经是非常快的一种排序了.因此在命名上,才将之称为"快速排序".这个算法是二十世纪的七 ...

  2. Win7+Eclipse+Hadoop2.6.4开发环境搭建

    Hadoop开发环境搭建 感谢参考网站:http://www.cnblogs.com/huligong1234/p/4137133.html 一.软件准备 JDK:jdk-7u80-windows-x ...

  3. Oracle sql语句执行顺序

    sql语法的分析是从右到左 一.sql语句的执行步骤: 1)词法分析,词法分析阶段是编译过程的第一个阶段.这个阶段的任务是从左到右一个字符一个字符地读入源程序,即对构成源程序的字符流进行扫描然后根据构 ...

  4. 浅谈 Scrapy 爬虫（二）

    越写越像官方文档的翻译,偏离了初衷.写一些官方文档里没有的内容吧.   在不限制宽带的环境下,根据页面的大小, Scrapy 一秒能爬取40-70个页面,一天在400万到600万页面.也就是说 Scr ...

  5. html布局小练习（百度首页）

    绝对定位百度首页练习 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  6. wex5 实战 框架拓展之2 事件派发与data刷新

    一 前言 讲完公共data,相信大家对框架级的data组件级绑定有了更新的认识,接下来我们继续深入,以求研究明白wex5的框架能力. 在一个web项目中,其实有一个data, 是基础框架必须的data ...

  7. The world won't care about your self-esteem. The world will expect you to accomplish something before you feel good about yourself.

    The world won't care about your self-esteem. The world will expect you to accomplish something befor ...

  8. PHP命令行脚本接收传入参数的三种方式

    通常PHP都做http方式请求了,可以使用GET or POST方式接收参数,有些时候需要在shell命令下把PHP当作脚本执行,比如定时任务.这就涉及到在shell命令下如何给php传参的问题,通常 ...

  9. jsp九大内置对象、四种作用域、跳转方式

    jsp有四种属性范围: page -> 页面级别,显然只有在一个页面内可用. request -> 请求级别 服务器跳转,一次请求之后消失. session -> 会话级别 客户端跳 ...

  10. dataRow转化为对象

    对象类名useInfo,int,short,string,DateTime格式如下: userInfo.ErrorTimes = int.Parse(dataRow["ErrorTimes& ...