dom事件的機制-捕獲，目標，冒泡

阿新 • • 發佈：2019-02-09

機制

在這裡插入圖片描述

IE10以下沒有捕獲階段

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件機制</title>
</head>
<body >

    <div id="parent" style="height: 400px;width: 400px;background-color: cadetblue">
        <div id="child" style="height: 200px;width: 200px; margin:0 auto; background-color: bisque" 
 onclick="console.log('捕獲之前 child self click')">
        </div>
    </div>
    <script>
        document.body.addEventListener("click",function () {
            console.log('捕獲 body click')
        },true);
        document.getElementById('parent').addEventListener("click",function 
 () {
            console.log('捕獲 parent click')
        },true);
        document.getElementById('child').addEventListener("click",function () {
            console.log('捕獲 child click')
        },true);
        document.getElementById('parent').onclick =function(){
            console.log('捕獲之後 parent self click' 
)
        }
        document.body.addEventListener("click",function () {
            console.log('冒泡 body click')
        },false);
        document.getElementById('parent').addEventListener("click",function () {
            console.log('冒泡 parent click')
        },false);
        document.getElementById('child').addEventListener("click",function () {
            console.log('冒泡 child click')
        },false);
        document.body.onclick =function(){
            console.log('冒泡之後 body self click')
        }
    </script>

</body>
</html>

點選child的列印效果

在這裡插入圖片描述
解釋效果
事件捕獲是由外而內的，目標事件是在自身觸發的（目標事件過程，與事件聲繫結順序有關，先繫結先發生，它不遵守先捕獲後冒泡），事件冒泡是由內而外的。
關鍵點

child，當事件從上至下捕獲的時候，到了child節點的時候，從開篇的圖中，應該是先執行捕獲，在執行目標，但是這裡是先執行了目標，在執行了捕獲，因為目標過程只與繫結的先後順序有關，先繫結先執行。
parent，當事件從下至上開始冒泡的時候，parent的目標在冒泡繫結之前，所以先執行。
body，同理自然

總結

事件執行順序是從上至下，先執行捕獲事件，當執行到目標節點的時候，目標過程與繫結順序有關，繼而從下至上開始執行冒泡事件。

dom事件的機制-捕獲，目標，冒泡

機制 IE10以下沒有捕獲階段例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

DOM事件機制(事件捕獲和事件冒泡和事件委托)

使用 tar web strong 事件所有 span click ner 內容： 1.事件復習 2.事件冒泡與事件捕獲 3.事件委托 1.事件復習 (1)事件事件是用來處理響應的一個機制，這個響應可以來自於用戶(點擊, 鼠標移動, 滾動), 也可以來自於瀏

as3的捕獲，目標，冒泡的理解

三個階段搞清楚了吧。那你是不是對這個Capture，捕獲階段這個單詞有點眼熟呢，不錯就是第三個引數裡面useCapture.（終於又繞回來了）。現在想想，我們為Parent上註冊了一個事件，其實就相當於在他上面放了一隻耳朵，用來聽聽事件是不是經過了那裡，經過就執行函式，那麼

js事件機制----捕獲與冒泡

先從事件繫結機制說起, 事件繫結機制通過繫結方法addEventListener()實現, 語法格式如下: element.addEventListener(event, function, useCapture) 引數值引數

事件的三個階段：捕獲階段目標階段冒泡階段

js有好多的知識需要不斷積累，但是不能淺嘗，應該深究其內因，並運用在日常開發過程中。捕獲階段：事件從根節點流向目標節點，途中流經各個DOM節點，在各個節點上觸發捕獲事件，直到達到目標節點。那麼捕獲階段有什麼用嗎？完全可以沒有捕獲階段也可以啊？捕獲階段的主要任務是建立傳播路經，在冒泡階段根據這

DOM事件機制

前言本文主要介紹DOM事件級別、DOM事件模型、事件流、事件代理和Event物件常見的應用，希望對你們有些幫助和啟發！本文首發地址為GitHub部落格,寫文章不易，請多多支援與關注！一、DOM事件級別 DOM級別一共可以分為四個級別：DOM0級、DOM1級、DOM2級和DOM3級

深入理解DOM事件機制系列第三篇——事件物件

