簡述事件捕獲和事件冒泡的區別


object基類:

  function array number Boolean string date math  regexp

事件:

  瀏覽器客戶端上客戶觸發的行為都稱為事件

  所有的事件都是天生自帶的,不需要我們去綁定,只需要我們去觸發;

通過obj.事件名=function(){}

  事件名:onmouseup;onmousedown;onclick。。。

  當用戶觸發一個事件時,瀏覽器所有的詳細信息都存在一個叫event的對象上;我們把它叫事件對象。

  所有事件在綁定方法的時候,天生自帶一個參數叫event

鼠標的坐標:

  event.clientX  event.clientY

event的兼容性:

  在谷歌(Chrome)下event是undefined

  在IE低版本(6-8)下event是null  

  在火狐下會報錯

  document.onclick=function(ev){

    var ev=ev||window.event

  }

事件冒泡:

  當給父子元素的同一事件綁定方法的時候,觸發子元素身上的事件,執行完畢之后,也會觸發父級元素相同的事件,這種機制叫事件冒泡

取消事件冒泡:

  event.stopProPagation?event.stoppropagation():event.cancelbubble=true;

事件捕獲:

  給父子元素用addeventlistener()綁定同一事件時,當觸發子元素身上的事件時,先觸發父元素,然后在傳遞給子元素,這種傳播機制叫事件捕獲;

  給一個元素綁定事件,普通寫法(dom0級)---

    obj.onclick=function(){}  后者會覆蓋掉前者

  事件綁定第二種寫法:(dom2級)---

    標准:addeventlistener

    非標准:attach

  addeventlistener(參數1,參數2,參數3)

    參數1:事件名,  參數2:事件函數  參數3:布爾值,(是否捕獲,默認false,不捕獲但是冒泡)

  IE低版本沒有捕獲

  普通事件寫法沒有捕獲(會覆蓋)

addeventlistener和attachevent二者區別:

  addeventlistener            attachevent

    事件名不帶on              事件名帶on

    this指向當前元素            this指向window

    標准瀏覽器                IE低版本

    有冒泡有捕獲              只有冒泡

call和apply:

  改變函數內this指向  xxx.call()      xxx.apply()

  call()中的第一個參數是null的時候,函數里面的this是指向原來的,不變

*所有事件都是異步的

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM