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. Python开发【数据结构】：字典内部剖析

    字典内部剖析 开篇先提出几个疑问: 所有的类型都可以做字典的键值吗? 字典的存储结构是如何实现的? 散列冲突时如何解决? 最近看了一些关于字典的文章,决定通过自己的理解把他们写下来:本章将详细阐述上面 ...

  2. celery消息的编码和序列化（转）

    add by zhj: 原文讲的是序列化时的安全问题,不过,我关心的是怎样可以看到消息队列中的数据.下面是在broker中看到的消息,body是先用 body_encoding编码,然后用conten ...

  3. 编码问题：python写入文件

    方法一:(推荐) line1 = "我爱中国111" line2 = u"我爱祖国222" with open('1.txt','w',encoding='ut ...

  4. 007-Redi-命令-脚本命令、链接命令、服务器命令、事务、HyperLogLog

    Redis 脚本命令 下表列出了 redis 脚本常用命令: 序号 命令及描述 1 EVAL script numkeys key [key ...] arg [arg ...] 执行 Lua 脚本. ...

  5. 003-Nginx 设置Header 获取真实IP

    1.X-Forwarded-For的定义: X-Forwarded-For:简称XFF头,它代表客户端,也就是HTTP的请求端真实的IP,只有在通过了HTTP 代理或者负载均衡服务器时才会添加该项.它 ...

  6. ssm返回jsonp数据格式

    为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数 ...

  7. 源代码下载 作者：王先荣(Xianrong Wang)

    作者:王先荣(Xianrong Wang) 下面是我的一些源代码: 1. 图像处理学习系列源代码——包括该系列文章的几乎所有代码: 1.5. 图像处理学习系列中用到的dll文件包——将这个解压缩之后放 ...

  8. Kaggle案例泰坦尼克号问题

    泰坦里克号预测生还人口问题 泰坦尼克号问题背景 - 就是那个大家都熟悉的『Jack and Rose』的故事,豪华游艇倒了,大家都惊恐逃生,可是救生艇#### 的数量有限,无法人人都有,副船长发话了l ...

  9. Floyd 判圈算法

    Floyd 判圈算法 摘自维基百科, LeetCode 上 141题 Linked List Cycle 用到这个, 觉得很有意思. 记录一下. 链接: https://zh.wikipedia.or ...

  10. 面经：Google两轮背靠背

    如题,谷歌两轮背靠背电面.两轮都是废话不多说直奔coding,虽然第一轮的中国大哥还是花了一点点时间了解了一下我的背景.毕业时间.research方向.说好的research面呢? 中国大哥出的题: ...