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. HTML5 Storage（永久存储）

    localStorage.aa="aa"; //存储了一个key为aa并且value为aa的键值对: localStorage.setItem("bb", &q ...

  2. JS中"属性"的用法

    JS的属性和C#有相似之处  ! 使用get和set来进行属性的获取和设置 var obj={ a:"1", get age(){ return obj.a; }, set age ...

  3. oracle(六) physical read and logical read

    1.物理读:从disk到buffer cache.其产生的主要原因是: (1) 在数据库高速缓存中不存在这些块 (2) 全表扫描 (3)磁盘排序 2.oracle中读写disk的单位是block.而用 ...

  4. 第三课：JAVA反射机制

    基础的不想写啦,好了,直接上JAVA反射机制吧: 类对象概念: 所有的类,都存在一个类对象,这个类对象用于提供类层面的信息,比如有几种构造方法, 有多少属性,有哪些普通方法. JAVA类,他们的区别在 ...

  5. Loadrunner解决启动浏览器后页面显示空白

    Loadrunner解决启动浏览器后页面显示空白 2018年5月20日,今天照常打开Loadrunner准备学习,在录制的时候却出现了一个问题,浏览器可以启动,但是程序页面缺是加载不出来,主要症状体现 ...

  6. ［Google Maps API 3］Marker从Clusterer中分离及Marker置于Cluster上一层的解决办法

    在Google Maps API的使用中,经常用到Clusterer来避免过密的Marker显示.但仔细看一下Clusterer的设置参数中并没有直接将某些Marker除外的方法,那遇到这样的需求,怎 ...

  7. （转）Elasticsearch 的坑爹事——记录一次mapping field修改过程

    Elasticsearch 的坑爹事 本文记录一次Elasticsearch mapping field修改过程 团队使用Elasticsearch做日志的分类检索分析服务,使用了类似如下的_mapp ...

  8. MVC html.beginform & ajax.beginform

    1.指定表单提交方式和路径等 @using (Html.BeginForm("Index", "Home", FormMethod.Get, new { nam ...

  9. [LeetCode] 496. Next Greater Element I_Easy tag: Stack

    You are given two arrays (without duplicates) nums1 and nums2 where nums1’s elements are subset of n ...

  10. CentOS6.5安装Twemproxy集群

    Twemproxy,也叫Nutcraker.是一个Twtter开源的一个Redis和Memcache代理服务器. Redis作为一个高效的缓存服务器,非常具有应用价值.但是当使用比较多的时候,就希望可 ...