2. 程式人生 > >事件(一)：事件流

事件(一)：事件流

阿新 • • 發佈：2017-11-19
net 讀者 win ets 我們 chrom 就會 click事件 分享圖片

事件流：從頁面中接收事件的順序
ie中叫事件冒泡流
netscape中叫事件捕獲流

事件冒泡

事件冒泡，即事件開始時由最具體的元素（文檔中嵌套層級最深的那個節點）接收，然後逐級向上傳播到較為不具體的節點（文檔），for example

<!DOCTYPE html>
<html>
<head>
    <title>event bubbing example</title>
</head>
<body>
    <div id=‘myDiv‘>
        click me
    
 
</div>
</body>
</html>

如果點擊了頁面中的div元素，那麽這個click事件會按照如下順序傳播
1、div
2、body
3、html
4、document

技術分享圖片

所有現代瀏覽器都支持事件冒泡，具體實現還是又一些差別。ie5.5及更早版本中的事件冒泡會跳過html元素，從body直接跳到document.ie9、firefox、chrome和safari則將事件一直冒泡到window對象。

事件捕獲

事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點應該最後接收到事件，那麽單機div元素就會以下列順序觸發click事件

1、document
2、html
3、body
4、div

技術分享圖片


由於老版本的瀏覽器不支持，因此很少有人使用事件捕獲。我們也建議讀者放心地使用事件冒泡，在有特殊需要時再食用事件捕獲

DOM事件流

dom事件流包括三個階段：事件捕獲階段，處於目標階段，事件冒泡階段。首先發生的是事件捕獲，為截獲事件提供了機會。然後實際的目標接收到事件。最後一個階段是冒泡階段，可以在這個階段對事件做出響應
1、document
2、html
3、body
4、div
5、body
6、html
7、document

技術分享圖片

事件(一)：事件流

相關推薦

事件(一)：事件流

net 讀者 win ets 我們 chrom 就會 click事件 分享圖片 事件流：從頁面中接收事件的順序ie中叫事件冒泡流netscape中叫事件捕獲流 事件冒泡 事件冒泡，即事件開始時由最具體的元素（文檔中嵌套層級最深的那個節點）接收，然後逐級向上傳播到較為不具

Android事件分發機制一：事件是如何到達activity的？

> 事件分發，真的一定從Activity開始嗎？ ## 前言 很高興遇見你~ 事件分發，android中一個老生常談的話題了。基本的流程我們也都知道是從Activity開始分發，但有一個關鍵問題是：**事件是如何到達Activity的** ？ 你以為我接下來要開始講原始碼、系統底層了？不不不，本文不講

JS事件機制：事件繫結、事件監聽、事件委託(代理)和事件執行順序總結

JS 對於使用者的操作做出響應,就必須對DOM元素繫結事件處理函式 事件繫結 　1、在DMO中直接繫結事件 <input type="button" value="click me"

Java 檔案流一：位元組流（FileInputStream 和 FileOutputStream）

   Java檔案流操作是一個非常重要的內容。下圖列舉了關於Java基本的檔案流操作，當然目前還有NIO，這個後來會進行討論，先看基本的檔案流操作。我們主要使用的是訪問檔案的流和緩衝流。   檔案的流操作一般包含字元流和位元組流，兩者區別在於，字元流每次傳播16bit資

[瘋狂Java筆記]事件處理：事件型別、監聽器介面、事件介面卡

1. 不同型別事件對應不同型別的監聽器介面：     1) 總的來說就是實現了該種類型的介面，就能監聽並處理該種類型的事件；     2) 常見的事件型別有ActionEvent、WindowEvent、TextEvent（文字框中產生的事件，比如正在輸入文字等）、Mous

JS裏關於事件的常被考察的知識點：事件流、事件廣播、原生JS實現事件代理

ace 調用 解綁 用戶 ie8 span 知識點 自帶 sca 1、JS裏面的事件流 　　DOM2級事件模型中規定了事件流的三個階段：捕獲階段、目標階段、冒泡階段，低版本IE（IE8及以下版本）不支持捕獲階段 　　捕獲事件流：Netscape提出的事件流，即事件由頁面元素

事件流：事件冒泡和事件捕獲

