JS事件监听器

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Javascript事件监听</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

</head>

<body>

<button id="Button1">测试</button>

<script type="text/javascript">

    function addEventHandler(target, type, func) {

        if (target.addEventListener)

            target.addEventListener(type, func, false);

        else if (target.attachEvent)

            target.attachEvent("on" + type, func);

        else target["on" + type] = func;

    }

    function removeEventHandler(target, type, func) {

        if (target.removeEventListener)

            target.removeEventListener(type, func, false);

        else if (target.detachEvent)

            target.detachEvent("on" + type, func);

        else delete target["on" + type];

    }

    var Button1 = document.getElementById("Button1");

    var test1 = function () { alert(); };

    function test2() { alert("") }

    addEventHandler(Button1, "click", test1);

    addEventHandler(Button1, "click", test2);

    addEventHandler(Button1, "click", function () { alert(""); });

    addEventHandler(Button1, "click", function () { alert(""); });

    removeEventHandler(Button1, "click", test1);

    removeEventHandler(Button1, "click", test2);

    removeEventHandler(Button1, "click", function () { alert(""); });

</script>

</body>

</html>

弹出3,4

解除绑定事件的时候一定要用函数的句柄，把整个函数写上是无法解除绑定的。

所以3没有解除

添加

  console.dir(Button1);

    console.dir(Button1["onclick"]);

    console.dir(Button1.onclick);

    console.dir(Button1.onclick());

 Button1.onclick = function () {

        alert("hongda");

    }

    Button1.onclick = function () {

        alert("hongda2");

    }

    Button1.onclick = function () {

        alert("hongda3");

    }

点击时弹出3,4，hongda3

<!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>

<title>Javascript事件监听</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

</head>

<body>

<button id="Button1">测试</button>

<script type="text/javascript">

    function addEventHandler(target, type, func) {

        if (target.addEventListener)

            target.addEventListener(type, func, false);

        else if (target.attachEvent)

            target.attachEvent("on" + type, func);

        else target["on" + type] = func;

    }

    function removeEventHandler(target, type, func) {

        if (target.removeEventListener)

            target.removeEventListener(type, func, false);

        else if (target.detachEvent)

            target.detachEvent("on" + type, func);

        else delete target["on" + type];

    }

    var Button1 = document.getElementById("Button1");

    var test1 = function () { alert(); };

    function test2() { alert("") }

    addEventHandler(Button1, "click", test1);

    addEventHandler(Button1, "click", test2);

    addEventHandler(Button1, "click", function () { alert(""); });

    addEventHandler(Button1, "click", function () { alert(""); });

    removeEventHandler(Button1, "click", test1);

    removeEventHandler(Button1, "click", test2);

    removeEventHandler(Button1, "click", function () { alert(""); });

    Button1.onclick = function () {

        alert("hongda");

    }

    Button1.onclick = function () {

        alert("hongda2");

    }

    Button1.onclick = function () {

        alert("hongda3");

    }

    console.dir(Button1);

    console.dir(Button1["onclick"]);

    console.dir(Button1.onclick);

    console.dir(Button1.onclick());

</script>

</body>

</html>

弹出3,4，hongda3

Button1.onclick();

只弹出hongda3

如果只有监听器，不用Button1.onclick=function(){}

那么调用Button1.onclick();

可见事件监听器与对应的对象的事件属性是分开的，只在事件触发时调用，

如果有事件属性就只调用事件属性，且只调用最后一个

如果没有事件属性，那就调用事件监听器，全部一个一个的调用。

fireEvent，ie中有的，firefox中没有

与onclick的区别是

如果没有给事件属性onclick赋值方法，Button1.fireEvent("onclick")不执行，但也不会报错，它跟onclick一样也不调用事件监听

JS事件监听器的更多相关文章

  1. js事件监听器用法实例详解

    这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分 ...

  2. js事件监听器用法实例详解-注册与注销监听封装

    本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事 ...

  3. JS事件监听器 addEventListener

    一:例如:给id为mydiv1的div元素添加click事件监听器document.getElementById("mydiv1").addEventListener(" ...

  4. passive 的事件监听器

    很久以前,addEventListener() 的参数约定是这样的: addEventListener(type, listener, useCapture) 后来,最后一个参数,也就是控制监听器是在 ...

  5. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  6. Node.js 事件

    Node.js 事件 Node.js 所有的异步I/O 操作在完成时都会发送一个事件到事件队列. Node.js里面的许多对象都会分发事件:一个net.Server对象会在每次有新连接时分发一个事件, ...

  7. js事件监听机制(事件捕获)总结

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

  8. JS 事件与事件对象小结

    JavaScript与HTML之间的交互是通过事件来实现的.IE9,chrome,Firefox,Opera,Safari均实现了DOM2级规范中定义的标准DOM事件,而IE8和IE8以下版本仍然保留 ...

  9. Node.js事件发射器

    在Node很多对象发出事件,例如net.Server每个同级连接到它,一个fs.readStream发出打开文件事件时,每次都发出一个事件. 它发出事件的所有对象都是events.EventEmitt ...

随机推荐

  1. LightOj 1265 - Island of Survival（概率）

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1265 题目大意:有一个生存游戏,里面t只老虎,d只鹿,还有一个人,每天都要有两个生物碰 ...

  2. Highways---poj1751最小生成树

    http://poj.org/problem?id=1751 题意:有n个点,已知各点坐标,距离为权值,求最小生成树的边 但是这个最小生成树的m条边是已经确定的了,所以可以让已知边的权值为0: 在Pr ...

  3. Silver Cow Party---poj3268（最短路，迪杰斯特拉）

    Silver Cow Party Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u De ...

  4. 牛客练习赛18E pocky游戏 状压dp

    正解:状压dp+辅助dp 解题报告: 来还债辣!NOIp之后还是轻松很多了呢,可以一点点儿落实之前欠下的各种东西一点点提升自己!加油鸭! 是个好题,可以积累套路,启发性强,而且很难 哦而且状压它也是个 ...

  5. IO流（10）复制多级文件夹

    import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.File;import ja ...

  6. （转）Elasticsearch查询规则------match和term

    es种有两种查询模式,一种是像传递URL参数一样去传递查询语句,被称为简单搜索或查询字符串(query string)搜索,比如 GET /megacorp/employee/_search //查询 ...

  7. Word Add-in 函数调用顺序

    这个图表明的函数的调用顺序,主要代码如下: // MyAddin.cpp : Implementation of DLL Exports. // Note: Proxy/Stub Informatio ...

  8. Java接口多线程并发测试 （二）

    原文地址http://www.cnblogs.com/yezhenhan/archive/2012/01/09/2317636.html 这是一篇很不错的文章,感谢原博主的分享! JAVA多线程实现和 ...

  9. Docker深入浅出1

    Docker是一个开源的应用容器引擎,基于GO语言并遵从apache2.0协议开源. Docker可以让开发者打包他们的应用以及依赖包到一个轻量级,可移植的容器中,然后发布到任何流行的Linux机器上 ...

  10. EL—表达式

    El的数据访问操作: 1:获取变量名(四大作用域中的变量?六大作用域?) 只能从这六个区域中拿数据!!! 2:获取对象的属性值 3:获取集合元素 4:执行表达式 1:获取变量名(四大作用域中的变量) ...