关于javascript事宜机制的明白及事宜监听的封装

2024年5月29日 175次阅读 来源: 如刀似剑

说到事宜机制起首要说一下事宜模子

1.原始事宜模子

 在原始事宜模子中，事宜是不会流传，只是触发马上实行，函数会作为元素的属性被监听。
 <div class="box" onclick="show()"></div>这类体式格局和这类体式格局document.querySelector(".box");
 这类时刻模子有着显著的瑕玷：统一事宜没法绑定多个，没法流传不能运用事宜托付.

2.DOM2模子即2级DOM事宜模子

w3c划定的规范事宜模子，高版本浏览器基础遵照着一规范（gtmd ie）
事宜模子中一次事宜包括3个历程

  1. 事宜捕捉阶段：事宜被从document一向向下流传到目的元素,在这历程当中顺次搜检经由的节点是不是注册了该事宜的监听函数，如有则实行。
    （什么捕捉，奇异的ie我是不知道，你说什么横竖我是听不到的，哥是最屌的，gtmd ie）ie低版本没有捕捉

  2. 事宜处置惩罚阶段：事宜抵达目的元素,实行目的元素的事宜处置惩罚函数.

  3. 事宜冒泡阶段：事宜从目的元素上升一向抵达document，一样顺次搜检经由的节点是不是注册了该事宜的监听函数，有则实行。

    w3c规范函数绑定 function addEventListener(string eventFlag, function eventFunc,
    useCapture)
    个中useCapture是不是绑定在捕捉阶段，true示意采纳捕捉体式格局，false示意采纳冒泡体式格局。

    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <style>
        div{
            height:100px;
            width:100px;
            background:red
        }
    </style>
    <script>
        window.onload=function(){
            var oF=document.querySelector('.father'),
                oS=document.querySelector('.son');
            //    捕捉 console    效果 1 2    由于这里采纳的是捕捉形式，
            // 从document往oF走顺次发明oF 和oS都有注册捕捉事宜因而便触发了，
            // 然后冒泡，没找到冒泡事宜，不实行任何操纵
            oF.addEventListener('click',function(){
                console.log(1+'捕捉');
            },true);
            oS.addEventListener('click',function(){
                console.log(2+"捕捉");
            },true);
            //    冒泡 console    效果 2 1    由于这里采纳的是冒泡
            // 形式，没有捕捉，最先冒泡


            oF.addEventListener('click',function(){
                console.log(1+"冒泡");
            },false);
            oS.addEventListener('click',function(){
                console.log(2+"冒泡");
            },false);
            //
            oF.addEventListener('click',function(){
                console.log(1+"冒泡");
            },false);
            oS.addEventListener('click',function(){
                console.log(2+"捕捉");
            },true);
        }
    </script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
节点既绑定了冒泡事宜也绑定了捕捉事宜，此时的实行递次根据绑定的先后递次实行。

由于ie用自有的attachEvent函数绑定，所以监听的时刻需要做兼容，为了轻易封装一下吧。
        if (element.addEventListener) {
            element.addEventListener(type, fun, false);
        }
        else if(element.attachEvent){
            element.attachEvent('on' + type, fun);
        }
        else{
            element['on' + type] = fun;
        }
    }```

近来看了惰性函数的相干，统一个运用环境中，实在只需要检测一次即可。

            if (element.addEventListener) {
                addEvent = function (type, element, fun) {
                    element.addEventListener(type, fun, false);
                }
            }
            else if(element.attachEvent){
                addEvent = function (type, element, fun) {
                    element.attachEvent('on' + type, fun);
                }
            }
            else{
                addEvent = function (type, element, fun) {
                    element['on' + type] = fun;
                }
            }
        }```
  第一次挪用addEvent对浏览器做才能检测，然后重写addEvent。下次再挪用的时刻函数被重写，不会再做检测。
    原文作者：如刀似剑
    原文地址: https://segmentfault.com/a/1190000009601152
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