js多事件绑定兼容所有浏览器

最新推荐文章于 2022-03-17 23:44:23 发布

请问大家代码怎么敲

最新推荐文章于 2022-03-17 23:44:23 发布

阅读量151

点赞数

分类专栏： javaScript js

本文链接：https://blog.csdn.net/liumuye88888/article/details/115678659

版权

js 同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

javaScript

19 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <button id="btn">点击一下</button>

</body>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn")

        // addEventListener()
        /*
        通过这个方法也可以为元素绑定响应函数
        参数:
            1.事件的字符串,不要on
            2.回调函数,当事件触发后该函数会被调用
            3.是否在捕获阶段触发事件,需要一个布尔值,一般都传fasle 
        
        */
        //    使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数
        // 这样当事件触发时,响应函数将会按照函数的绑定顺序执行
        // 这个方法不支持IE8及以下的浏览器

        //     btn.addEventListener("click", function () {
        //         alert("1")
        //     }, false)
        //     btn.addEventListener("click", function () {
        //         alert("2")
        //         console.log(this);//button
        //     }, false)
        // }

        /*
        attachEvent()
        在IE8可以使用attachEvent()来绑定事件
        参数
            1.事件的字符串,不带on
            2.回调函数
    
            这个方法也可以同时为一个事件绑定多个处理函数
            不同的是它的后绑定的先执行,执行顺序和addEventListener()相反
        */
        //    btn.attachEvent("onclick",function(){
        //        alert("1")
        //        console.log(this);//window
        //    })
        // }



        /*
        定义一个函数,用来为指定元素绑定响应函数
        addEventListener()中的this,是绑定事件的对象
        attachEvent()中的this,是window
        要统一两个方法this
        
        参数
            obj要绑定事件的对象
            eventStr事件的字符串
            callback回调函数
        */

    //  这样写在所有浏览器中都能使用
       bind(btn,'click',function(){
           alert("1")
           alert(this);
       })
        function bind(obj, eventStr, callback) {
            // 看是否有addEventListener 
            if (obj.addEventListener) {
                // 大部分浏览器
                obj.addEventListener(eventStr, callback, false)
            } else {
                // IE8及以下
                obj.attachEvent("on" + eventStr, function(){
                    // 在匿名函数中调用回调函数
                    callback.call(obj)//修改this指向
                })

            }


        }
    }
</script>

</html>

请问大家代码怎么敲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js多事件绑定兼容所有浏览器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <button
复制链接

扫一扫