JS事件监听器

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

 

posted @ 2013-12-26 17:24  hongdada  阅读(647)  评论(0)  编辑  收藏  举报