前端面試題(3)——DOM事件類


  1. 基本概念:
    • DOM事件的級別
  2. DOM事件模型:
    • 事件冒泡
    • 事件捕獲
  3. DOM事件流
  4. 描述DOM事件捕獲的具體流程
  5. Event對象的常見應用
  6. 自定義事件

一、DOM事件的級別

  1. DOM0: element.onclick=function(){}
  2. DOM2: element.addEventListener('click',function(){},false)(true表示在捕獲階段觸發,false表示在冒泡階段觸發,默認是false);
  3. DOM3: element.addEventListener('keyup',function(){},false)(true表示在捕獲階段觸發,false表示在冒泡階段觸發,默認是false),增加了很多事件類型;

二、DOM事件模型

  1. 事件捕獲:從上往下找到目標元素
  2. 事件冒泡:從目標元素往上查找

三、DOM事件流:瀏覽器為當前頁面和用戶做交互的過程中發生的過程,一個完整的事件流分三個階段。

  1. 事件捕獲
  2. 目標階段
  3. 事件冒泡

事件通過捕獲到達目標元素,這個時候就是目標階段,第三個階段就是從目標元素上傳到window對象。

四、描述DOM事件捕獲的具體流程

window --> document --> html(用js表示html節點的方法:document.documentElement;) --> body --> ··· --> 目標元素

<body>
    <div id="ev">
        <style>
            #ev {
                width: 300px;
                height: 100px;
                background: #f00;
                color: #fff;
                text-align: center;
                line-height: 100px;
            }
        </style>
        目標元素
    </div>
    <script type="text/javascript">
        var ev = document.getElementById("ev");
        ev.addEventListener('click', function() {
            console.log("ev capture");
        }, true);
        window.addEventListener('click', function() {
            console.log("window capture");
        }, true);
        document.addEventListener('click', function() {
            console.log("document capture");
        }, true);
        document.documentElement.addEventListener('click', function() {
            console.log("html capture");
        }, true);
        document.body.addEventListener('click', function() {
            console.log("body capture");
        }, true);
    </script>
</body>

// 打印結果是
// window capture
// document capture
// html capture
// body capture
// ev capture

五、Event對象的常見應用

  1. event.preventDeault():阻止默認行為;
  2. event.stopPropation():阻止事件冒泡;
  3. event.stopImmeidiatePropagation():阻止其他事件(若一個按鈕綁定了兩個或多個事件:事件a、事件b、……。當下場景想要實現點擊按鈕的時候只執行事件a,其他事件不執行,則在事件a的函數中加上event.stopImmeidiatePropagation()就能實現);
  4. event.currentTarget:當前所被綁定的事件;
  5. event.target:當前被點擊的元素(早期的ie版本不支持,早期ie用event.srcElement);

六、自定義事件(模擬事件)

  1. 自定義事件和自定義觸發事件的過程(只能指定事件名,不能給事件加數據)
// eve就當作普通的事件
var eve = new Event("custome");
// ev就是普通的DOM節點
ev.addEventListener("custome",function(){
    console.log("custome");
},false);
// 此時是自動觸發事件,通常和其他事件結合使用
ev.dispatchEvent(eve);
// 延時5秒后觸發
setTimeout(function() {
    ev.dispatchEvent(eve);
}, 5000);
  1. CustomeEvent(除了指定事件名,還能給事件加一個Object,用來傳遞自定義參數);
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • ??JavaScript 與 HTML 之間的交互是通過事件實現的。 ??事件,就是文檔或瀏覽器窗口中發生的一些特...
    霜天曉閱讀 3,526評論 1 11
  • 以下文章為轉載,對理解JavaScript中的事件處理機制很有幫助,淺顯易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy閱讀 3,066評論 1 10
  • 事件是一種異步編程的實現方式,本質上是程序各個組成部分之間的通信。DOM支持大量的事件,本節介紹DOM的事件編程。...
    周花花啊閱讀 597評論 0 3
  • 在大數據風潮中,即使BAT這樣規模的互聯網企業也紛紛把大數據作為企業的發展的核心戰略——百度著重基于用戶搜索行為的...
    大圣眾包閱讀 491評論 0 0
  • 生活遠沒有想象般美好,每個人都希望過得一帆風順,事情能按照自己所預想的那樣發生,可往往被現實的巨浪沖昏了方向。“你...
    郗之桃閱讀 1,272評論 0 3