JavaScript常見事件源與事件流的獲取方法及解析

更新時間：2023年05月22日 11:35:49 作者：前端蕭蕭

這篇文章主要為大家介紹了JavaScript常見事件源與事件流的獲取方法及解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

事件源

在事件中，當前操作的那個元素就是事件源。比如網(wǎng)頁元素中 input 有 onclick 事件，當點擊 input 發(fā)送 onclic 事件時，事件源就是 input。

常見事件源：

(鼠標) 事件	描述
onclick	鼠標單擊對象時觸發(fā)
ondblclick	鼠標雙擊對象時觸發(fā)
onmousedown	鼠標按鈕被按下時觸發(fā)
onmousemove	鼠標被移動時觸發(fā)
onmouseout	鼠標離開監(jiān)聽該事件的元素或子元素時觸發(fā)
onmouseover	鼠標移動到監(jiān)聽該事件的元素或子元素時觸發(fā)
onmouseup	鼠標松開時觸發(fā)

(鍵盤) 事件	描述
onkeydown	鍵盤按下
keypress	鍵盤按住
keyup	鍵盤松開

(表單控件) 事件	描述
onblur	失去焦點
onfocus	獲取焦點
oninput	輸入
onchange	改變
onsubmit	提交
onreset	重置

(頁面) 事件	描述
onload	頁面加載結束
onscroll	滾動
onresize	改變大小

獲取事件源

事件源是作為event對象的屬性存在的。在W3C規(guī)范中，這個屬性是 target ；但是 IE8.0 及其以下版本不支持該屬性，它使用 srcElement 屬性來獲取事件源。

<html>
<head>
<title>獲取事件源</title>
</head>
<body>
<div id="demo">點擊這里</div>
<script type="text/javascript">
 document.getElementById("demo").onclick=function(e){
 var eve = e || window.event;
 var srcNode = eve.target || eve.srcElement; // 兼容所有瀏覽器
 alert(srcNode);
 }
</script>
</body>
</html>

事件流：

描述的是從頁面中接收事件的順序，也可以理解為事件的傳播順序。

DOM事件流存在的三個階段：

事件捕獲階段
處于目標階段
事件冒泡階段

事件捕獲（event capturing）：當鼠標點擊或者觸發(fā)dom事件時，瀏覽器會從根節(jié)點開始由外到內(nèi)進行事件傳播，即點擊了子元素，如果父元素通過事件捕獲方式注冊了對應的事件的話，會先觸發(fā)父元素綁定的事件。

事件冒泡（dubbed bubbling）：與事件捕獲恰恰相反，事件冒泡順序是由內(nèi)到外進行事件傳播，直到根節(jié)點。

DOM標準事件流的觸發(fā)的先后順序為：先捕獲再冒泡，即當觸發(fā)dom事件時，會先進行事件捕獲，捕獲到事件源之后通過事件傳播進行事件冒泡。

不同的瀏覽器對此有著不同的實現(xiàn)，IE10及以下不支持捕獲型事件，所以就少了一個事件捕獲階段，IE11、Chrome 、Firefox、Safari等瀏覽器則同時存在。

target 和 currentTarget

target是觸發(fā)事件的某個具體的對象，只會出現(xiàn)在事件機制的目標階段，即"誰觸發(fā)了事件，誰就是target"。
currentTarget是綁定了當前事件類型的對象，有可能是目標節(jié)點的祖先節(jié)點。

阻止事件在冒泡階段傳播

event.stopPropagation //阻止事件在冒泡階段傳播

<!-- 例子結構 -->
<div id="outer">
  <p id="inner"></p>
</div>

/**
 * 點擊#inner之后會發(fā)生如下過程:
 * outer捕獲階段
 * inner 一
 * inner 二
 * inner 三
 */
const inner = document.querySelector('#inner');
const outer = document.querySelector('#outer');
inner.addEventListener("click", event => {
  console.log("inner 一");
}, false);
inner.addEventListener("click", event => {
  console.log("inner 二");
  event.stopPropagation();
}, false);
inner.addEventListener("click",event => {
  console.log("inner 三");
}, false);
outer.addEventListener("click", event => {
  console.log("outer捕獲階段");
}, false);
outer.addEventListener("click", event => {
  console.log("outer冒泡階段");
}, false);

如果有多個相同類型事件的事件監(jiān)聽函數(shù)綁定到同一個元素，當該類型的事件觸發(fā)時，它們會按照被添加的順序執(zhí)行。如果其中某個監(jiān)聽函數(shù)執(zhí)行了event.stopImmediatePropagation()方法，則當前元素剩下的監(jiān)聽函數(shù)將不會被執(zhí)行，并且阻止事件在冒泡階段傳播。

/**
 * 點擊#inner之后會發(fā)生如下過程:
 * outer捕獲階段
 * inner 一
 * inner 二
 */
const inner = document.querySelector('#inner');
const outer = document.querySelector('#outer');
inner.addEventListener("click", (event) => {
  console.log("inner 一");
}, false);
inner.addEventListener("click", (event) => {
  console.log("inner 二");
  event.stopImmediatePropagation();
}, false);
inner.addEventListener("click",(event) => {
  console.log("inner 三");
}, false);
outer.addEventListener("click", event => {
  console.log("outer捕獲階段");
}, false);
outer.addEventListener("click", event => {
  console.log("outer冒泡階段");
}, false);

以上就是JavaScript常見事件源與事件流的獲取方法及解析的詳細內(nèi)容，更多關于JavaScript事件源事件流的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: