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

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

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

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

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

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

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

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

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

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

讓我們看看下面的例子。

<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 個按鈕。 第一個按鈕是將聽眾附加到它的按鈕。

第二個按鈕將移除第一個按鈕的偵聽器。

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

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

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

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

輸出：

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

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

 一、刪除js中對象中屬性

1.使用delete運算符

例：

1) 使用點屬性訪問器刪除：

delete object.property;

在屬性訪問器上應(yīng)用delete運算符時，運算符會從對象中刪除相應(yīng)的屬性：

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

2) 使用方括號屬性訪問器刪除：

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

使用delete運算符刪除屬性是可變的，因為它會改變原始對象。

如果要刪除的屬性名稱是動態(tài)確定的，則可以使用方括號語法：

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

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

1) 屬性名稱已知：

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

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

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

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

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

如果要刪除的屬性名稱是動態(tài)確定的，則可以使用動態(tài)屬性名稱解構(gòu)語法：

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

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

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

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

最新評論