JS---DOM---事件冒泡和阻止事件冒泡，總結事件

-Advertisement-

事件冒泡: 多個元素嵌套, 有層次關係 ,這些元素都註冊了相同的事件, 如果裡面的元素的事件觸發了, 外面的元素的該事件自動的觸發了事件有三個階段: 1.事件捕獲階段 :從外向內 2.事件目標階段 :最開始選擇的那個 3.事件冒泡階段 : 從裡向外為元素綁定事件 addEventListener ...

事件冒泡: 多個元素嵌套, 有層次關係 ,這些元素都註冊了相同的事件, 如果裡面的元素的事件觸發了, 外面的元素的該事件自動的觸發了

事件有三個階段:

1.事件捕獲階段 :從外向內 2.事件目標階段 :最開始選擇的那個 3.事件冒泡階段 : 從裡向外

為元素綁定事件

addEventListener("沒有on的事件類型", 事件處理函數, 控制事件階段的) 事件觸發的過程中, 可能會出現事件冒泡的效果, 為了阻止事件冒泡---> window.event.cancelBubble=true;谷歌,IE8支持,火狐不支持 window.event就是一個對象,是IE中的標準 e.stopPropagation();阻止事件冒泡---->谷歌和火狐支持 window.event和e都是事件參數對象,一個是IE的標準,一個是火狐的標準事件參數e在IE8的瀏覽器中是不存在,此時用window.event來代替 addEventListener中第三個參數是控制事件階段的事件的階段有三個: 通過e.eventPhase這個屬性可以知道當前的事件是什麼階段你的如果這個屬性的值是: 1---->捕獲階段 2---->目標階段 3---->冒泡 一般預設都是冒泡階段,很少用捕獲階段-----> 冒泡階段:從裡向外 冒泡階段:從裡向外捕獲階段:從外向內

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

小程式填坑——bindconfirm事件

一.介紹當你要在手機軟鍵盤中觸發一些方法,就可以使用input標簽的bindconfirm事件.這個事件的作用是當你在軟鍵盤上點擊確認的時候,將觸發你指定的方法. 還可以使用confirm-type指定軟鍵盤上確認按鈕的名稱.比如你用這個來做搜索框,那麼你就可以指定為confirm-type=“s ...
JS---DOM---課程中涉及到的common.js

//格式化日期的代碼 //獲取指定標簽對象 //獲取元素的文本內容 //獲取元素的文本內容 //獲取父級元素中的第一個子元素 //獲取父級元素中的最後一個子元素 //獲取某個元素的前一個兄弟元素 //獲取某個元素的後一個兄弟元素 //獲取某個元素的所有兄弟元素 //返回當前瀏覽器是什麼類型的瀏覽器 ...
JS---DOM---案例：模擬百度搜索框

模擬百度搜索框我的思路整理： 1. 註冊文本框抬起事件(onkeyup) 2. 處理函數： >創建臨時數組，迴圈遍歷文本框鍵入的文字內容和keywords數組，用keyWords[i].indexOf(text) == 0 來判斷，true就追加進臨時數組tempArr.push(keyWords ...
reselect是怎樣提升react組件渲染性能的？

reselect是什麼？ "reselect" 是配合使用的一款輕量型的狀態選擇庫，目的在於當store中的state重新改變之後，使得局部未改變的狀態不會因為整體的state變化而全部重新渲染，功能有點類似於組件中的生命周期函數，但是它們並不是一個東西。下麵是官方的一些簡介： Selector ...
前端開發必備：nvm與npm與nrm

nvm Node.js version manager ，推薦使用它來安裝 node.js 。 "Mac 版項目地址" "Windows 版項目地址" windows 版安裝進入 "下載頁" 找到安裝包：跟著引導安裝即可。輸入查看是否安裝成功，成功的話如下圖所示。如果提示找不到命令， "請看 ...
JS---DOM---為同一個元素綁定多個不同事件指向同一個事件處理函數

為同一個元素綁定多個不同事件指向同一個事件處理函數 1. 用了switch(e.type){} 來修改 2. break <input type="button" value="小蘇" id="btn" /> <script src="common.js"></script> <script> // ...
div拖拽效果 JQuery

div拖拽效果 JQuery ...
如何渲染幾萬條數據並不卡住界面？

如何渲染幾萬條數據並不卡住界面？如何在不卡住頁面的情況下渲染數據，也就是說不能一次性將幾萬條都渲染出來，而應該一次渲染部分 DOM，那麼就可以通過 requestAnimationFrame 來每 16 ms 刷新一次。 <!DOCTYPE html> <html lang="en"> <he ...