1. La cause du problème
L'écouteur d'événement à supprimer ne correspond pas correctement
2. Introduction à la grammaire
1.
Syntaxe addEventListener() de l'événement d'écoute
target.addEventListener(type, listener[, options])
target.addEventListener(type, listener[, useCapture])
2. Annuler
la syntaxe de l'événement RemoveEventListener()
target.removeEventListener(type, listener[, options])
target.removeEventListener(type, listener[, useCapture])
Description du paramètre
- type : Une chaîne indiquant le type d’événement à écouter.
- écouteur : la fonction de rappel liée à l'événement cible
- options : un objet de paramètres facultatifs spécifiant les propriétés de l'écouteur
- useCapture : Spécifie si la fonction EventListener à supprimer est un écouteur de capture. true signifie "capture d'événement", la valeur par défaut est
false, signifie "événement bouillonnant"
3. RemoveEventListener() doit être satisfait pour une suppression réussie
-
Les types d'événements qui doivent être supprimés doivent être les mêmes, par exemple : cliquez sur
-
La fonction EventListener qui doit être supprimée de l'événement cible doit
être la même que celle enregistrée dans addEventListener, c'est-à-dire que l'adresse de référence est la même -
Spécifiez le même celui enregistré dans useCapture et addEventListener de la fonction EventListener qui doit être supprimé
4. Donnez un exemple
1. Définir useCapture
element.addEventListener("mousedown", handleMouseDown, true);
element.removeEventListener("mousedown", handleMouseDown, false); // 失败
element.removeEventListener("mousedown", handleMouseDown, true); // 成功
2. Définir les options
element.addEventListener("mousedown", handleMouseDown, {
passive: true });
Notez que useCapture est par défaut sur false pour le moment, donc removeEventListener doit également définir useCapture sur false.
element.removeEventListener("mousedown", handleMouseDown, {
passive: true }); // 成功
element.removeEventListener("mousedown", handleMouseDown, {
capture: false }); // 成功
element.removeEventListener("mousedown", handleMouseDown, {
capture: true }); // 失败
element.removeEventListener("mousedown", handleMouseDown, {
passive: false }); // 成功
element.removeEventListener("mousedown", handleMouseDown, false); // 成功
element.removeEventListener("mousedown", handleMouseDown, true); // 失败
3. Problèmes possibles
1. Il n'est pas valide d'utiliser une fonction anonyme
// index.vue
create (){
document.addEventListener( "click", function() {
console.log("匿名函数, click") }, false );
},
destroyed() {
// 这样写是无效的
document.removeEventListener( "click", function() {
console.log("匿名函数, click") }, false );
},
Doit être modifié en :
// index.vue
create (){
document.addEventListener( "click", this.callBack, false );
// 监听生命周期
// this.$once('hook:destroyed', () => {
// document.removeEventListener( "click", this.callBack, false );
// })
},
// 也可以使用上面的方法监听生命周期
destroyed() {
document.removeEventListener( "click", this.callBack, false );
},
methods: {
callBack() {
console.log("匿名函数, click") };
}
2. L'adresse de référence de la fonction est ignorée.
Il n'est pas valide d'écrire ainsi
// index.vue
create (){
this.eventListener("add");
this.$once('hook:destroyed', () => {
this.eventListener("remove");
})
},
methods: {
eventListener(val) {
const callBackFn = () => {
console.log("函数表达式, click");
};
if (val === "add") {
document.addEventListener("click", callBackFn);
} else if (val === "remove") {
document.removeEventListener("click", callBackFn);
}
},
}
Parce que les deux appels de create() et destroy() initialisent respectivement une fonction callBackFn, les adresses de ces deux callBackFn stockées en mémoire sont différentes, et ce sont deux fonctions non pertinentes, donc removeEventListener() ne fonctionne pas (Inefficace) Remplacez-le
par ce qui suit de la même manière : Extrayez callBackFn dans une méthode publique :
// code...
methods: {
eventListener(val) {
if (val === "add") {
document.addEventListener("click", this.callBackFn);
} else if (val === "remove") {
document.removeEventListener("click", this.callBackFn);
}
},
callBackFn() {
console.log("函数表达式, click");
}
}
En dernière analyse, la raison est la suivante : l'écouteur d'événement à supprimer ne correspond pas correctement