javascript 刪除所有事件監(jiān)聽(tīng)器

移除 JavaScript 中的所有事件監(jiān)聽(tīng)器

EventTarget 接口的 addEventListener() 方法配置一個(gè)函數(shù)，只要指定的事件被傳遞到目標(biāo)，就會(huì)調(diào)用該函數(shù)。

addEventListener() 方法的工作原理是將實(shí)現(xiàn) EventListener 的函數(shù)或?qū)ο筇砑拥绞录陕?tīng)器列表中，以用于在調(diào)用它的 EventTarget 中指定的事件類型。

如果該函數(shù)或?qū)ο笠言谠撃繕?biāo)的事件偵聽(tīng)器列表中，則不會(huì)再次添加該函數(shù)或?qū)ο蟆?/p>

EventTarget 接口的 removeEventListener() 方法刪除了之前使用 EventTarget.addEventListener() 從目標(biāo)注冊(cè)的事件監(jiān)聽(tīng)器。

使用未標(biāo)識(shí)當(dāng)前在 EventTarget 中注冊(cè)的 EventListener 的參數(shù)調(diào)用 removeEventListener() 無(wú)效。

如果在目標(biāo)上的另一個(gè)偵聽(tīng)器正在處理事件時(shí)從 EventTarget 中刪除 EventListener，則不會(huì)調(diào)度該事件。 但是，它可以重新定位。

如果只為特定元素注冊(cè)了一個(gè)或兩個(gè)偵聽(tīng)器，則調(diào)用 removeEventListener 很容易。 如果注冊(cè)的偵聽(tīng)器超過(guò) 10 個(gè)，而您想刪除所有事件偵聽(tīng)器怎么辦？

這需要努力； 我們將學(xué)習(xí)另一種方法來(lái)執(zhí)行這個(gè)繁瑣的操作來(lái)克服這個(gè)問(wèn)題。

讓我們看看下面的例子。

<div>
<button id="grt-btn">Hello World!</button>
<button onclick="removeListeners()">Remove listeners</button>
</div>

document.getElementById("grt-btn").addEventListener("click", () => {
  console.log("firstClick")
}, false);
document.getElementById("grt-btn").addEventListener("blur" , () => {
  console.log("Blur event")
}, false);
document.getElementById("grt-btn").addEventListener("focus", () => {
  console.log("focus event")
}, false);
function removeListeners() {
  const oldBtnElement = document.getElementById("grt-btn");
  const newBtnElement = oldBtnElement.cloneNode(true);
  oldBtnElement.parentNode.replaceChild(newBtnElement, oldBtnElement);
    console.log("Removed all listners")
}

在上面的例子中，我們定義了 2 個(gè)按鈕。 第一個(gè)按鈕是將聽(tīng)眾附加到它的按鈕。

第二個(gè)按鈕將移除第一個(gè)按鈕的偵聽(tīng)器。

我們定義了三個(gè)事件監(jiān)聽(tīng)器； 只要點(diǎn)擊 Hello World 按鈕，就會(huì)觸發(fā)焦點(diǎn)和點(diǎn)擊事件。 嘗試導(dǎo)航到另一個(gè)選項(xiàng)卡； 它會(huì)觸發(fā)模糊事件。

最后，單擊 Remove listeners 按鈕，這將克隆 Hello World 按鈕。 最后一步是將 div 元素的子節(jié)點(diǎn)替換為 cloneNode。

這將自動(dòng)刪除之前與該按鈕關(guān)聯(lián)的所有事件偵聽(tīng)器。

如果您嘗試再次單擊 Hello World 按鈕，它不會(huì)觸發(fā)任何事件。

輸出：

"focus event"
"firstClick"
"Blur event"
"focus event"
"Blur event"
"Removed all listeners"

javaScript刪除對(duì)象屬性總結(jié)方法

 一、刪除js中對(duì)象中屬性

1.使用delete運(yùn)算符

例：

1) 使用點(diǎn)屬性訪問(wèn)器刪除：

delete object.property;

在屬性訪問(wèn)器上應(yīng)用delete運(yùn)算符時(shí)，運(yùn)算符會(huì)從對(duì)象中刪除相應(yīng)的屬性：

const obj = {name: '腳本之家',url: 'rwlok.com'};
delete obj.url;
console.log(obj); // { name: '腳本之家' }

2) 使用方括號(hào)屬性訪問(wèn)器刪除：

delete object['property'];// orconst name = 'dynamicProperty';
delete object[name];

使用delete運(yùn)算符刪除屬性是可變的，因?yàn)樗鼤?huì)改變?cè)紝?duì)象。

如果要?jiǎng)h除的屬性名稱是動(dòng)態(tài)確定的，則可以使用方括號(hào)語(yǔ)法：

const obj = {  name: '腳本之家',  url: 'rwlok.com'};
const name = 'url';
delete obj[name];
console.log(obj); // { name: '腳本之家' }

2.使用rest解構(gòu)對(duì)象

1) 屬性名稱已知：

const { property, ...restObject } = object;

應(yīng)用解構(gòu)和rest語(yǔ)法后，restObject將包含與object相同的屬性，只是沒(méi)有刪除的屬性。

const obj= {
  name: '腳本之家',
  url: 'rwlok.com'
};
const { url, ...objRest } = obj;
console.log(objRest); // { name: '腳本之家' }
console.log(obj); // { name: '腳本之家',url: 'rwlok.com' }

2) 屬性名稱是動(dòng)態(tài)的：

const name = 'property';
const { [name]: removedProperty, ...restObject } = object;

如果要?jiǎng)h除的屬性名稱是動(dòng)態(tài)確定的，則可以使用動(dòng)態(tài)屬性名稱解構(gòu)語(yǔ)法：

const obj = {  name: '腳本之家',  url: 'rwlok.com'};
const name = 'url';
const { [name]: removedProperty, ...objRest } = obj;
console.log(objRest); // { name: '腳本之家' }

rest結(jié)構(gòu)方法還可以一次性刪除多個(gè)屬性：

const obj = {
  name: '腳本之家',
  url: 'rwlok.com',
  title: '卡卡測(cè)速網(wǎng)', 
};
const { url, title, ...objRest } = obj;
console.log(objRest); // { name: '腳本之家' }

到此這篇關(guān)于javascript 刪除所有事件監(jiān)聽(tīng)器的文章就介紹到這了,更多相關(guān)js刪除事件監(jiān)聽(tīng)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！