JS事件监听器

时间 2019-11-29

原文原文链接

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,4javascript

解除绑定事件的时候必定要用函数的句柄，把整个函数写上是没法解除绑定的。html

因此3没有解除java

添加函数

  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，hongda3ui

Button1.onclick();

只弹出hongda3spa

若是只有监听器，不用Button1.onclick=function(){}firefox

那么调用Button1.onclick();code

可见事件监听器与对应的对象的事件属性是分开的，只在事件触发时调用，xml

若是有事件属性就只调用事件属性，且只调用最后一个

若是没有事件属性，那就调用事件监听器，所有一个一个的调用。

fireEvent，ie中有的，firefox中没有

与onclick的区别是

若是没有给事件属性onclick赋值方法，Button1.fireEvent("onclick")不执行，但也不会报错，它跟onclick同样也不调用事件监听