dom事件模型

先捕獲,再冒泡
第三個(gè)參數(shù)為false 冒泡的時(shí)候執(zhí)行
第三個(gè)參數(shù)為true 捕獲的時(shí)候執(zhí)行
不傳則默認(rèn)為false

注意點(diǎn): 如果這個(gè)元素是被點(diǎn)擊的元素,那么捕獲不一定在冒泡之前,順序是由監(jiān)聽順序決定的。

dom事件模型

一直冒泡到body。。。

e.stopPropagation() : 阻止事件傳遞,不阻止默認(rèn)行為
說明: 如果捕獲階段stopPropagation,則后續(xù)捕獲冒泡都不會(huì)觸發(fā)。

e.preventDefault是事件對(duì)象Event的一個(gè)方法,作用是取消一個(gè)目標(biāo)元素的默認(rèn)行為如鏈接<a href="xxx">點(diǎn)我</a>,提交按鈕<input type=”submit”>等

e.preventDefault() : 阻止默認(rèn)行為,不阻止事件傳遞

代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="grand">
    爺爺
    <div id="father">
      爸爸
      <div id="son">
        兒子
      </div>
    </div>
  </div>
</body>
</html>
/*
  先捕獲,再冒泡
  第三個(gè)參數(shù)為false 冒泡的時(shí)候執(zhí)行
  第三個(gè)參數(shù)為true 捕獲的時(shí)候執(zhí)行
  不傳則默認(rèn)為false
  
  注意點(diǎn): 如果這個(gè)元素是被點(diǎn)擊的元素,那么捕獲不一定在冒泡之前,順序是由監(jiān)聽順序決定的。
*/
document.getElementById('son')
.addEventListener('click', function() {
  console.log('son clicked');
}, false);

document.getElementById('son')
.addEventListener('click', function() {
  console.log('son clicked 2');
}, true);


document.getElementById('father')
.addEventListener('click', function() {
  console.log('father clicked');
}, true);

document.getElementById('grand')
.addEventListener('click', function() {
  console.log('grand clicked');
}, false);

document.addEventListener('click', function() {
  console.log('document clicked');
}, false);
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • DOM leave 0: xxx.onclick = function(){ ... } onclick="xxx...
    zzzZink閱讀 380評(píng)論 0 0
  • 什么是DOM? DOM全稱為The Document Object Model,應(yīng)該理解為是一個(gè)規(guī)范,定義了HTM...
    夜舞暗瀾_3ea2閱讀 873評(píng)論 1 3
  • DOM事件模型 從技術(shù)上來說,W3C的DOM標(biāo)準(zhǔn)并不支持上述最原始的添加事件監(jiān)聽函數(shù)的方式,這些都是在DOM標(biāo)準(zhǔn)形...
    Mr_Alpha閱讀 1,447評(píng)論 1 1
  • DOM標(biāo)準(zhǔn)文檔 1. **目前的DOM事件模型標(biāo)準(zhǔn)是Document Object Model Level 2. ...
    朱珠霞閱讀 433評(píng)論 0 1
  • 看一個(gè)人強(qiáng)大不是看他自己本人力量有多大,而是看他本人能夠調(diào)動(dòng)的資源是不是足夠多。 過去什么樣子,未來什么樣子,然后...
    一只愛游泳的貓閱讀 2,120評(píng)論 0 0

友情鏈接更多精彩內(nèi)容