快捷導(dǎo)航

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

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

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

事件源

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

常見事件源：

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

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

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

(頁(yè)面) 事件	描述
onload	頁(yè)面加載結(jié)束
onscroll	滾動(dòng)
onresize	改變大小

獲取事件源

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

<html>
<head>
<title>獲取事件源</title>
</head>
<body>
<div id="demo">點(diǎn)擊這里</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>

事件流：

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

DOM事件流存在的三個(gè)階段：

事件捕獲階段
處于目標(biāo)階段
事件冒泡階段

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

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

DOM標(biāo)準(zhǔn)事件流的觸發(fā)的先后順序?yàn)椋合炔东@再冒泡，即當(dāng)觸發(fā)dom事件時(shí)，會(huì)先進(jìn)行事件捕獲，捕獲到事件源之后通過事件傳播進(jìn)行事件冒泡。

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

target 和 currentTarget

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

阻止事件在冒泡階段傳播

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

<!-- 例子結(jié)構(gòu) -->
<div id="outer">
  <p id="inner"></p>
</div>

/**
 * 點(diǎn)擊#inner之后會(huì)發(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);

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

/**
 * 點(diǎn)擊#inner之后會(huì)發(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常見事件源與事件流的獲取方法及解析的詳細(xì)內(nèi)容，更多關(guān)于JavaScript事件源事件流的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: