首頁 web前端 js教程 淺析js的事件綁定&事件監聽&事件委託的之間內容

淺析js的事件綁定&事件監聽&事件委託的之間內容

Aug 23, 2018 pm 03:01 PM
事件委託 事件監聽 事件綁定

這篇文章帶給大家的內容是關於淺析js的事件綁定&事件監聽&事件委託的之間內容,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

1、事件綁定
要讓 JavaScript 對使用者的操作做出回應,首先要對 DOM 元素綁定事件處理函數。所謂事件處理函數,就是處理使用者操作的函數,不同的操作對應不同的名稱。
有三種常用的綁定事件的方法:
(1)在DOM中直接綁定事件
我們可以在DOM元素上綁定onclick 、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等。

<input type="button" value="click me" onclick="hello()"><script>
function hello(){
    alert("hello world!");
}
</script>
登入後複製

(2)在JavaScript程式碼中綁定事件
在JavaScript程式碼中(即script 標籤內)綁定事件可以讓JavaScript程式碼與HTML標籤分離,文件結構清晰,便於管理和開發。

<input type="button" value="click me" id="btn"><script>
document.getElementById("btn").onclick = function(){
    alert("hello world!");
}
</script>
登入後複製

(3)使用事件監聽綁定事件
綁定事件的另一種方法是用 addEventListener() 或 attachEvent() 來綁定事件監聽函式。
事件監聽
關於事件監聽,W3C規範中定義了3個事件階段,依序是捕捉階段、目標階段、冒泡階段。
W3C規格

element.addEventListener(event, function, useCapture)
登入後複製

event : (必要)事件名,支援所有 DOM事件 。
function:(必要)指定要事件觸發時執行的函數。
useCapture:(可選)指定事件是否在擷取或冒泡階段執行。 true,捕獲。 false,冒泡。預設false。

<input type="button" value="click me" id="btn1"><script>
document.getElementById("btn1").addEventListener("click",hello);
function hello(){
    alert("hello world!");
}
</script>
登入後複製

IE標準

element.attachEvent(event, function)
登入後複製

event:(必要)事件類型。需加“on“,例如:onclick。
function:(必要)指定要事件觸發時執行的函數。

<input type="button" value="click me" id="btn2"><script>
document.getElementById("btn2").attachEvent("onclick",hello);
function hello(){
    alert("hello world!");
}
</script>
登入後複製

事件監聽的優點
1、可以綁定多個事件。
常規的事件綁定只執行最後綁定的事件。而事件監聽可以執行多個函數。

<input type="button" value="click me" id="btn4"><script>
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);
function hello1(){
    alert("hello 1");
}
function hello2(){
    alert("hello 2");
}
</script>
登入後複製

2、可以解除對應的綁定

<input type="button" value="click me" id="btn5"><script>
var btn5 = document.getElementById("btn5");
btn5.addEventListener("click",hello1);//执行了
btn5.addEventListener("click",hello2);//不执行
btn5.removeEventListener("click",hello2);
function hello1(){
    alert("hello 1");
}
function hello2(){
    alert("hello 2");
}
</script>
登入後複製

封裝事件監聽

<input type="button" value="click me" id="btn5">//绑定监听事件
function addEventHandler(target,type,fn){
    if(target.addEventListener){
        target.addEventListener(type,fn);
    }else{
        target.attachEvent("on"+type,fn);
    }
}//移除监听事件
function removeEventHandler(target,type,fn){
    if(target.removeEventListener){
        target.removeEventListener(type,fn);
    }else{
        target.detachEvent("on"+type,fn);
    }
}
登入後複製

事件擷取:事件擷取指的是從document到觸發事件的那個節點,也就是自上而下的去觸發事件。
事件冒泡:是自下而上的去觸發事件。綁定事件方法的第三個參數,就是控制事件觸發順序是否為事件擷取。 true,事件捕獲;false,事件冒泡。預設false,即事件冒泡。

<p id="parent">
  <p id="child" class="child"></p>
</p>

document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发,"+this.id);
            })
            document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发,"+this.id)
            })

child事件被触发,child
parent事件被触发,parent
登入後複製

結論:先child,然後parent。事件的觸發順序自內向外,這就是事件冒泡。
現在改變第三個參數的值為true:

document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发,"+e.target.id);
            },true)
            document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发,"+e.target.id)
            },true)parent事件被触发,parentchild事件被触发,child
登入後複製

結論:先parent,然後child。事件觸發順序變更為自外向內,這就是事件捕獲。

阻止事件冒泡,阻止預設事件
event.stopPropagation()方法:這是阻止事件的冒泡方法,不讓事件向documen上蔓延,但是預設事件任然會執行,當你掉用這個方法的時候,如果點擊一個連接,這個連接仍然會被打開。
event.preventDefault()方法:這是阻止預設事件的方法,呼叫此方法是,連接不會被打開,但是會發生冒泡,冒泡會傳遞到上一層的父元素
return false:這個方法比較暴力,他會同事阻止事件冒泡也會阻止預設事件;寫上此程式碼,連線不會被打開,事件也不會傳遞到上一層的父元素;可以理解為return false就等於同時呼叫了event.stopPropagation()和event.preventDefault()

2.事件委託
事件委託就是利用冒泡的原理,把事件加到父元素或祖先元素上,觸發執行效果。

<input type="button" value="click me" id="btn6">
var btn6 = document.getElementById("btn6");
document.onclick = function(event){    
event = event || window.event;    
var target = event.target || event.srcElement;    
if(target == btn6){
        alert(btn5.value);
    }
}
登入後複製

