小说,古风名字

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

javascript怎么添加事件和刪除事件

這篇文章主要講解了“javascript怎么添加事件和刪除事件”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“javascript怎么添加事件和刪除事件”吧！

創(chuàng)新互聯(lián)建站是一家專業(yè)提供黑山企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站建設(shè)、成都做網(wǎng)站、HTML5、小程序制作等業(yè)務(wù)。10年已為黑山眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

js添加移除事件的方法：1、使用addEventListener()方法添加事件，用于向指定元素添加事件句柄；2、使用removeEventListener()方法刪除事件，用于移除由addEventListener()方法添加的事件句柄。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

一、addEventListener()和removeEventListener()講解

addEventListener()與removeEventListener()用于處理指定和刪除事件處理程序操作。

它們都接受3個參數(shù)：如 addEventListener("事件名" , "事件處理函數(shù)" , "布爾值"); (注：事件名不含"on",如“click”)

現(xiàn)在的版本可以省略第三個參數(shù)，默認(rèn)值為false

示例：

要在body上添加事件處理程序，可以使用下列代碼：

document.body.addEventListener('touchmove', function (event) {
    event.preventDefault();
},false)；

通過addEventListener()添加的事件處理程序只能使用removeEventListener()來移除；移除時傳入的參數(shù)與添加處理程序時使用的參數(shù)相同。這也意味著通過addEventListener()添加的匿名函數(shù)無法移除

錯誤用法示例：

document.body.addEventListener('touchmove', function (event) {
    event.preventDefault();
},false);
document.body.removeEventListener('touchmove', function (event) {
    event.preventDefault();
},false);

這個例子中，使用addEventListener()添加一個事件處理程序。雖然調(diào)用removeEventListener(0是看似使用了相同的參數(shù)，但實(shí)際上，第二個參數(shù)與傳入addEventListener()中的那一個完全不同的函數(shù)。而傳入removeEventListener()中的事件處理程序函數(shù)必須與傳addEventListener()中的相同

正確用法示例：

function bodyScroll(event){
    event.preventDefault();
}
document.body.addEventListener('touchmove',bodyScroll,false);
document.body.removeEventListener('touchmove',bodyScroll,false);

重寫后的這個例子在addEventListener()和removeEventListener()中用的是相同的函數(shù)。

共用函數(shù)不能帶參數(shù)，錯誤用法示例：

function bodyScroll(event){
    event.preventDefault();
}
document.body.addEventListener('touchmove',bodyScroll(),false);
document.body.removeEventListener('touchmove',bodyScroll(),false);

總結(jié)：

1：相同事件綁定和解除，需要使用共用函數(shù)；綁定和解除事件時事件沒有"on" 即onclick寫成click

2：共用函數(shù)不能帶參數(shù)；

二、addEventListener()與removeEventListener()的第三個參數(shù)詳解

布爾值參數(shù)是true，表示在捕獲階段調(diào)用事件處理程序；就是最不具體的節(jié)點(diǎn)先接收事件，最具體的節(jié)點(diǎn)最后接收事件

如果是false，在冒泡階段調(diào)用事件處理程序;則是先尋找指定的位置，由最具體的元素接收，然后逐級向上傳播至最不具體的元素的節(jié)點(diǎn)（文檔）

DOM事件流如圖（剪自javascript高級程序設(shè)計(jì)）：

javascript怎么添加事件和刪除事件

由圖可知捕獲過程要先于冒泡過程，即 true的觸發(fā)順序在false前面

實(shí)例測試

HTML內(nèi)容：




    
    添加事件&&解綁事件


    
        最外面
        
            最里面
        
    

js內(nèi)容：(第1種情況)

addEventListener的第三個參數(shù)有兩種情況：ture & false 所以有2*2*2=8種情況

結(jié)論：

1.true的觸發(fā)順序總是在false前面

2.如果多個均為true 則外層觸發(fā)先于內(nèi)層

3.如果多個均為false 則內(nèi)層觸發(fā)先于外層

感謝各位的閱讀，以上就是“javascript怎么添加事件和刪除事件”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對javascript怎么添加事件和刪除事件這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

本文標(biāo)題：javascript怎么添加事件和刪除事件
本文URL：http://fisionsoft.com.cn/article/gigeod.html

新聞中心

錯誤用法示例：

其他資訊