關于javascript事件機制的理解及事件監(jiān)聽的封裝

lykops 發(fā)布于2019-08-20 16:54 / 3150人閱讀

摘要：說到事件機制首先要說一下事件模型原始事件模型在原始事件模型中，事件是不會傳播，只是觸發(fā)立即執(zhí)行，函數(shù)會作為元素的屬性被監(jiān)聽。標準函數(shù)綁定其中是否綁定在捕獲階段，表示采取捕獲方式，表示采取冒泡方式。

說到事件機制首先要說一下事件模型

1.原始事件模型

 在原始事件模型中，事件是不會傳播，只是觸發(fā)立即執(zhí)行，函數(shù)會作為元素的屬性被監(jiān)聽。
 這種方式和這種方式document.querySelector(".box");
 這種時間模型有著明顯的缺點：同一事件無法綁定多個，無法傳播不能應用事件委托.

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

w3c規(guī)定的標準事件模型，高版本瀏覽器基本遵循著一標準（gtmd ie）
事件模型中一次事件包含3個過程

事件捕獲階段：事件被從document一直向下傳播到目標元素,在這過程中依次檢查經過的節(jié)點是否注冊了該事件的監(jiān)聽函數(shù)，若有則執(zhí)行。
（什么捕獲，神奇的ie我是不知道，你說什么反正我是聽不到的，哥是最屌的，gtmd ie）ie低版本沒有捕獲

事件處理階段：事件到達目標元素,執(zhí)行目標元素的事件處理函數(shù).

事件冒泡階段：事件從目標元素上升一直到達document，同樣依次檢查經過的節(jié)點是否注冊了該事件的監(jiān)聽函數(shù)，有則執(zhí)行。

w3c標準函數(shù)綁定 function addEventListener(string eventFlag, function eventFunc,
useCapture)
其中useCapture是否綁定在捕獲階段，true表示采取捕獲方式，false表示采取冒泡方式。

    
    
    


    
        
    

節(jié)點既綁定了冒泡事件也綁定了捕獲事件，此時的執(zhí)行順序按照綁定的先后順序執(zhí)行。

因為ie用自有的attachEvent函數(shù)綁定，所以監(jiān)聽的時候需要做兼容，為了方便封裝一下吧。

        if (element.addEventListener) {
            element.addEventListener(type, fun, false);
        }
        else if(element.attachEvent){
            element.attachEvent("on" + type, fun);
        }
        else{
            element["on" + type] = fun;
        }
    }```

最近看了惰性函數(shù)的相關，同一個應用環(huán)境中，其實只需要檢測一次即可。

            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。下次再調用的時候函數(shù)被重寫，不會再做檢測。

GPU云服務器云服務器 js事件監(jiān)聽怎么理解 javascript的事件事件機制監(jiān)聽事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/83251.html

JavaScript：徹底理解同步、異步和事件循環(huán)(Event Loop)

摘要：例如處理請求的線程處理事件的線程定時器線程讀寫文件的線程例如在中等等。事件循環(huán)事件循環(huán)是指主線程重復從消息隊列中取消息執(zhí)行的過程。事件觸發(fā)時，表示異步任務完成，會將事件監(jiān)聽器函數(shù)封裝成一條消息放到消息隊列中，等待主線程執(zhí)行。一. 單線程我們常說JavaScript是單線程的。所謂單線程，是指在JS引擎中負責解釋和執(zhí)行JavaScript代碼的線程只有一個。不妨叫它主線程。但是實...

wenyiweb 2019-08-19 17:25 評論0 收藏0
(轉)JavaScript：同步、異步和事件循環(huán)

摘要：事件循環(huán)事件循環(huán)是指主線程重復從消息隊列中取消息執(zhí)行的過程。事件觸發(fā)時，表示異步任務完成，會將事件監(jiān)聽器函數(shù)封裝成一條消息放到消息隊列中，等待主線程執(zhí)行。一. 單線程我們常說JavaScript是單線程的。所謂單線程，是指在JS引擎中負責解釋和執(zhí)行JavaScript代碼的線程只有一個。不妨叫它主線程。但是實際上還存在其他的線程。例如：處理AJAX請求的線程、處理DOM事件的線...

android_c 2019-08-20 11:41 評論0 收藏0
[譯] $digest 在 Angular 中重生

摘要：但如果一個組件在生命周期鉤子里改變父組件屬性，卻是可以的，因為這個鉤子函數(shù)是在更新父組件屬性變化之前調用的注即第步，在第步之前調用。原文鏈接：Angular.js’ $digest is reborn in the newer version of Angular showImg(https://segmentfault.com/img/remote/146000001468785...

incredible 2019-08-26 11:52 評論0 收藏0
Node - 異步IO和事件循環(huán)

摘要：它是在的基礎上改進的一種方案，通過對文件描述符上的事件狀態(tài)進行判斷。檢索新的事件執(zhí)行與相關的回調幾乎所有情況下，除了關閉的回調函數(shù)，它們由計時器和排定的之外，其余情況將在此處阻塞。執(zhí)行事件的，例如或者。前言學習Node就繞不開異步IO，異步IO又與事件循環(huán)息息相關，而關于這一塊一直沒有仔細去了解整理過，剛好最近在做項目的時候，有了一些思考就記錄了下來，希望能盡量將這一塊的...

MyFaith 2019-08-23 17:16 評論0 收藏0
擼一個JS的事件管理模塊

摘要：列舉一個生活中的例子來幫助大家理解這一種模式。例子中的小明就是訂閱者訂閱的是飯涼了，而媽媽則是發(fā)布者將信號飯涼了發(fā)布出去。這樣就不用把小明和媽媽強耦合在一起，當小明的弟弟妹妹都想在飯涼了在吃飯，只需告訴媽媽一聲。關于事件在我們使用javascript開發(fā)時，我們會經常用到很多事件，如點擊、鍵盤、鼠標等等，這些物理性的事件。而我們今天所說的我稱之為事件的，是另一種形式的事件，訂閱--...

harryhappy 2019-08-23 10:30 評論0 收藏0