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

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。下次再调用的时候函数被重写,不会再做检测。

如刀似剑
125 声望1 粉丝

不畏浮云,一往无前


« 上一篇
js基础 正则
下一篇 »
css选择器大全