欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

全面了解addEventListener和on的區(qū)別

 更新時(shí)間:2016年07月14日 09:26:57   投稿:jingxian  
下面小編就為大家?guī)硪黄媪私鈇ddEventListener和on的區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

為什么需要addEventListener?

先來看一個(gè)片段:

html代碼

<div id="box">追夢子</div>

用on的代碼

window.onload = function(){
  var box = document.getElementById("box");
  box.onclick = function(){
    console.log("我是box1");
  }
  box.onclick = function(){
    box.style.fontSize = "18px";
    console.log("我是box2");
  }
}
     運(yùn)行結(jié)果:“我是box2”

看到了吧,第二個(gè)onclick把第一個(gè)onclick給覆蓋了,雖然大部分情況我們用on就可以完成我們想要的結(jié)果,但是有時(shí)我們又需要執(zhí)行多個(gè)相同的事件,很明顯如果用on完成不了我們想要的,那不用猜,你們肯定知道了,對!addEventListener可以多次綁定同一個(gè)事件并且不會(huì)覆蓋上一個(gè)事件。

用addEventListener的代碼

window.onload = function(){
  var box = document.getElementById("box");
  box.addEventListener("click",function(){
    console.log("我是box1");
  })
  box.addEventListener("click",function(){
    console.log("我是box2");
  })
}
    運(yùn)行結(jié)果:我是box1
         我是box2

addEventListenert方法第一個(gè)參數(shù)填寫事件名,注意不需要寫on,第二個(gè)參數(shù)可以是一個(gè)函數(shù),第三個(gè)參數(shù)是指在冒泡階段還是捕獲階段處理事件處理程序,如果為true代表捕獲階段處理,如果是false代表冒泡階段處理,第三個(gè)參數(shù)可以省略,大多數(shù)情況也不需要用到第三個(gè)參數(shù),不寫第三個(gè)參數(shù)默認(rèn)false

第三個(gè)參數(shù)的使用

有時(shí)候的情況是這樣的

<body>
  <div id="box">
    <div id="child"></div>
  </div>
</body>

如果我給box加click事件,如果我直接單擊box沒有什么問題,但是如果我單擊的是child元素,那么它是怎么樣執(zhí)行的?(執(zhí)行順序)

box.addEventListener("click",function(){
  console.log("box");
})

child.addEventListener("click",function(){
  console.log("child");
})
  執(zhí)行的結(jié)果:
        child
        box

也就是說,默認(rèn)情況事件是按照事件冒泡的執(zhí)行順序進(jìn)行的。

如果第三個(gè)參數(shù)寫的是true,則按照事件捕獲的執(zhí)行順序進(jìn)行的。

box.addEventListener("click",function(){
  console.log("box");
},true)

child.addEventListener("click",function(){
  console.log("child");
})
  執(zhí)行的結(jié)果:
        box
        child

事件冒泡執(zhí)行過程:

從最具體的的元素(你單擊的那個(gè)元素)開始向上開始冒泡,拿我們上面的案例講它的順序是:child->box

事件捕獲執(zhí)行過程:

從最不具體的元素(最外面的那個(gè)盒子)開始向里面冒泡,拿我們上面的案例講它的順序是:box->child

以上這篇全面了解addEventListener和on的區(qū)別就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript數(shù)據(jù)類型轉(zhuǎn)換的注意事項(xiàng)

    JavaScript數(shù)據(jù)類型轉(zhuǎn)換的注意事項(xiàng)

    JavaScript是一種無類型語言,但同時(shí)JavaScript提供了一種靈活的自動(dòng)類型轉(zhuǎn)換的處理方式?;疽?guī)則是,如果某個(gè)類型的值用于需要其他類型的值的環(huán)境中,JavaScript就自動(dòng)將這個(gè)值轉(zhuǎn)換成所需要的類型。
    2016-07-07
  • 詳解基于Wepy開發(fā)小程序插件(推薦)

    詳解基于Wepy開發(fā)小程序插件(推薦)

    這篇文章主要介紹了詳解基于Wepy開發(fā)小程序插件(推薦),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-08-08
  • 解決html input驗(yàn)證只能輸入數(shù)字,不能輸入其他的問題

    解決html input驗(yàn)證只能輸入數(shù)字,不能輸入其他的問題

    下面小編就為大家?guī)硪黄鉀Qhtml input驗(yàn)證只能輸入數(shù)字,不能輸入其他的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-07-07
  • JavaScript 繼承詳解 第一篇

    JavaScript 繼承詳解 第一篇

    幾乎每個(gè)開發(fā)人員都有面向?qū)ο笳Z言(比如C++、C#、Java)的開發(fā)經(jīng)驗(yàn)。 在傳統(tǒng)面向?qū)ο蟮恼Z言中,有兩個(gè)非常重要的概念 - 類和實(shí)例。
    2009-08-08
  • 在Bootstrap開發(fā)框架中使用dataTable直接錄入表格行數(shù)據(jù)的方法

    在Bootstrap開發(fā)框架中使用dataTable直接錄入表格行數(shù)據(jù)的方法

    這篇文章主要介紹了在Bootstrap開發(fā)框架中使用dataTable直接錄入表格行數(shù)據(jù)的方法,這個(gè)可以提高數(shù)據(jù)的錄入方便,特別是在一些簡單業(yè)務(wù)的明細(xì)數(shù)據(jù)的時(shí)候,看起來會(huì)比彈出窗口錄入方便一些,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2018-10-10
  • 鼠標(biāo)滑過出現(xiàn)預(yù)覽的大圖提示效果

    鼠標(biāo)滑過出現(xiàn)預(yù)覽的大圖提示效果

    這篇文章主要介紹了如何實(shí)現(xiàn)鼠標(biāo)滑過出現(xiàn)預(yù)覽的大圖提示效果,需要的朋友可以參考下
    2014-02-02
  • JavaScript中的console.profile()函數(shù)詳細(xì)介紹

    JavaScript中的console.profile()函數(shù)詳細(xì)介紹

    這篇文章主要介紹了JavaScript中的console.profile()函數(shù)詳細(xì)介紹,本文講解了console.profile()函數(shù)的瀏覽器支持情況、console.profile()的使用、Firebug中Profile按鈕的使用等內(nèi)容,需要的朋友可以參考下
    2014-12-12
  • js判斷某個(gè)方法是否存在實(shí)例代碼

    js判斷某個(gè)方法是否存在實(shí)例代碼

    這篇文章主要介紹了js判斷某個(gè)方法是否存在的實(shí)例代碼,可用于檢測js中的方法是否可用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-01-01
  • layui table單元格事件修改值的方法

    layui table單元格事件修改值的方法

    今天小編就為大家分享一篇layui table單元格事件修改值的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • JS中setTimeout的巧妙用法前端函數(shù)節(jié)流

    JS中setTimeout的巧妙用法前端函數(shù)節(jié)流

    這篇文章主要介紹了JS中setTimeout的巧妙用法前端函數(shù)節(jié)流 的相關(guān)資料,需要的朋友可以參考下
    2016-03-03

最新評(píng)論