摘要:在這個事件發生期間,調用可阻止滾動當手指從屏幕上移開時觸發。關于此事件的確切觸發事件,文檔中沒有明確說明。特定于事件目標的對象的數組。
JS事件模型
事件模型以及周邊
事件捕獲
事件冒泡
事件觸發
移動端事件模擬
事件委托
事件流 事件捕獲(event capturing)&事件冒泡(event bubbling)W3C模型給inner,out均綁定點擊事件.點擊inner,如果out先執行,inner后執行.則是事件捕獲.若inner先執行.out后執行則是事件冒泡.(這兩種模型來自于早期瀏覽器之爭)
示例演示先事件捕獲,到達目標后再進行冒泡
out.addEventListener("click", (e) => { console.log("out clicked! ") }, true) inner.addEventListener("click", (e) => { console.log("inner clicked! ") }, false) document.addEventListener("click", (e) => { console.log("document clicked! ") }, true)
out.addEventListener("click", (e) => { console.log("out clicked! ") }, true) inner.addEventListener("click", (e) => { console.log("inner clicked! ") }, false) document.addEventListener("click", (e) => { console.log("document clicked! ") }, false)
ele.onclick = function (){ // }事件解除綁定
ele.onclick = null;2.DOM2級事件(默認發生在冒泡階段,由第三個參數決定,可綁定多個事件) 事件綁定
ele.addEventListener(eventType, handler, useCapture)//eventType不帶on,如click //IE下用attachEvent ele.attachEvent(eventType, handler);事件解除綁定
ele.removeEventListener(eventType, handler, useCapture) //IE下使用detachEvent ele.detachEvent(eventType, handler);事件對象 DOM事件模型中的事件對象常用屬性:
type用于獲取事件類型
target獲取事件目標
stopPropagation()阻止事件冒泡
preventDefault()阻止事件默認行為
IE事件模型中的事件對象常用屬性:srcElement獲取事件目標
cancelBubble阻止事件冒泡
returnValue阻止事件默認行為
兼容處理var eventUtil = { addEvent: function(ele, event, func, bool) { bool = bool || false; if (ele.addEventListener) { ele.addEventListener(event, func, bool) } else { ele.attachEvent("on" + event, func, bool); } }, removeEvent: function(ele, event, func, bool) { bool = bool || false; if (ele.removeEventListener) { ele.removeEventListener(event, func, bool); } else { ele.detachEvent("on" + event, func, bool); } }, getEvent: function(event) { return event || window.event; }, getTarget: function(event) { return event.target || event.srcElement; }, preventDefault:function (event) { if (event.preventDefault) { event.preventDefault(); }else { event.returnValue = false;//IE } }, stopPropagation:function (event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true;//IE } } };移動端事件 Touch事件
touchstart:當手指觸摸屏幕時觸發;即使已經有一個手指放在了屏幕上也會觸發。
touchmove:當手指在屏幕上滑動時連續的觸發。在這個事件發生期間,調用preventDefault()可阻止滾動
touchend:當手指從屏幕上移開時觸發。
touchcancel:當系統停止跟蹤觸摸時觸發。關于此事件的確切觸發事件,文檔中沒有明確說明。
以上事件的event對象上面都存在如下屬性:
touches:表示當前跟蹤的觸摸操作的Touch對象的數組。
targetTouches:特定于事件目標的Touch對象的數組。
changeTouches:表示自上次觸摸以來發生了什么改變的Touch對象的數組。
每個Touch對象包含下列屬性:
identifier:表示觸摸的唯一ID。
clientX:觸摸目標在視口中的X坐標。
clientY:觸摸目標在視口中的Y坐標。
pageX:觸摸目標在頁面中的x坐標。
pageY:觸摸目標在頁面中的y坐標。
screenX:觸摸目標在屏幕中的x坐標。
screenY:觸摸目標在屏幕中的y坐標。
target:觸摸的DOM節點坐標
touchstart =>touchmove =>touchend =>click(延遲300~200ms)
Tap事件封裝原理:利用touchstart =>touchmove =>touchen模擬click
HTMLElement.prototype.tap = function (handler,interval) { that = this this.isMove = false, this.startTime = 0, this.addEventListener("touchstart",function(e){ startTime = Date.now(); }), this.addEventListener("touchmove",function(e){ isMove = true; }), this.addEventListener("touchend",function(e){ if(!this.isMove && (Date.now()-startTime) < interval){ handler(); } this.isMove = false; this.startTime = 0; }) };事件委托
把本應綁定在自身的事件綁定到其他元素上來觸發即事件委托
//HTML
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82112.html
摘要:道阻且長啊前端面試總結前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進按鈕書簽目錄瀏覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構建的,使用自主研發的渲染引擎,和都使用網絡用來 道阻且長啊TAT(前端面試總結) 前端 面試 筆試 面試 騰訊一面 1.瀏覽器工作原理 瀏覽器的主要組件包括: 用戶界面- 包括地址欄、后退/前...
摘要:道阻且長啊前端面試總結前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進按鈕書簽目錄瀏覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構建的,使用自主研發的渲染引擎,和都使用網絡用來 道阻且長啊TAT(前端面試總結) 前端 面試 筆試 面試 騰訊一面 1.瀏覽器工作原理 瀏覽器的主要組件包括: 用戶界面- 包括地址欄、后退/前...
摘要:道阻且長啊前端面試總結前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進按鈕書簽目錄瀏覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構建的,使用自主研發的渲染引擎,和都使用網絡用來 道阻且長啊TAT(前端面試總結) 前端 面試 筆試 面試 騰訊一面 1.瀏覽器工作原理 瀏覽器的主要組件包括: 用戶界面- 包括地址欄、后退/前...
摘要:全部代碼是一個先執行一個執行過程中遇到等異步操作則創建一個遇到等創建一個這兩個分別被掛起執行棧為空時開始處理完成后處理直到該全部執行完然后繼續主線程調用棧注每一次事件循環,只處理一個。 JS異步原理(事件,隊列) 調用棧 JS執行時會形成調用棧,調用一個函數時,返回地址、參數、本地變量都會被推入棧中,如果當前正在運行的函數中調用另外一個函數,則該函數相關內容也會被推入棧頂.該函數執...
閱讀 1379·2023-04-25 18:34
閱讀 3437·2021-11-19 09:40
閱讀 2824·2021-11-17 09:33
閱讀 2935·2021-11-12 10:36
閱讀 2823·2021-09-26 09:55
閱讀 2653·2021-08-05 10:03
閱讀 2512·2019-08-30 15:54
閱讀 2861·2019-08-30 15:54