淺談JavaScript事件

IamDLY 發(fā)布于2019-08-21 11:27 / 1220人閱讀

摘要：淺談事件事件流的事件流有提出的捕獲流的冒泡流以及級事件流。真實的過程取決于事件的目標元素以及各目標元素的祖先元素是否有事件處理函數(shù)。事件處理函數(shù)需要注意的指的是或后面討論。兩種方法都會給事件處理函數(shù)傳一個事件對象作為參數(shù)。

淺談JavaScript事件 事件流

JavaScript的事件流有：Netscape提出的捕獲流、IE的冒泡流以及DOM2級事件流。這里只討論DOM2級事件流。

DOM2級事件流有三個階段：捕獲階段——>處于目標階段——>冒泡階段。如圖所示：

其實這些階段都是相對的。真實的過程取決于事件的目標元素以及各目標元素的祖先元素是否有事件處理函數(shù)。

添加事件處理程序

三種方法：

在html標簽中直接指定，如

;

DOM0級方法，如element.onclick = function(e) { alert(e.type); };

DOM2級方法，如element.addEventListener("click", fn, false);

三種方法各有什么優(yōu)缺點呢？

html方法，用戶可能在元素剛一出現(xiàn)就觸發(fā)了事件，但此時js代碼可能還未加載。其次，HTML代碼和JavaScript代碼緊密耦合，不利于開發(fā)和維護，所以不推薦使用這種方法。

DOM0級方法，簡單且兼容性好，但是在需要對一個元素設置多個事件處理程序時便顯得孱弱。

DOM2級方法，可以輕易的設置多個事件處理程序，但是在刪除事件處理程序時，傳給removeEventListener()的參數(shù)必須與之前一致，且IE9以下不支持。

事件處理函數(shù)需要注意的：

this指的是target或currentTarget(后面討論)。

兩種DOM方法都會給事件處理函數(shù)傳一個事件對象作為參數(shù)。html方法直接引用event

事件對象

上面有提到事件對象event，event對象有很多屬性和方法，這里不一一列出只討論其中常用的幾個：

target: event真正的目標元素;

currentTarget: 設置了事件處理函數(shù)的元素;

stopPropagation(): 阻止event繼續(xù)冒泡;

preventDefault(): 阻止事件的默認行為。

事件類型

太多，無法一一列舉，提幾個自己容易忽略的點。

blur、focus是不會冒泡的

鍵盤事件keydown觸發(fā)條件是按任意鍵，keypress是按字符鍵，這兩者按住不放都會持續(xù)觸發(fā)，是在文本框變化之前就觸發(fā)了的。keyup即松開按鍵觸發(fā)

云服務器 GPU云服務器淺談javascript javascript事件 javascript鍵盤事件 javascript焦點事件

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86719.html

JavaScript-淺談DOM事件流

摘要：事件流指的是從頁面接收事件的順序。級事件規(guī)定方法的第三個參數(shù)設為，表示事件在捕獲階段觸發(fā)。目前支持事件捕獲流的瀏覽器有，，，，。事件流根據(jù)級事件規(guī)定，事件流應該包括三個階段，事件捕獲階段，處于目標階段和事件冒泡階段。什么是事件？（敲黑板）事件，就是文檔或瀏覽器窗口發(fā)生的一些特定的交互瞬間。（by 《JavaScript高級程序設計》）比如鼠標點擊，雙擊，滾動條滑動... 什么是事件...

haitiancoder 2019-08-20 10:49 評論0 收藏0
淺談Javascript事件委托（代理）

摘要：開玩笑啦，提供一種方法叫做事件委托。途中經(jīng)過各個層次的，并在各上觸發(fā)捕獲事件，直到到達時間的目標。懂得了事件冒泡的過程，就很容易明白事件委托的運作原理。首先祝大家七夕快樂。。假如現(xiàn)在有一個的列表，里面可能會有若干個列表項。現(xiàn)在要為每一個列表項綁定相同的點擊事件，現(xiàn)在你可能會有這幾種做法：手動為每一個列表項綁定事件；在onload的時候，找到該列表，對其每一個子元素進行遍歷，循環(huán)...

yunhao 2019-08-21 10:38 評論0 收藏0
淺談React事件機制

摘要：事件簡介事件是合成事件，所有事件都自動綁定到最外層上。支持事件的冒泡機制，我們可以使用和來中斷它。這樣做簡化了事件處理和回收機制，效率也有很大提升。事件類型合成事件的事件類型是原生事件類型的一個子集。 React事件簡介 React事件是合成事件，所有事件都自動綁定到最外層上。因為Virtual DOM 在內存中是以對象的形式存在的，所以React 基于 Virtual DOM 實現(xiàn)了...

moven_j 2019-08-02 15:29 評論0 收藏0
淺談React事件機制

摘要：事件簡介事件是合成事件，所有事件都自動綁定到最外層上。支持事件的冒泡機制，我們可以使用和來中斷它。這樣做簡化了事件處理和回收機制，效率也有很大提升。事件類型合成事件的事件類型是原生事件類型的一個子集。 React事件簡介 React事件是合成事件，所有事件都自動綁定到最外層上。因為Virtual DOM 在內存中是以對象的形式存在的，所以React 基于 Virtual DOM 實現(xiàn)了...

MyFaith 2019-08-23 18:36 評論0 收藏0
淺談JavaScript中的事件循環(huán)機制

摘要：事件循環(huán)背景是一門單線程非阻塞的腳本語言，單線程意味著，代碼在執(zhí)行的任何時候，都只有一個主線程來處理所有的任務。在意識到該問題之際，新特性中的可以讓成為一門多線程語言，但實際開發(fā)中使用存在著諸多限制。這個地方被稱為執(zhí)行棧。事件循環(huán)（Event Loop）背景 JavaScript是一門單線程非阻塞的腳本語言，單線程意味著，JavaScript代碼在執(zhí)行的任何時候，都只有一個主線程來...

Pluser 2019-08-23 15:22 評論0 收藏0