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+opencv] ROI(Range Of Interest)与泛洪填充

    python+opencv3.3视频教学 基础入门笔记(贾志刚老师) https://www.bilibili.com/video/av24998616/?p=8 ROI(Range Of Inter ...

  2. 利用VS正则替换删除文本行首数据等字符

    删除以数字开头的加‘.’的行首序号 ^[0-9][0-9][.]

  3. 【Python】如何切换浏览器的tap页？

    当点击浏览器当前页面中的某个链接后自动弹出一个新的浏览器的tap页面时,浏览器正常都会在当前操作的tap页面右1位置打开新弹出的tap页. 当前selenium还不具备自动切换页面后窗口切换功能.需要 ...

  4. 第十八篇:融汇贯通--谈USB Video Class驱动

    USB Video Class驱动是WINDOWS系统包含的一个针对于USB VIDEO 类的驱动程序. 好多project师都做过USB VIDEO设备端的开发, 基本的工作内容为: 使用FIRMW ...

  5. 划分LUN

    划分LUN http://mp.weixin.qq.com/s?__biz=MzAwNzU3NzQ0MA==&mid=209842199&idx=1&sn=7d77fdf7a8 ...

  6. POD类型

    POD类型 POD全称Plain Old Data.通俗的讲,一个类或结构体通过二进制拷贝后还能保持其数据不变,那么它就是一个POD类型. C++11将POD划分为两个基本概念的合集,即:平凡的和标准 ...

  7. MongoDB3.x中添加用户和权限控制

    现在需要创建一个帐号,该账号需要有grant权限,即:账号管理的授权权限.注意一点,帐号是跟着库走的,所以在指定库里授权,必须也在指定库里验证(auth) ? 1 2 3 4 5 6 7 8 9 10 ...

  8. categoriy 重写函数会怎样？

    From comp.lang.objective-C FAQ listing: "What if multiple categories implement the same method? ...

  9. Linear Regression Using Gradient Descent 代码实现

    参考吴恩达<机器学习>, 进行 Octave, Python(Numpy), C++(Eigen) 的原理实现, 同时用 scikit-learn, TensorFlow, dlib 进行 ...

  10. [ps] 灰度和通道基础知识

    灰度.灰度值.灰度图像 灰度:灰度使用黑色调来表示物体,即用黑色为基准色,不同饱和度的黑色来显示图像.每个灰度对象都具有从0%(白色)到100%(黑色)的亮度值.使用黑白或灰度扫描仪生成的图像通常以灰 ...