Maison > Article > interface Web > Analyse du code du taux de bouillonnement des événements
Analyse du code du taux de bouillonnement des événements
- 不言original
- 2018-07-14 16:06:572227parcourir
Cet article présente principalement l'analyse du code de la bulle de rapport de bouillonnement d'événement, qui a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer
Le concept de bulle est quand. l'élément enfant déclenche un événement, l'élément ancêtre correspondant déclenchera également le même événement
(à condition que l'élément parent ait également ajouté le même événement)
ex : Le fils a un ancêtre onclick dix Yatsura a aussi onclick
En cliquant sur le fils, l'événement clic de la 18ème génération de l'ancêtre sera également déclenché
Parfois cette situation posera de nombreux problèmes, il faut donc éviter les bulles
Seuls les éléments cliqués déclenchent des événements
Tous les événements ne bouillonneront pas
onblur onfocus onload onerror not
En fait, il existe trois processus pour déclencher des événements : Capture phase--->En phase cible---->Phase de bouillonnement
Ordre standard des bulles du navigateur éléments enfants-->Parent-->corps-->document-- ->fenêtre
Élément enfant IE-->parent-->body-->document
Ensuite, le code est très simple, il suffit de faire un processus de compatibilité
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>阻止冒泡</title>
</head>
<body>
<input type="button" id="cancelBubble" value="取消冒泡"/>
<script type="text/javascript">
var btn=document.getElementById("cancelBubble");
document.onclick=function(){
alert("冒泡");
}
btn.onclick=function(event){
var event=event||window.event;//兼容
if(event && event.stopPropagation){
event.stopPropagation();
}
else{
//IE 678
event.cancelBubble=true;
}
alert("没有冒泡");
}
</script>
</body>
</html>Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
Analyse de la façon dont NodeJS exploite la file d'attente de messages RabbitMQ
Comment JavaScript implémente la fonction de téléchargement de fichiers
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!