談談對事件的理解(持續更新中)

来源:https://www.cnblogs.com/clearWind/archive/2018/05/19/9061284.html
-Advertisement-
Play Games

談談對事件的理解: 從前有一家人,我們稱為window家。window他其中有一個兒子叫事件。 事件 事件他有很多好基友,每次發生什麼事情都會找到事件,叫他幫忙查看一下那些細節出現了問題。可是事件這個小子有時候遇到同一類型的事情會忘記前面那個小伙伴的問題,只記得最後的那個問題。但有時荷爾蒙分泌過多的 ...


談談對事件的理解:

從前有一家人,我們稱為window家。window他其中有一個兒子叫事件。

--------------------------------------------------------------------事件------------------------------------------------------------------------------

事件他有很多好基友,每次發生什麼事情都會找到事件,叫他幫忙查看一下那些細節出現了問題。可是事件這個小子有時候遇到同一類型的事情會忘記前面那個小伙伴的問題,只記得最後的那個問題。但有時荷爾蒙分泌過多的時候,他又可以一口氣把所有的麻煩事全部做完,這就叫男孩子。

引言

1、從這個故事得到:

a、DOM元素觸發某些產生在瀏覽器的某些行為就會使用事件

b、事件可以監聽元素觸發時執行一段代碼

c、事件綁定(也叫DOM0級事件):不同元素監聽同一類型的事件時,後者的事件會將前者的事件覆蓋掉,這就是事件綁定

d、事件監聽(也叫DOM2級事件):同事件綁定不同,前後者事件都可以監聽到

2、問題三連

       ①別要問我為什麼沒有1級事件,我也不知道

       ②如何查看事件類型?type (判斷死亡四連:e.type事件類型    typeof數據類型    instanceof對象誰創建? ele.nodeType節點類型)

        ③有什麼事件類型?鍵盤([onkey]+up按下/down /press抬起二連)滑鼠([onmouse]+click/dblclick/over/move/out…)其他(onfocus/onblur焦點二連、onchange改變輸入框內容、oninput輸入框發生變化、onload頁面載入完畢會執行,一個Jscript標簽只能存在一個)

事件綁定

 

最簡單的用法,易理解快捷方便。不過用這方法會導致代碼比較冗雜,不推薦使用。

事件監聽(相容)

 

addEventListener(參1,參2,參3)  →  removeEventListener() 主流瀏覽器

參數1:事件類型(不加on) 參數2:預處理函數名參數3:預設為false(true為事件捕獲,false為事件冒泡)

attachEvent(參1,參2) → detachEvent()  IE瀏覽器

參數1:事件類型(加on)參數2:預處理函數名

 

------------------------------小分隔符------------------------------

什麼是事件流?什麼是事件冒泡?什麼是事件監聽?

事件流:當一個元素觸發一個事件的時候這個元素將這個事件逐個進行傳播這樣的一個過程叫做事件流

 

事件捕獲:由網景公司提出的事件捕獲,它是從父元素到子元素向下捕捉事件的過程。所以火狐瀏覽器的事件處理機制是事件捕獲

事件冒泡:由微軟公司提出的事件冒泡,它是從子元素到父元素向上傳遞冒泡事件的過程。所以IE瀏覽器的事件處理機制正是事件冒泡

①   缺點:事件冒泡的時候會進行傳播,有時候會出現相互干擾衝突問題,那時候我們就應該取消事件進行冒泡傳播e.stopPropagation和e.cancelBubble=true(IE相容)

e.stopPropagation?e.stopPropagation():e.cancelBubble = true; //三目運算進行綜合相容(e為事件對象,下文會詳細說明)

 

②   優點:事件代理(事件委托)

事件代理例子:這是一個電商網站的一個購物車商品欄監聽部分代碼

 

用法:子級事件傳遞到父級之後,然後通過事件對象(e)的事件源(target),然後通過事件源的tagName(大寫)和className(要用正則進行封裝不然不相容)就可以進行準確找到點擊的那個元素進行事件觸發了

原理:利用事件冒泡原理,把眾多的子元素的事件統一提交到有相同父元素那裡統一代理進行監聽。

優點:減少事件的綁定,為未來元素的事件綁定做準備

 

