javascript高級程序設計讀書筆記-事件（一）

讀書筆記，寫的很亂  

事件處理程序

  事件處理程序分爲三種： 1.html事件2. DOM0級，3，DOM2級別  沒有DOM1  

  一樣的事件 DOM0會頂掉html事件   由於他們都是屬性  而DOM0比html事件執行的晚（能夠理解爲誰離html元素近先執行誰）

 

 

JS事件執行順序理解

先捕獲(document-往下)->目標階段(執行)->冒泡(具體到不具體);

addEventListener 第三個參數 默認false   (false 是冒泡階段執行)   true 是捕獲階段執行  

若是是多個元素嵌套的狀況,先捕獲不具體的，而後逐級往下捕獲，到目標階段

 而後目標階段就有意思了，到了目標階段，addEventListener第三個參數無論是true仍是false,都無所謂了，由於已經到了目標了，若是寫了一樣的事件，一個true一個false他們的執行順序是誰在前先執行誰。

而後是一點疑惑，我測試的（chrome67.0,ie11裏）事件到了目標階段以及冒泡階段 事件執行順序都是先html-後DOM0後DOM2 這是一點疑惑多是瀏覽器的差別

看圖  

 

來一段小代碼  加強一下記憶:

    <div class="div">

            <p class="box">

            </p>

        </div>

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            var get = document.querySelector.bind(document);
            var log = console.log.bind(this)

            get('p').addEventListener('click', function(e) {
                log(e.eventPhase)
                alert('p')
            }, false)

            get('body').addEventListener('click', function(e) {

                log(e.eventPhase)

                alert('body')

                if(e.target.nodeName == 'DIV' || e.target.nodeName == 'P') {

                    //若是點擊的是div  那麼 

                    e.stopPropagation()

                }

                //true  是捕獲階段獲取  
            }, false)

            get('div').addEventListener('click', function(e) {

                alert('div')

                //true  是捕獲階段獲取  
            }, true)
        </script>

 

聊聊  e.stopPropagation();

 

最先知道e.stopPropagation()的時候只知道是阻止冒泡,本身也一直死記硬背的用着,具體什麼原理,一直沒搞清楚.

今天學習了相關文檔,說是阻止冒泡並不錯,可是不全面.   

按官方說法 stopPropagation()是再也不派發事件。

  終止事件在傳播過程的捕獲、目標處理或起泡階段進一步傳播。調用該方法後，該節點上處理該事件的處理程序將被調用，事件再也不被分派到其餘節點。

  該方法將中止事件的傳播，阻止它被分派到其餘 Document 節點。在事件傳播的任何階段均可以調用它。注意，雖然該方法不能阻止同一個 Document 節點上的其餘事件句柄被調用，可是它能夠阻止把事件分派到其餘節點。

  看來stopPropagation()是任何階段均可以調用而且生效的.   那是否是能夠理解爲,若是給body加事件捕獲  而後 再阻止派發事件,那麼就能夠作掉頁面上的其餘點擊事件了?   確實是的!  用在點擊頁面任意位置關閉某個彈窗仍是不錯的.  也能夠某種權限驗證時來簡單限制.

測試代碼以下:

        
            get('body').addEventListener('click', function(e) {

                

            e.stopPropagation()
            
            alert(2)

            }, true)