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(1); };
    function test2() { alert("2") }
    addEventHandler(Button1, "click", test1);
    addEventHandler(Button1, "click", test2);
    addEventHandler(Button1, "click", function () { alert("3"); });
    addEventHandler(Button1, "click", function () { alert("4"); });
    removeEventHandler(Button1, "click", test1);
    removeEventHandler(Button1, "click", test2);
    removeEventHandler(Button1, "click", function () { alert("3"); });
</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(1); };
    function test2() { alert("2") }
    addEventHandler(Button1, "click", test1);
    addEventHandler(Button1, "click", test2);
    addEventHandler(Button1, "click", function () { alert("3"); });
    addEventHandler(Button1, "click", function () { alert("4"); });
    removeEventHandler(Button1, "click", test1);
    removeEventHandler(Button1, "click", test2);
    removeEventHandler(Button1, "click", function () { alert("3"); });

    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一样也不调用事件监听

相关阅读:
JMeter学习使用(1)
ip设置
 JMeter安装过程小问题
 appium-doctor
使用 Xcode-Instrument-Automation -App -Ios自动化测试
 接口测试学习 -01
在Windows下安装配置jforum测试环境
 root_one Android自动化测试02--git拉取及eclipse导入
 selenium+python学习总结－mac
MySQL速学篇第四课
原文地址：https://www.cnblogs.com/hongdada/p/3492800.html