2022/1/13，事件的绑定

最新推荐文章于 2024-07-17 20:19:26 发布

weixin_44645655

最新推荐文章于 2024-07-17 20:19:26 发布

阅读量122

点赞数

分类专栏： javascript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_44645655/article/details/122478465

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的绑定</title>
    <script type="text/javascript">
        window.onload = function () {
            /*
            *点击按钮以后，弹出一个内容
            *   
            * 使用对象.事件 = 函数的形式绑定函数，
            * 他只能同时为一个元素的一个事件绑定一个单击响应函数
            * 不能绑定多个，如果绑定多个，前面的就会失效
            * 
            */

            //获取事件的对象
            var btn01 = document.getElementById("btn01");
            //为btn01绑定单机响应函数，
            // btn01.οnclick=function(){
            //     alert(1);
            // };
            //为btn01绑定第二个单机响应函数，
            // btn01.οnclick=function(){
            //     alert(2);
            // };

            /*
            *addEventListener()
            *   通过这个方法也可以为元素绑定响应函数
            *   参数：
            *       1.事件的字符串，不要on
            *       2.回调函数，当事件触发时，该函数会被调用
            *       3.是否捕获阶段触发事件，需要一个布尔值，一般穿false
            *   addEventListener()同时为一个元素的一个事件绑定多个单击响应函数
            * 这样事件被触发时，响应函数会按照绑定的顺序执行
            * 
            * 这个方法不支持ie8以下调用
            */


            //  btn01.addEventListener("click", function () {
            //      alert(this);
            //  }, false)

            // btn01.addEventListener("click", function () {
            //     alert(2);
            // }, false)

            /*
           *attachEvent()
           *在ie8中可以使用attachEvent()来绑定事件
           *   参数
           *       1.事件的字符串，要on
           *       2.回调函数
           * attachEvent()这个方法可以同时为一个元素的一个事件绑定多个单击响应函数
           * 不同的是，先绑定后添加
           * 所以顺序是，3，2，1
           * 
           * 
           * 
           * 
           * ie11，谷歌，火狐，等，addEventListener()的this是绑定事件的对象
           * ie8以下，attachEvent()的this是window
           */



            // btn01.attachEvent("onclick", function () {
            //     alert(this);
            // });
            bind(btn01, "click", function () {
                alert(this);
            });

            // btn01.attachEvent("onclick", function () {
            //     alert(2);
            // });

            // btn01.attachEvent("onclick", function () {
            //     alert(3);
            // });

            /*
            *定义一个函数，用来为指定元素绑定响应函数
            *ie11，谷歌，火狐，等，addEventListener()的this是绑定事件的对象
            *ie8以下，attachEvent()的this是window
            *
            * 参数：
            *       obj 要绑定事件的对象
            *       eventStr 事件的字符串
            *       callback 回调函数
            */

            function bind(obj, eventStr, callback) {

                if (obj.addEventListener) {

                    //大部分兼容的方式
                    obj.addEventListener(eventStr, callback, false);

                } else {

                    /*
                    *this是谁由调用方式决定
                    *callback.call(obj)
                    */
                    //ie8以下
                    obj.attachEvent("on" + eventStr, function () {
                        callback.call(obj);
                    });

                }




            };

        };



    </script>
</head>

<body>
    <button id="btn01">点我一下</button>
</body>

</html>

weixin_44645655

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2022/1/13，事件的绑定

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件
复制链接

扫一扫