关于javascript事件机制的理解及事件监听的封装

最新推荐文章于 2024-06-08 11:30:00 发布

weixin_34348805

最新推荐文章于 2024-06-08 11:30:00 发布

阅读量92

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000009601152

版权

说到事件机制首先要说一下事件模型

1.原始事件模型

 在原始事件模型中，事件是不会传播，只是触发立即执行，函数会作为元素的属性被监听。
 <div class="box" onclick="show()"></div>这种方式和这种方式document.querySelector(".box");
 这种时间模型有着明显的缺点：同一事件无法绑定多个，无法传播不能应用事件委托.

2.DOM2模型即2级DOM事件模型

w3c规定的标准事件模型，高版本浏览器基本遵循着一标准（gtmd ie）
事件模型中一次事件包含3个过程

事件捕获阶段：事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节点是否注册了该事件的监听函数，若有则执行。
（什么捕获，神奇的ie我是不知道，你说什么反正我是听不到的，哥是最屌的，gtmd ie）ie低版本没有捕获
事件处理阶段：事件到达目标元素,执行目标元素的事件处理函数.
事件冒泡阶段：事件从目标元素上升一直到达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。下次再调用的时候函数被重写，不会再做检测。

weixin_34348805

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