原生js事件批量繫結-事件委託
我們常常會遇到一個需求,就是給表格裡面的每個特定的td繫結一個事件.
遇到這種需求,很多人基本都會想到如下程式碼:
var td = document.getElementsByTagName("td");
for( let i =0; i<td.length; i++){
td[i].onclick = function(){
//事件處理
}
}
以上程式碼的確可以正常執行,但是當該類td很多是,效率會很低,佔用的記憶體也會很大。
而比較好的方法是用事件委託的機制,事件委託主要是依靠一下兩個特性。
1.瀏覽器事件的冒泡機制
瀏覽器的事件發生有一般有三個階段(IE瀏覽器事件沒有捕獲階段)。
事件捕獲 ->事件目標 ->事件冒泡,事件冒泡會將事件從事件目標節點處一級一級向父節點傳播,直到document物件。換句話說,我們可以在父節點處理子節點的事件。2.事件物件的 event.target指向事件目標,即是事件發生的的具體節點
下面是事件委託的方法
這裡假設只有一個table,且將事件的處理繫結到table中,當然也可以繫結在body或者td的父元素或其他祖先元素裡。
var table = document.getElementsByTagName("table")[0];
if(window.attachEvent){
table.attachEvent("onclick",function(event){
//event.target即是點選處的元素。
if(event.target.nodeName !== "TD" ){//這裡通過元素名稱過濾,也可以通過其他方法過濾。 return;
}
//事件處理邏輯
});
} else{
table.addEventListener("click",function(event){
if(event.target.nodeName !== "TD"){//這裡通過元素名稱過濾,也可以通過其他方法過濾。 return;
}
//事件處理邏輯
});
}
以上事件過濾是因為事件委託時,table下所有的元素都會觸發事件,而我們需要處理的只是固定td而已。所以對與其他元素的事件,我們不用處理。
相關推薦
原生js事件批量繫結-事件委託
我們常常會遇到一個需求,就是給表格裡面的每個特定的td繫結一個事件. 遇到這種需求,很多人基本都會想到如下程式碼: var td = document.getElementsByTagName("td"); for( let i =0; i<
js解決動態繫結事件時不能傳參的問題
問題描述: js使用dom給元素繫結事件時如果直接傳入引數, 會有傳參失敗並且語句會執行並沒有成功繫結事件的情況 舉個例子,假如我們有一個div (id="div1"), 我們想給它繫結一個onclick事件並傳入字串引數: (錯誤案例, 會導致如上後果) var div=doc
JS與jQuery繫結事件的寫法
js 1.直接在html標籤中繫結 在html標籤中新增“on”+事件名稱的屬性來繫結事件 <button type="button" id="btn" onclick="alert(1)">點選</button> 2.在DOM元素上繫結 DOM元素新增‘
js用addeventlistener繫結事件,阻止預設事件。
var linkG = document.getElementById('g'); linkG.addEventListener('click', function(e){ test();
JS事件之繫結事件
JS中的事件是js中很重要的一部分內容,充分理解事件機制是必不可少的。 JS中事件分類: 滑鼠事件:onclick, ondbclick, onmouseover,onmousedown, onmo
用js給div繫結事件,實現點選切換效果的幾種方式總結
用js給div繫結事件,實現點選切換效果,總結有如下幾種方式 script type="text/javascript"> function btnAction() { var titleNValue = document.getElementBy
前端(十五)—— JavaScript事件:繫結事件方式、事件的冒泡和預設事件、滑鼠事件、鍵盤事件、表單 事件、文件事件、圖片事件、頁面事件
JS事件:繫結事件方式、事件的冒泡和預設事件、滑鼠事件、鍵盤事件、表單 事件、文件事件、圖片事件、頁面事件 一、事件的兩種繫結方式 ******* 1、on事件繫結方式 document.onclick = function() { console.log("文件點選"); } // on事件只
jQuery鍵盤事件,繫結事件與移除事件,複合事件
鍵盤事件是指每次按下或者釋放鍵盤上得按鍵時所產生的事件,常用的鍵盤事件的方法: keydown() :按下鍵盤時觸發的事件方法; keyup() :釋放按鍵時觸發的事件方法; keypress() :產生可列印的字元時觸發的事件
原生js實現雙向繫結資料,實現前端提交到後臺
問題 專案開發遇到一個問題,就是在提交到後臺的時候遇到一個請求甲方資料,來實現在新增資料的時候,將請求到甲方的資料展示在前端頁面,讓甲方看到他到底添加了哪些資料。因此,使用到了雙向繫結,來顯示彈框中我們選中的資料庫。 使用到技術 使用了boot
原生JS繫結事件的相容性寫法與繫結事件的幾種方法
繫結事件算是DOM操作裡面最基本的事情了,通常繫結事件的方式有以下一種: 1.形如內聯樣式的時間繫結: <input typ
原生js繫結事件方法簡單封裝
const ListenerFN = function ({ target, event, FN, option = {} }) { if (target, event, FN) Error('ta
原生js和jquery框架下繫結事件的方法
一、原生js的事件的繫結 1、通過JavaScript物件屬性進行繫結 document.getElementById("test1").onclick=function(){alert("你好!")}; document.getElementsByTagName ("te
js 回車鍵繫結事件
<label class="col-sm-1 control-label">快速搜尋<span style="color:red;"> </span> </label>
關於js中繫結事件失效問題
相信很多開始學習前端開發的朋友都發生過繫結事件失效的問題,那麼究竟是什麼原因使得事件失效呢? 這裡作者以jquery庫編寫作為例子。 第一種:直接失效。 <html> <head> <script type="text/javascript" src="/j
js繫結事件相容性寫法
<html> <body> <div id="div1">點我繫結事件</div> <script> var addEvent = function( elem, type, handler ){ //重寫addEvent的好處是下一次呼叫時
python學習之網站的編寫(HTML,CSS,JS)(二十一)----------事件(例如點選事件等)及繫結事件的幾種方式
事件:什麼叫做事件呢,就是我們在頁面中的一些滑鼠和鍵盤操作,比如onclick就是點選事件,然後我們將介紹幾種繫結事件的方式。 1.在標籤中繫結 <div onclick="fuc()"></div> <script> fun
中文輸入法觸發input事件 js繫結事件:addEventListener和on的區別 select下拉框用empty()方法 清空option
中文輸入法觸發input事件 compositionstart 當瀏覽器有非直接的文字輸入時, compositionstart事件觸發. compositionend 當瀏覽器是直接的文字輸入時, compositionend事件觸發 解決方法: 這裡還有一個問題: 在有些瀏
iframe js獲取父級元素資訊,設定css樣式 和繫結事件
獲取iframe 父級id 為objid的內容。 $('#objid',window.parent.document).val(""); 初始化為iframe 父級 id為cancel1繫結事件 $('#cancel1',window.parent.document).
【Vue.js學習筆記】3:資料繫結,事件繫結
資料繫結 使用Vue時在Vue物件的el欄位中要指定一下根容器,這裡用id選擇器。這個例子同時學習了data和methods的基本用法。 資料繫結(data-binding)可以將Vue物件中的data的值繫結到HTML標籤中的某些位置,則修改時只需要修改物件中相應data的值即
在js還沒有載入上來的時候,怎麼給dom 繫結事件
這就要用到事件委託了 如何進行事件委託 **(1) 當存在多個元素可以共用同一個監聽器。** 例子:當想要點選li來觸發事件的時候,第一種方法是為每個li都繫結一個監聽器,但當li很多時,這樣處理就過於繁瑣。為了減少dom 的操作,我們可以利用事件委託交給父級元素ul來