面試題:請你談談對事件冒泡、事件捕獲的執行順序

 

一天,小明約了幾個小伙伴去春游。然後小明早早就來了,他發現小伙伴還沒來,就開始無聊扔石頭。他扔了一顆又一顆石頭,眼看著其中有一顆奇特的石頭一步步的沉下清澈的湖底,但是沒有泛起水泡。當那顆石頭沉入湖底的瞬間冒起了一個泡泡,泡泡往上冒出水面。小明心想,那究竟是先沉入還是先冒泡再沉入呢?

劃重點:

1、同一事件下先從父級往子級進行事件捕捉

2、接著再從子級向父級開始事件冒泡

3、在目標底層的子元素的事件順序要看誰的順序優先問題

 

 

----------------------------------------------------------------------事件對象------------------------------------------------------------------------

有一天老window給事件兒子介紹了一個對象,那閨女是隔壁鎮的一個女孩子,她非常羞澀很內向,但是她很瞭解事件,可能因為愛情吧,她都會留意事件的一舉一動。事件約她好幾次出來玩,她都沒不出來

 

引言

1、從這個故事得到:

a、事件對象是window給的

b、事件對象很瞭解事件

c、事件對象需要創建

2、問題三連

①什麼是事件對象?事件對象涵蓋事件的種種詳細內容。

②作用?當我們想獲取滑鼠或者鍵盤的一些信息的時候你需要用事件對象。

③創建方式? 我們在回調函數定義一個形參,假設叫e。然後傳進來的這個就是一個事件對象。

相容性

當然,古往今來每個東西都要考慮相容性,這個這麼好用的事件對象也不例外。第一個我們想到了IE不相容,沒錯,IE瀏覽器確實不識別e,它只識別event。

var e = e||event  → 那樣我們就可以相容這IE瀏覽器了。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySQL不允許遠程登錄,所以遠程登錄失敗了,解決方法如下: 執行FLUSH PRIVILEGES; ...
  • AIDL:Android Interface Definition Language,即 Android 介面定義語言。 AIDL 是什麼 Android 系統中的進程之間不能共用記憶體,因此,需要提供一些機制在不同進程之間進行數據通信。 為了使其他的應用程式也可以訪問本應用程式提供的服務,Andro ...
  • Github地址 第一步:初始化我們的工具類 第二步,直接調用使用嘍,就是這麼簡單粗暴 RegistGetVCodeBean 本文出處:https://blog.csdn.net/easkshark/article/details/62897368 ...
  • NSSortDescriptor 排序 Person類 1 #import <Foundation/Foundation.h> 2 3 @interface Person : NSObject 4 5 @property (nonatomic, copy) NSString *name; 6 @pr ...
  • 一、todolist功能開發 <div id="root"> <div> <input type="text" v-model="inputValue"> <button @click="handleSubmit">提交</button> </div> <ul> <li v-for="(item, ...
  • 今天終於能更新博文了……(確實有些不應該,5月份到現在就沒認認真真寫過幾行代碼) 今天算是正式在學Vue.js了,前期想必大家也能看得出來,我為那個即時通訊系統寫的代碼註釋,基本上都是自己在胡亂猜測的,很隨意很隨性的在寫註釋(可能都完全不正確…) 今天簡單的抄寫了兩個官網上的例子,花了半個小時左右的 ...
  • 前言 我的目標是寫一個非常詳細的關於diff的乾貨,所以本文有點長。也會用到大量的圖片以及代碼舉例,目的讓看這篇文章的朋友一定弄明白diff的邊邊角角。 先來瞭解幾個點... 1. 當數據發生變化時,vue是怎麼更新節點的? 要知道渲染真實DOM的開銷是很大的,比如有時候我們修改了某個數據,如果直接 ...
  • 深入css佈局(1)—— 盒模型 & 元素分類 “ 在css知識體系中,除了css選擇器,樣式屬性等基礎知識外,css佈局相關的知識才是css比較核心和重要的點。今天我們來深入學習一下css佈局相關的知識。” 首先來列下大綱 盒模型 IE盒模型 W3C盒模型 box-sizing 元素的分類 塊級元 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...