Maison >interface Web >js tutoriel >Que sont les événements de flux d'événements JavaScript ? (introduire)
Que sont les événements de flux d'événements JavaScript ? (introduire)
- 青灯夜游original
- 2018-09-17 17:11:402088parcourir
Ce chapitre vous explique que sont les événements de flux d'événements javaScript ? (Introduction), afin que tout le monde puisse comprendre ce que sont les événements et les flux d'événements javaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
1. Les événements JavaScript
Les événements sont des moments d'interaction spécifiques qui se produisent dans un document ou une fenêtre de navigateur.
Un événement est une certaine action effectuée par l'utilisateur ou le navigateur lui-même, comme le clic, le chargement et le survol de la souris sont tous des noms d'événements. Les événements
sont le pont entre javaScript et DOM.
Si vous le déclenchez, je l'exécuterai - lorsque l'événement se produit, sa fonction de gestionnaire est appelée pour exécuter le code JavaScript correspondant afin de donner une réponse.
Les exemples typiques sont : l'événement de chargement est déclenché lorsque la page est chargée ; l'événement de clic est déclenché lorsque l'utilisateur clique sur un élément.
2. Flux d'événements
Le flux d'événements décrit l'ordre dans lequel les événements sont reçus de la page.
1. Conscience d'un événement
Question : Lorsque vous cliquez sur un élément de la page, quel type d'élément peut détecter un tel événement ?
Réponse : Lorsque vous cliquez sur un élément, vous cliquez également sur l'élément conteneur de l'élément, voire sur la page entière.
Exemple : Il y a trois cercles concentriques. Ajoutez la fonction de traitement d'événement correspondante à chaque cercle et affichez le texte correspondant. Lorsque vous cliquez sur le cercle le plus intérieur, vous cliquez également sur le cercle extérieur, de sorte que l'événement de clic du cercle extérieur sera également déclenché.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#outer{
position: absolute;
width: 400px;
height: 400px;
top:0;
left: 0;
bottom:0;
right: 0;
margin: auto;
background-color: deeppink;
}
#middle{
position: absolute;
width: 300px;
height:300px;
top:50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
background-color: deepskyblue;
}
#inner{
position: absolute;
width: 100px;
height:100px;
top:50%;
left:50%;
margin-left: -50px;
margin-top: -50px;;
background-color: darkgreen;
text-align: center;
line-height: 100px;
color:white;
}
#outer,#middle,#inner{
border-radius:100%;
}
</style>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
click me!
</div>
</div>
</div>
<script>
var innerCircle= document.getElementById("inner");
innerCircle.onclick= function () {
alert("innerCircle");
};
var middleCircle= document.getElementById("middle");
middleCircle.onclick=function(){
alert("middleCircle");
}
var outerCircle= document.getElementById("outer");
outerCircle.onclick= function () {
alert("outerCircle");
}
</script>
</body>
</html>Rendu :
 "153717465379802Que sont les événements de flux dévénements JavaScript ? (introduire)")
 "153717467089890Que sont les événements de flux dévénements JavaScript ? (introduire)")
2. >
Lorsqu'un événement se produit, il sera propagé entre le nœud élément et le nœud racine dans un ordre spécifique. Tous les nœuds le long du chemin recevront l'événement. Ce processus de propagation est le flux d'événements DOM. 1) Deux modèles de flux d'événements L'ordre de propagation des événements correspond aux deux modèles de flux d'événements du navigateur : capture du flux d'événements et flux d'événements bouillonnant.Flux d'événements de bulle : La propagation des événements s'effectue de la cible d'événement la plus spécifique à la cible d'événement la moins spécifique. C'est-à-dire des feuilles de l'arborescence DOM jusqu'à la racine. [Recommandé]
Capturer le flux d'événements : La propagation des événements s'effectue de la cible d'événement la moins spécifique à la cible d'événement la plus spécifique. C'est-à-dire de la racine de l'arborescence DOM jusqu'aux feuilles.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="myDiv">Click me!</div>
</body>
</html>Dans le code HTML ci-dessus, l'élément remarque :
- Tous les navigateurs modernes prennent en charge le bouillonnement d'événements, mais il existe de légères différences dans l'implémentation spécifique : Le bouillonnement d'événements dans IE5.5 et les versions antérieures ignorera l'élément (passera directement du corps au document). IE9, Firefox, Chrome et Safari diffusent l'événement jusqu'à l'objet fenêtre.
- 2), IE9, Firefox, Chrome, Opera et Safari prennent tous en charge la capture d'événements. Bien que la norme DOM exige que les événements soient propagés à partir de l'objet document, ces navigateurs capturent les événements à partir de l'objet fenêtre.
- 3). Les anciennes versions des navigateurs ne le prenant pas en charge, peu de gens utilisent la capture d'événements. Il est recommandé d’utiliser le bouillonnement d’événements.
 "153717492921713Que sont les événements de flux dévénements JavaScript ? (introduire)")