前面的話　　在觸發DOM上的某個事件時，會產生一個事件物件event，這個物件中包含著所有與事件有關的資訊。所有瀏覽器都支援event物件，但支援方式不同。本文將詳細介紹事件物件獲取事件物件　　【1】一般地，event物件是事件程式的第一個引數　　[注意

深入理解DOM事件機制系列第二篇——事件處理程式

前面的話　　事件處理程式又叫事件偵聽器，實際上就是事件的繫結函式。事件發生時會執行函式中相應程式碼。事件處理程式有HTML事件處理程式、DOM0級事件處理程式、DOM2級事件處理程式和IE事件處理程式四類，下面將詳細介紹該部分內容 HTML事件處理程式　　某個元素支援的每種事件，都可以使用一個與

深入理解DOM事件機制系列第六篇——事件模擬

前面的話　　事件是網頁中某個特別的瞬間，經常由使用者操作或通過其他瀏覽器功能來觸發。但實際上，也可以使用javascript在任意時刻來觸發特定的事件，而此時的事件就如同瀏覽器建立的事件一樣。本文將詳細介紹事件模擬引入　　以下面的實際需求為例，來詳細說明事

理解JS捕獲、目標、冒泡三個階段

<!DOCTYPE html> <html> <head> <title>demo</title> </head> <body> <a id="A">元素A</a> </body&

一個DOM元素綁定多個事件時，先執行冒泡還是捕獲

msg 元素 .org tro code 常見 xxx == 添加綁定在被點擊元素的事件是按照代碼順序發生，其他元素通過冒泡或者捕獲“感知”的事件，按照W3C的標準，先發生捕獲事件，後發生冒泡事件。所有事件的順序是：其他元素捕獲階段事件 -> 本元素代碼順序事件 -

JS中事件綁定函數，事件捕獲，事件冒泡

obj adding 事件點擊 dev 不同 aaa 什麽 div 1 事件綁定：事件與函數綁定和怎麽取消綁定 1.1 元素.onclick這種形式，如下： 1 <div id="div1">aaa</div> 2

JQuery選擇器，動畫，事件和DOM操作

out 標簽空格 jquery選擇器 ges 引用上拉定義 alt JQuery是由JS封裝的一些方法，供我們調用，可以快速的實現某些JS功能，實際是JS編寫的方法包將JQuery文件放到JS文件夾下，然後引用到<head></head>中

Qt事件機制（是動作發生後，一種通知對象的消息，是被動與主動的總和。先處理自己隊列中的消息，然後再處理系統消息隊列中的消息）

str 發送 filter 簡化後者 nts 類型 min() 鼠標滾輪 Qt事件機制 Qt程序是事件驅動的, 程序的每個動作都是由幕後某個事件所觸發.。 Qt事件的發生和處理成為程序運行的主線，存在於程序整個生命周期。 Qt事件的類型很多, 常見的qt的事件如下:

從零開始學 Web 之 jQuery（七）事件冒泡，事件參數對象，鏈式編程原理

eval uri turn 定位 return 也會否則 ont sele 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客

jQuery事件機制，動畫效果，工具和其他操作（三）

不同匹配 fad namespace event 返回 animate sin 繼續 jQuery事件機制 1 事件操作 1.1 頁面載入事件 $(document).ready(function(){ // 在這裏寫你的代碼... }); 或者 $(function

除了信號觸發線程與接收者線程相同的情況能直接調用到slot，其它情況都依賴事件機制（解決上面代碼收不到信號的問題其實很簡單，在線程的run();函數中添加一個事件循環就可以了，即加入一句exec();）

使用 usleep tle 結果線程方法 params str signal MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) {

osg 場景節點（事件，更新，裁剪）遍歷狀態開啟機制

OSG 顯示引擎為優化其顯示效率，節點的更新遍歷，事件處理遍歷預設情況下是關閉的，內部通過更新計數來控制是否將事件處理，節點更新應用到子場景中。 void Node::setUpdateCallback(Callback* nc)； void Node::setEventCallback(Cal

Python基礎（四）--- Python多執行緒介紹，開啟執行緒的三種方式，time模組，join，Daemon，Lock、Rlock，事件機制，Timer

一、多執行緒介紹 --------------------------------------------------------- 1.threading用於提供執行緒相關的操作，執行緒是應用程式中工作的最小單元。 2.python當前版本的多執行緒庫沒有實現優先順序、執行緒組，執

事件流（事件冒泡、事件捕獲以及DOM事件流）

事件流：描述的是從頁面中接收事件的順序。事件冒泡：IE的事件流叫做事件冒泡，即事件開始時由最具體的元素（文件中巢狀層次最深的那個節點）接收，然後逐級上傳播到較為不具體的節點（文件）。示例程式碼： <!DOCTYPE html> <html> <

dom事件的機制-捕獲，目標，冒泡

機制

例子

點選child的列印效果

總結

相關推薦