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>