高效能 javaScript 之事件委託(Vue版)
一、概念理解:
1、事件:HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應。比如點選事件、滑鼠移入/移出事件等。事件通常與函式配合使用,這樣就可以通過發生的事件來驅動函式執行。
2、DOM 事件流:冒泡事件流、捕獲事件流。
3、DOM 事件模型:捕獲、目標、冒泡。
那什麼是事件委託呢?
事件委託:即是,一個事件本來是要繫結到某個元素上,然而卻繫結到了該元素的父(或祖先)元素上,利用事件冒泡原理,觸發執行效果。
二、事件委託的優點:
那為什麼要使用事件委託?事件委託有什麼好處,以及使用時要注意什麼?
事件委託大概有兩個優點:
1、提高網頁效能。
2、通過事件委託新增的事件,對後期生成的元素依然有效。
上面提到的第二點如何理解呢?
舉個例子:現在頁面上有個 ul,ul 裡有三個 li,通過迴圈給每個 li 新增點選事件,發現三個 li 到可以正常觸發點選事件了,然後通過 js 程式碼在 ul 裡插入(append)兩個 li,
再試著點選所有 li,發現前面三個 li 正常觸發點選事件,後面新新增的兩個 li 無法正常觸發點選事件。
三、事件委託的使用方法:
使用上面 ul 的例子進行事件委託給每個 li 繫結事件,示例程式碼:
<ul @click="fun($event)" id="list">
<li>1</li>
<li >2</li>
<li>2</li>
</ul>
<script src="./vue.min.js"></script>
<script>
new Vue({
el: '#list',
data: {},
methods : {
fun : function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if (target.nodeName.toLowerCase() === 'li'){
alert('li' + target.nodeName.toLowerCase());
}
}
}
})
</script>
四、事件委託怎麼獲取元素下標(索引值)
示例 demo:
<ul @click="fun(this)" id="list">
<li v-for = "(value,key) in arr">
{{key}}:{{value}}
</li>
</ul>
<style>
body{
margin: 0;
}
ul{
list-style: none;
margin:0 0 0 10px;
padding: 0;
}
ul li{
width: 50px;
height: 50px;
margin-top: 10px;
background-color: red;
cursor: pointer;
}
</style>
<script src="./vue.min.js"></script>
<script>
new Vue({
el: '#list',
data: {
arr:[0,1,2]
},
methods : {
fun : function(ele){
var e = e || window.event;
var target = e.target || e.srcElement;
var li = document.querySelectorAll('li');
for(var i in li){
if(target === li[i]){
var value = parseInt(i);
alert('所點選的li的下標是:' + value);
}
}
}
}
})
</script>
最後說下事件繫結可能帶來的隱患,當頁面非常複雜的情況下,非常容易引起混亂,特別是當多種(個)事件通過事件委託繫結到同一個元素上時。
相關推薦
高效能 javaScript 之事件委託(Vue版)
一、概念理解: 1、事件:HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應。比如點選事件、滑鼠移入/移出事件等。事件通常與函式配合使用,這樣就可以通過發生的事件來驅動函式執行。 2、DOM 事件流:冒泡事件流、捕獲事件流。 3、
JavaScript之事件概念和監聽事件
scrip isp doctype utf itl 技術分享 創建 img ret 1、事件的概念: JavaScript使我們有能力創建動態頁面,網頁中的每一個元素都可以產生某些觸發JavaScript函數的事件。我們可以認為事件是可以被JavaScript偵測到的一種行
JavaScript之事件及動畫
nim 合並 遍歷 post 上下 blog 顯式 綁定 HA 一、事件 常用事件 click(function(){...}) //單擊事件 hover(function(){...}) //鼠標經過事件 blur(function(){...}
高效能JavaScript之載入和執行
JS在瀏覽器中的效能,可以認為是開發者所面臨的最重要的可行性問題。這個問題因JS的阻塞特性變得複雜,也就是說當瀏覽器在執行JS程式碼時,不能同時做其他任何事情。事實上,大多數瀏覽器都使用單一程序來處理UI(使用者介面)更新和JavaScript指令碼執行,所以同一時刻只能做其中一件事情。JS執行過程耗時越久,
JavaScript之事件型別
事件型別 Web瀏覽器中可能發生的事件有很多型別。DOM3事件規定了以下幾類事件: UI事件,當用戶與頁面上的元素互動時觸發; 焦點事件,當元素獲得或失去焦點的時觸發; 滑鼠事件,當用戶通過滑鼠在頁面上執行操作時觸發; 滾輪事件,當用戶通過滑鼠滾輪或類似裝置時
JS學習之事件委託
在學習事件委託時一直是迷茫的,今天看到@凌雲之翼的部落格文,受益匪淺,轉載過來以備記錄,留著學習用,謝謝老師~~~ 概述: 那什麼叫事件委託呢?它還有一個名字叫事件代理,JavaScript高階程式設計上講:事件委託就是利用事件冒泡,只指定一個事件處理程式,就可以管理某一型別的所有事件。那這是什麼意思呢?網上
javascript之事件捕獲和事件冒泡
1. 事件階段 事件分為三個階段:捕獲階段、目標階段和冒泡階段。 捕獲階段: 事件從文件的根節點流向目標物件節點。途中經過各個層次的DOM節點,並在各節點上觸發捕獲事件,直到到達事件的目標節
淺談javascript之事件、函式、方法、物件 各代表何含義,通俗解釋及其之間的關聯與區別
簡單來說: 在javascript中,所有的事件都是通過函式來執行的,函式本身即是動作(針對事件來說),也是方法(針對物件來說)!物件是指的誰觸發了事件,繫結事件的主謀。 【事件】事件就如神經開關,刺
前端系統複習之事件委託
1.概念 事件委託也叫事件代理,JavaScript高階程式設計上講:事件委託就是利用事件冒泡,只指定一個事件處理程式,就可以管理某一型別的所有事件。 用一個形象的例子說明: 有三個同事預計會在週一收到快遞。為簽收快遞,有兩種辦法:一是三個人在公司門口等快
JavaScript之事件處理(監聽)函式
JavaScript之事件處理(監聽)函式事件是使用者和瀏覽器自身進行的特定行為。這些事件都有自己的名字,如click,,load,mouseover。用於響應某個事件而呼叫的函式稱為事件處理函式,或者DOM稱之為事件監聽函式。事件處理函式有兩種分配方式:在JavaScri
JavaScript原生事件委託以及JQuery事件委託on()的程式碼片段
<!DOCTYPE html> <html> <head><title></title> <style type="text/css"> .container{ width:10
JavaScript 之預設行為 DOM2級,事件委託機制
1. 事件預設行為及阻止方式 1.1 瀏覽器的預設行為 JavaScript事件本身所具有的屬性,例如a標籤的跳轉,Submit按鈕的提交,右鍵選單,文字框的輸入等。 1.2 阻止預設行為的方式
輕松學習JavaScript二十七:DOM編程學習之事件模型
經歷 學習 不存在 obj 發生 rip gb2 article 不支持 在介紹事件模型之前,我們先來看什麽是事件和什麽是event對象。 一事件介紹 JavaScript事件是由訪問Web頁面的用戶引起的一系列操作,使
Vue之事件冒泡
htm 執行 src -s ble input spa 按鈕 width 1. 原生事件冒泡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF
JavaScript之Tab標簽(原始版)
html ole body mouseover contents 處理 lin var 封裝 最原始的Tab標簽頁,只需再添加CSS樣式即可,重點在於Tab標簽底部邊框樣式的處理。待完善:代碼的封裝與復用。 <!DOCTYPE html> <html&g
JavaScript之onclick事件
dom asc 方法 text ID HR container log 內聯 對於給同一個元素添加兩個點擊事件時,其中一個是通過js獲取元素添加點擊事件另一個是通過內聯的方法為元素添加事件。 執行之後只會執行通過元素獲取的點擊事件。而內聯式的添加點擊事件是不會執行的 還
BOM之JavaScript常用事件
efault .get pwa FN uoj d+ cli 第一個 crm body, table{font-family: 微軟雅黑; font-size: 10pt} table{border-co
JavaScript之實現一個簡單的Vue
方法 ole tro def pre 一個 進行 this upd vue的使用相信大家都很熟練了,使用起來簡單。但是大部分人不知道其內部的原理是怎麽樣的,今天我們就來一起實現一個簡單的vue。 Object.defineProperty() 實現之前我們得先看一下Obje
JavaScript高階程式設計之事件
當用戶按下某個按鈕是,就會觸發對應事件,事件在執行註冊事件時,繫結的程式,實現一次成功的瀏覽器與JS之間的互動。其中事件基於設計模式中的觀察者模式原理實現,但又有些不同,事件它還擁有著一些屬於自己的特點。 事件流 事件冒泡是IE的產物,它的流向,是自下向上,從繫結事件的具體元素開始,一直流到具體元素的
js事件流之事件冒泡的應用----事件委託
什麼是事件委託? 它還有一個名字叫事件代理。 JavaScript高階程式設計上講: 事件委託就是利用事件冒泡,只指定一個事件處理程式,就可以管理某一型別的所有事件。 用取快遞來解釋這個現象,大家認真領會一下事件委託到底是一個什麼原理: 有三個同事預計會在週一收到快遞。為簽收快遞,有兩種辦法:一