事件的侦听和删除判断浏览器的类型特别是判断ie的类型来使用addEventListener & attachEvent

最新推荐文章于 2024-04-09 17:00:00 发布

SpringYoungYu

最新推荐文章于 2024-04-09 17:00:00 发布

阅读量189

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_44917015/article/details/111991787

版权

<!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="bn0">按钮</button>
    <script>
        /* 1、侦听事件函数不能带入任何参数
        2、侦听事件函数有且仅仅有一个参数e 就是事件接收到
        事件对象 其他函数没有
        3、事件函数不能写return 返回值 但是可以使用return跳出 */

        // var num = 0;
        // var bn = document.querySelector("button")
        // bn.addEventListener('click', clickHandler1);
        // bn.addEventListener('click', clickHandler2);
        // bn.addEventListener('mousemove', clickHandler2);

        // function clickHandler1(e) {
        //     num++
        //     console.log(num,"aaa"  )
        //     if( num >1 ){
        //         // e.currentTarget.removeEventListener('click',clickHandler1)
        //         this.removeEventListener('click',clickHandler1)
        //     }
        // }

        // function clickHandler2(e) {
        //     // console.log('bbb')
        //     console.log( e.type )// 事件类型
        // }
        /* 
        当元素的事件不再使用时 必须删除 否则会造成内存堆积 侦听事件都会存储在
        堆中
        
        当元素被删除了 也必须删除改元素的所有事件
        
        attachEvent 是ie使用的注册事件的方法 是ie的私有方法
        */

        var bn0 = document.getElementById('bn0')
        // on( bn0,"click",clickHandler)

        // function clickHandler(e){
        //     console.log( e.type )c
        // }

        try {
            bn0.addEventListener('click', clickHandler);
            console.log(111)
        } catch (e) {
            bn0.attachEvent('onclick', clickHandler)
            console.log(222)
        }

        function clickHandler(e) {
            console.log(e.type)
        }


        // function on(){

        // }


        function on(target, type, handler) {
            var b = judgeBrowser("IE");
            if (b && Number(b) < 9) {
                target.attachEvent("on" + type, handler);
            } else {
                target.addEventListener(type, handler);
            }
        }

        //    用于判断浏览的类型是否符合 返回 浏览器版本号和false
        function judgeBrowser(browser) {
            var arr = getBrowserRV();
            if (browser.toLowerCase() === arr[0].toLowerCase()) {
                return arr[1];
            } else {
                return false;
            }
        }
        console.log(judgeBrowser("IE"))

        // 用于获取浏览器的类型
        //  返回一个数组 浏览器和版本号
        function getBrowserRV() {
            var str = navigator.userAgent;
            if (str.indexOf("Chrome") > -1) {
                var index = str.indexOf("Chrome");
                return str.slice(index, str.indexOf(" ", index + 1)).split("/");
            }
            if (str.indexOf("Firefox") > -1) {
                var index = str.indexOf("Firefox");
                return str.slice(index).split("/");
            }
            if (str.indexOf("rv:") > -1 && str.indexOf("Trident") > -1) {
                return ["IE", "11"];
            }
            if (str.indexOf("Trident") > -1) {
                var index = str.indexOf("MSIE");
                return ["IE", str.slice(index, str.indexOf(";", index)).split(" ")[1]];
            }
        }

        console.log(getBrowserRV())

    </script>
</body>

</html>

SpringYoungYu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
事件的侦听和删除判断浏览器的类型特别是判断ie的类型来使用addEventListener & attachEvent

<!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
复制链接

扫一扫