- Phase de capture d'événement : La cible réelle () ne recevra pas d'événements pendant la phase de capture. Autrement dit, pendant la phase de capture, l'événement s'arrête du document vers puis vers . Dans l'image ci-dessus, il s'agit de 1~3.
- est au stade cible : les événements se produisent et sont traités sur
. Mais la gestion des événements sera considérée comme faisant partie de la phase de bouillonnement.- Phase de bouillonnement : L'événement se propage jusqu'au document.
remarque :尽管“DOM2级事件”标准规范明确规定事件捕获阶段不会涉及事件目标，但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两次机会在目标对象上面操作事件。
并非所有的事件都会经过冒泡阶段 。所有的事件都要经过捕获阶段和处于目标阶段，但是有些事件会跳过冒泡阶段：如，获得输入焦点的focus事件和失去输入焦点的blur事件。
两次机会在目标对象上面操作事件例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> #outer{ position: absolute; width: 400px; height: 400px; top:0; left: 0; bottom:0; right: 0; margin: auto; background-color: deeppink; } #middle{ position: absolute; width: 300px; height:300px; top:50%; left: 50%; margin-left: -150px; margin-top: -150px; background-color: deepskyblue; } #inner{ position: absolute; width: 100px; height:100px; top:50%; left:50%; margin-left: -50px; margin-top: -50px;; background-color: darkgreen; text-align: center; line-height: 100px; color:white; } #outer,#middle,#inner{ border-radius:100%; } </style> <body> <div id="outer"> <div id="middle"> <div id="inner"> click me! </div> </div> </div> <script> var innerCircle= document.getElementById("inner"); innerCircle.addEventListener("click", function () { alert("innerCircle的click事件在捕获阶段被触发"); },true); innerCircle.addEventListener("click", function () { alert("innerCircle的click事件在冒泡阶段被触发"); },false); var middleCircle= document.getElementById("middle"); middleCircle.addEventListener("click", function () { alert("middleCircle的click事件在捕获阶段被触发"); },true); middleCircle.addEventListener("click", function () { alert("middleCircle的click事件在冒泡阶段被触发"); },false); var outerCircle= document.getElementById("outer"); outerCircle.addEventListener("click", function () { alert("outerCircle的click事件在捕获阶段被触发"); },true); outerCircle.addEventListener("click", function () { alert("outerCircle的click事件在冒泡阶段被触发"); },false); </script> </body> </html>运行效果就是会陆续弹出6个框，为说明原理我整合成了一个图：
3、事件流的典型应用事件代理
传统的事件处理中，需要为每个元素添加事件处理器。js事件代理则是一种简单有效的技巧，通过它可以把事件处理器添加到一个父级元素上，从而避免把事件处理器添加到多个子级元素上。
1）事件代理
事件代理的原理用到的就是事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素事件冒泡，并且父元素能够通过target（IE为srcElement）判断是哪个子元素，从而做相应处理。关于target更多内容请参考javaScript事件（四）event的公共成员（属性和方法） 下面举例来说明。
传统事件处理，为每个元素添加事件处理器，代码如下：
<body> <ul id="color-list"> <li>red</li> <li>orange</li> <li>yellow</li> <li>green</li> <li>blue</li> <li>indigo</li> <li>purple</li> </ul> <script> (function(){ var colorList=document.getElementById("color-list"); var colors=colorList.getElementsByTagName("li"); for(var i=0;i<colors.length;i++) { colors[i].addEventListener('click',showColor,false); }; function showColor(e) { e=e||window.event; var targetElement=e.target||e.srcElement; alert(targetElement.innerHTML); } })(); </script> </body>事件代理的处理方式，代码如下：
<body> <ul id="color-list"> <li>red</li> <li>orange</li> <li>yellow</li> <li>green</li> <li>blue</li> <li>indigo</li> <li>purple</li> </ul> <script> (function(){ var colorList=document.getElementById("color-list"); colorList.addEventListener('click',showColor,false); function showColor(e) { e=e||window.event; var targetElement=e.target||e.srcElement; if(targetElement.nodeName.toLowerCase()==="li"){ alert(targetElement.innerHTML); } } })(); </script> </body>2）事件代理的好处
总结一下事件代理的好处：
将多个事件处理器减少到一个，因为事件处理器要驻留内存，这样就提高了性能。想象如果有一个100行的表格，对比传统的为每个单元格绑定事件处理器的方式和事件代理（即table上添加一个事件处理器），不难得出结论，事件代理确实避免了一些潜在的风险，提高了性能。
DOM更新无需重新绑定事件处理器，因为事件代理对不同子元素可采用不同处理方法。如果新增其他子元素（a,span,div等），直接修改事件代理的事件处理函数即可，不需要重新绑定处理器，不需要再次循环遍历。
3）事件代理的问题：【update20170502】
代码如下：事件代理同时绑定了li和span，当点击span的时候，li和span都会冒泡。
<li><span>li中的span的内容</span></li> <script> $(document).on('click', 'li', function(e){ alert('li li'); }); $(document).on('click', 'span', function(e){ alert('li span'); }) </script>解决办法：
方法一：span的事件处理程序中阻止冒泡
$(document).on('click', 'span', function(e){ alert('li span'); e.stopPropagation(); })方法二：li的事件处理程序中检测target元素
$(document).on('click', 'li', function (e) { if (e.target.nodeName == 'SPAN') { e.stopPropagation(); return; } alert('li li'); });4）事件代理的一个有趣应用【update20170502】
点击一个列表时，输出对应的索引
<script> var ul=document.querySelector('ul'); var lis=ul.querySelectorAll('ul li'); ul.addEventListener('click', function (e) { var target= e.target; if(target.nodeName.toUpperCase()==='LI'){ alert([].indexOf.call(lis,target)); } },false) </script> - est au stade cible : les événements se produisent et sont traités sur
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!