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. Java List <T> T[] toArray(T[] a) implementation

    Like the toArray() method, this method acts as bridge between array-based and collection-based APIs. ...

  2. format格式化输出

    python格式化输出,format print("""********** Screen: {size} Density: {dpi} Device: {device} ...

  3. 2018中国(深圳)IT领袖峰会马化腾演讲全文《数字中国的机遇与探索》

    我们今天大会的主题是数字中国,也佩服我们吴鹰主席在十年前就想到发展的趋势,这么早就把我们联合会取名数字中国.昨天有一个闭门会议,有相当大的篇幅大家都谈了科技.谈创新,大家觉得科技的威力和优势越来越明显 ...

  4. Mint linux中调整屏幕亮度的方法

    /*********************************************************************  * Author  : Samson  * Date   ...

  5. 【剑指offer】矩形覆盖

    一.题目: 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 二.思路: 斐波那契数列 三.代码:     

  6. 【Cocos2dx 3.3 Lua】导出Cocos2dx API文档

    一.Doxygen导出Cocos2dx html doc              1.1 打开Doxygen软件,选择 File-->Open打开Cocos2dx docs目录下的doxyge ...

  7. [lr] 常用快捷键

    界面基本操作 F5               : 隐藏/显示上部面板 F6               : 隐藏/显示下部面板 F7               : 隐藏/显示左部面板 F8     ...

  8. linux 加减符号

    [root@LocalWeb01 ~]# aa=11[root@LocalWeb01 ~]# bb=22[root@LocalWeb01 ~]# cc=$aa+$bb[root@LocalWeb01 ...

  9. 如何实现parseFloat保留小数点后2位

    Number.toPrecision(2);function toPrecision ( [precision : Number] ) : String参数 precision 可选项.有效位数.值必 ...

  10. 020-安装centos6.5后的生命历程

    01.配置网络.修改了ifcfg-eth0文件内容. 1)ifcfg-eth0原来的内容如下: 2)ifcfg-eth0配置后的内容如下:   3)然后重启网络服务: 4)测试网络是否可通: 5)查看 ...