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 @   hongdada  阅读(648)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（1）
点击右上角即可分享
微信分享提示