事件委託優點
1、提升JavaScript效能。事件委託可以顯著的提高事件的處理速度,減少記憶體的佔用

<ul id="list">
  <li id="item1" >item1</li>
  <li id="item2" >item2</li>
  <li id="item3" >item3</li></ul><script>
  var item1 = document.getElementById("item1");
  var item2 = document.getElementById("item2");
  var item3 = document.getElementById("item3");

document.addEventListener("click",function(event){
    var target = event.target;    
    if(target == item1){
        alert("hello item1");
    }else if(target == item2){
        alert("hello item2");
    }else if(target == item3){
        alert("hello item3");
    }
})</script>
登入後複製

2、動態的加入DOM元素,不需要因為元素的改變而修改事件綁定。

<ul id="list">
  <li id="item1" >item1</li>
  <li id="item2" >item2</li>
  <li id="item3" >item3</li></ul><script>var list = document.getElementById("list");

document.addEventListener("click",function(event){
    var target = event.target;    
    if(target.nodeName == "LI"){
        alert(target.innerHTML);
    }
})
var node=document.createElement("li");
var textnode=document.createTextNode("item4");
node.appendChild(textnode);
list.appendChild(node);
</script>
登入後複製

  相關建議:

白談jquery之on()綁定事件與off()解除綁定事件

############################## ##淺談JavaScript事件綁定的常用方法及其優缺點分析######

以上是淺析js的事件綁定&事件監聽&事件委託的之間內容的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

jquery綁定事件有幾種方式? jquery綁定事件有幾種方式? Nov 09, 2020 pm 03:30 PM

jquery綁定事件有4種方式,分別為:bind()、live()、delegate()和on()方法;其中bind()方法只能針對已經存在的元素進行事件的綁定,而live( )、on()、delegate()皆支援未來新新增元素的事件綁定。

解決UniApp報錯:'xxx'事件未綁定的問題 解決UniApp報錯:'xxx'事件未綁定的問題 Nov 25, 2023 am 10:56 AM

使用UniApp開發應用程式時,可能會遇到以下錯誤提示:'xxx'事件未綁定。這是由於UniApp的事件綁定機制所導致的,需要正確設定才能解決問題。一、問題原因在UniApp中,頁面元件的事件綁定是透過v-on指令完成的。例如,在範本中加入按鈕元件:&lt;button@click="onClick"&gt;點擊我&lt;/butto

有效阻止事件冒泡的方法 有效阻止事件冒泡的方法 Feb 19, 2024 pm 08:25 PM

如何有效地阻止事件冒泡,需要具體程式碼範例事件冒泡是指當一個元素上的事件觸發時,父級元素也會收到相同的事件觸發,這種事件傳遞機制有時會為網頁開發帶來麻煩,因此我們需要學習如何有效地阻止事件冒泡。在JavaScript中,我們可以透過使用事件物件的stopPropagation()方法來阻止事件冒泡。該方法可以在事件處理函數中調用,以停止事件繼續傳播到父級元素。

利用JavaScript和騰訊地圖實現地圖事件監聽功能 利用JavaScript和騰訊地圖實現地圖事件監聽功能 Nov 21, 2023 pm 04:10 PM

很抱歉,但我無法為您提供完整的程式碼範例。不過我可以為您提供一個基本的思路和範例程式碼段,以供參考。以下是一個簡單的JavaScript和騰訊地圖結合的範例,用於實現地圖事件監聽的功能://引入騰訊地圖的APIconstscript=document.createElement('script');script.src='https://map.

怎麼給元素添加事件? JS綁定事件三種方式解析 怎麼給元素添加事件? JS綁定事件三種方式解析 Aug 04, 2022 pm 07:27 PM

javascript作為腳本語言, 可以為頁面上的元素綁定事件,用於在指定事件發生時能自動調用相應的事件處理程序處理事件。那怎麼給元素添加事件?以下這篇文章跟大家介紹一下JS綁定事件三種方式,希望對大家有幫助!

jquery綁定事件有什麼作用 jquery綁定事件有什麼作用 Mar 20, 2023 am 10:52 AM

jquery綁定事件的作用:將普通的事件event綁定在DOM節點上,當DOM節點選取時,將事件與之綁定,方便使用者提供對應的動作。 jQuery中提供了四種事件綁定方式,分別是bind、live、delegate、on,對應的解除監聽的函數分別是unbind、die、undelegate、off。

深度探討jQuery事件綁定技術 深度探討jQuery事件綁定技術 Feb 26, 2024 pm 07:36 PM

jQuery是一種流行的JavaScript庫,廣泛用於處理Web頁面的互動性。其中,事件綁定是jQuery的重要功能之一,透過事件綁定可以實現對使用者互動操作的回應。本文將探討jQuery事件綁定技術,並給出具體的程式碼範例。一、事件綁定的基本概念事件綁定是指在DOM元素上新增事件監聽器,以便在特定事件發生時執行指定的操作。在jQuery中,透過選擇器選取需

Vue應用程式中遇到'click'事件綁定無效怎麼辦? Vue應用程式中遇到'click'事件綁定無效怎麼辦? Jun 24, 2023 pm 03:51 PM

Vue是一款流行的JavaScript框架,用於建立現代的Web應用程式。在Vue中,我們通常會使用指令來實作DOM元素的操作。其中,"click"事件是常用的一個指令之一,然而,在Vue應用程式中,我們經常會遇到"click"事件綁定無效的情況。本文將介紹解決此問題的方法。檢查元素是否存在第一步是確認要綁定"click"事件的元素是否存在。如果元素不存在,

See all articles