top 選擇器 itl listener doc 三個參數 NPU 默認 捕獲 事件流：事件冒泡和事件捕獲 1. 兩者概念 事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。， element.addEventListener(event,fu

javaScript事件（一）事件流

一、事件 事件是文件或者瀏覽器視窗中發生的，特定的互動瞬間。 事件是使用者或瀏覽器自身執行的某種動作，如click,load和mouseover都是事件的名字。 事件是javaScript和DOM之間互動的橋樑。 你若觸發，我便執行——事件發生，呼叫它的處理函式執行相應的JavaSc

如何設計一張事件記錄流水錶（版本2）

在設計完 版本1的事件記錄表 後，大家就開始馬不停蹄寫程式碼去新增事件記錄資料。 版本1：事件表 流水ID id 物件ID obj_id 系統編碼 sys_code 網點

web前端實驗一：利用Js捕獲滑鼠事件實現圖片切換

    很多時候在做web時，頭疼的不是功能的實現，而是前臺的介面，下面是介紹關於利用javascript捕獲滑鼠事件的實驗 實驗目的：滑鼠指向某一圖片時，把該圖片切換為指定圖片，離開時回覆原來圖片。 實驗用途：製作web導航、強調某一功能時非常常用。 直接附上原始碼，非

js學習筆記：事件——事件流、事件處理程式、事件物件

Javascript與HTML之間的互動是通過事件實現的。 事件，就是文件或瀏覽器視窗中發生的一些特定的互動瞬間。 可以使用偵聽器來預定事件，以便事件發生時執行相應程式碼。 事件流 事件流描述的是從頁面中接受事件的順序。 事件冒泡 IE的事件

輸入框事件監聽(一)：keydown、keyup、input

當輸入框的值發生變化時，我們可以通過keydown、keyup、input、onchange、blur事件觀察到其值的變化，但它們的應用時機與應用場景存在顯著的差異。 1. 實時觀察 需要觀察到使用者每次鍵盤輸入的變化，必須要用keydown、keyup

讀《android開發藝術探索》筆記一：View的事件分發機制

View的事件分發機制：對於一個根viewgroup來說，點選事件產生後，首先會傳遞給它，這是它的dispatchTouchEvent就會被呼叫，如果這個viewGroup的OnInterceptTouchEvent方法返回true就表示它要攔截當前事件，接著事

事件流：事件冒泡和事件捕獲的理解

事件流：事件冒泡和事件捕獲 1. 兩者概念 事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。， element.addEventListener(event,function(),false); 事件冒泡是自下而上的去觸發

nodejs學習筆記一：什麼是事件驅動程式設計風格

這年頭nodeJS真是如日中天啊，學前端的要是不知道nodeJS，都不好意思說自己和懂點程式碼的美工有啥區別，談到nodeJS就不得不先聊聊它的事件驅動程式設計風格。究竟什麼是事件驅動程式設計風格呢？ 在傳統程式設計中，i/o操作和本地函式呼叫的處理方式相同：

Unity知識一：簡單的點選事件

用Unity做專案，不可避免的要用滑鼠或者手指去點選，但是點選的時候我們怎麼判斷我點到了什麼了呢？ 點選的實現方法有很多種，我們就由淺入深，先介紹簡單的。 射線點選事件的思路是：當我滑鼠按下的時候，從攝像機往滑鼠的方向發射出一條射線。如果該射線被某遊戲物體擋

[Unity通訊]一個基於socket的3DARPG網路遊戲(一)：建立連線和事件分發

一.客戶端 1.定義一個訊息體，伺服器和客戶端通訊的時候，傳輸的就是這樣的資訊。 using System.Collections; using System.Text; public class SocketMessage { //大模組，例如登入註冊模組，

javascript中的事件Event（一）— 事件流

 一、Event基本資訊1、事件流：描述的是從頁面中接受事件的順序       IE的事件流是事件冒泡流，Netscape的事件流是事件捕獲流。 2、事件冒泡      IE的事件流叫做事件冒泡(event bubbing)，即事件開始時由具體的元素接受，然後逐級向上傳播

PHP7.0微信公眾平臺開發4: 例項一：接收普通訊息和接收事件推送

<?php define("TOKEN", "peng"); $wechatObj = new wechatCallbackapiTest(); if (!isset($_GET['echostr'])) { $wechatObj->responseMsg(); //呼叫respon

jQuery 練習一：給網頁中所有的 元素新增 onclick 事件

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery</title> <script src="js