js 事件监听原理,及兼容写法,jquer基本封装原理

最新推荐文章于 2025-05-15 09:59:54 发布

心郎

最新推荐文章于 2025-05-15 09:59:54 发布

阅读量3.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端_js

本文链接：https://blog.youkuaiyun.com/u011301203/article/details/52451556

前端_js 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了事件监听的原理及其实现方法，包括如何为DOM元素绑定多个事件监听器，并确保它们能够按顺序触发。此外，还探讨了事件绑定与解绑的兼容写法，以及jQuery的基本封装原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>事件监听原理,及兼容写法,jquer基本封装原理</title>
</head>
<body>
<button>我绑定了多个事件</button>

<script>

// ---------------------------------------- 事件箭筒原理 ------------------------------

        var btn = document.getElementsByTagName("button")[0];
        fn("click",fn1,btn);
        fn("click",fn2,btn);
        fn("click",fn3,btn);
    
        function fn1(){
            console.log("九尺龙泉万卷书，上天生我意何如。");
        }
        function fn2(){
            console.log("不能报国平天下，枉为男儿大丈夫。");
        }
        function fn3(){
            console.log("111111。");
        }
    
        function fn(str,fn,ele){
            //判断位置要注意：如果进入绑定事件本身，那么该事件已经本绑定了
            //所以获取旧的事件必须在新的事件绑定之前
            var oldEvent = ele["on"+str];
            ele["on"+str] = function () {
                //不能直接执行函数，因为我们还不知道以前有没有绑定我同样的事件
                //进行判断，如果以前有过绑定事件，那么把以前的执行完毕在执行现在的事件，如果没有就直接执行
                //如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false
                //如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true
                if(oldEvent){
                    //因为oldEvent本身他就是函数本身，那么后面加一个();就是执行函数
                    oldEvent();
                    fn();
                }else{
                    //没有绑定过事件
                    fn();
                }
            }
        }
    
    //------------------------------ 事件绑定与解绑的兼容写法 ----------------------------
    
        var btn = document.getElementsByTagName("button")[0];
    
        EventListen = {
            addEvent: function (ele,fn,str) {
                //通过判断调用的方式兼容IE678
                //判断浏览器是否支持该方法，如果支持那么调用，如果不支持换其他方法
                if(ele.addEventListener){ //火狐谷歌IE9+支持addEventListener
                    //直接调用
                    ele.addEventListener(str,fn);
                }else if(ele.attachEvent){ //IE678支持attachEvent
                    ele.attachEvent("on"+str,fn);
                }else{
                    //在addEventListener和attachEvent都不存在的情况下，用此代码
                    ele["on"+str] = fn;
                }
            },
            removeEvent: function (ele,fn,str) {
                if(ele.removeEventListener){
                    ele.removeEventListener(str,fn);
                }else if(ele.detachEvent){
                    ele.detachEvent("on"+str,fn);
                }else{
                    ele["on"+str] = null;
                }
            }
        }
    
        //    btn.addEventListener("click",fn); // 用什么方式绑定 用什么方式解绑
        EventListen.addEvent(btn,fn,"click");
        EventListen.removeEvent(btn,fn,"click");
    
        function fn(){
            alert(1);
        }
    
    
    
    
    // ------------------------- jquery 封装基本原理 -----------------------
    
        // $ 与 _ 是js中能用来起名的特殊符号 jquery选择了$
        // css在定义标签的时候 可以用 div .ClassName #id 三种方式
        function $(str){
            var str1 = str.charAt(0); //截取参数中第一个字符
            if(str1==="#"){             //说明是id
                return document.getElementById(str.slice(1));
            }else if(str1 === "."){     //说明是类
                return document.getElementsByClassName(str.slice(1));
            }else{                      //说明是标签
                return document.getElementsByTagName(str);
            }
        }

</script>
</body>
</html>