js基础——事件的绑定

最新推荐文章于 2024-08-29 18:15:00 发布

jwz934738949

最新推荐文章于 2024-08-29 18:15:00 发布

阅读量113

点赞数

分类专栏： javascript基础

本文链接：https://blog.csdn.net/jwz934738949/article/details/100703349

版权

javascript基础专栏收录该内容

36 篇文章 1 订阅

订阅专栏

使用对象.事件 = 函数的形式只能为对象添加一个响应函数，后添加的函数会覆盖之前的函数。

1、addEventListener(参数1，参数2，参数3)

可以添加多个函数。

参数1：事件的字符串，没有前缀on;

参数2：回调函数，当事件触发时调用该函数；

参数3：是否在捕获阶段调用事件，一般为false。

2、attachEvent(参数1，参数2)

在IE8以下浏览器中使用。

参数1：事件的字符串，需要添加on；

参数2：回调函数。

执行顺序与addEventListener相反，后绑定的先执行。

在使用addEventListener()与attachEvent()时，返回的this值不同。

使用匿名函数调用回调函数，自己设置回调函数返回的对象，从而改变this的指向。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的绑定</title>
    <script>
        window.onload = function () {
            var b1 = document.getElementById("b1");

            bind(b1, "click", function () {
                alert(this);
            });

            function bind(obj, str, callback) {
                if (obj.addEventListener) {
                    obj.addEventListener(str, callback, false);
                } else {
                    obj.attachEvent("on" + str, function () {
                        callback.call(obj);
                    });
                }
            }
        }
    </script>
</head>
<body>
<button id="b1">点击按钮</button>
</body>
</html>