DOM事件模型

作者: 朱珠霞 | 来源:发表于2018-05-29 18:47 被阅读10次

    DOM标准文档

    1. **目前的DOM事件模型标准是Document Object Model Level
    2. DOM level 1中一道题
    /**html代码**/
    <body>
        <script>
            function print(){
              console.log('hi')
            }
        </script>
        <button id=X onclick = "print">A</button>
        <button id=Y onclick = "print()">B</button>
        <button id=Z onclick = "print.call()">C</button>
    
    /**javascript**/
        <script>
            X.onclick = print
            Y.onclick = print()
            Z.onclick = print.call()
            
    /**哪个会正确运行?
      *答案是B、C、X
      *print // 类型为函数对象
      *print()//undefined  (默认return值为undefined)
      *print.call()//undefined
      *在css中,onclick = "要执行的代码"
      *一旦用户点击,浏览器就eval("要执行的代码") 
      *eval("print")
      *在javaScript中,
      *一旦用户点击,那么浏览器会执行 X.onclick.call(x,{})
    **/
    </script>
    </body>
    
    3. DOM level2
    xxx.addEventListener(event,function(){ },trueOrFalse)
    //优点:level 1里, xxx.onclick()事件是唯一的一个属性,
    //在level2 里,xxx拥有一个队列 eventListeners
    

    要时刻记住addEventListener得到是一个队列!!!
    下面是一道小李子:

    function f1(){
      console.log(1)
    }
    function f2(){
      console.log(2)
    }
    function f3(){
      console.log(3)
    }
    xxx.addEventListener('click',f1)
    xxx.addEventListener('click',f2)
    xxx.removeEventListener('click',f1)
    xxx.addEventListener('click',f3)
    xxx.removeEventListener('click',f3)
    //最终得到的结果是 2
    //因为xxx会得到一个队列:eventListener,
    //通过入栈与出栈,最终只剩下一个有f2函数的click事件
    
    • 捕获与冒泡
      一般不传第三个参数,则优先显示冒泡。
    /**html**/
    <body>
     <div id=grandpa>
       <div id=parent>
         <div id=child>儿子</div>
       </div>  
     </div>
    </body>
    

    ① 冒泡阶段(从下到上)

    function f1(){
      console.log(1)
    }
    function f2(){
      console.log(2)
    }
    function f3(){
      console.log(3)
    }
    grandpa.addEventListener('click',f1)
    parent.addEventListener('click',f2)
    child.addEventListener('click',f3)
    //五个flasy值:undefined, Null, '', 0, NaN
    //如果第三个参数是falsy值,则结果是 321
    

    ②捕获阶段(从上到下),第三个参数可转化为true,则显示捕获

    function f1(){
      console.log(1)
    }
    function f2(){
      console.log(2)
    }
    function f3(){
      console.log(3)
    }
    grandpa.addEventListener('click',f1)
    parent.addEventListener('click',f2)
    child.addEventListener('click',f3)
    //如果第三个参数值为true,则结果是 1 2 3
    

    ③ 一般事件模型是先捕获再冒泡


    //还是上面那个html例子
    grandpa.addEventListener('click',f1,false)
    parent.addEventListener('click',f2,true)
    child.addEventListener('click',f3,false)
    //最后得到的结果是2 3 1,
    //因为事件模型是先捕获再冒泡,
    //爸爸的click事件最先被触发,然后再到儿子,再到爷爷
    

    ④ 注意,同一个元素的事件不受捕获与冒泡阶段影响。也就是同一个元素同时加入event事件,则触发时间按代码出现决定。

    child.addEventListener('click',f3)
    child.addEventListener('click',f2)
    //得到的结果是3 2
    

    相关文章

      网友评论

        本文标题:DOM事件模型

        本文链接:https://www.haomeiwen.com/subject/dswajftx.html