Supplément avancé pour les événements js dom

Nous avons déjà partagé la méthode de fonctionnement de dom en utilisant js natif Dans cet article, nous suivrons le supplément avancé des événements dom en js, dans l'espoir d'aider tout le monde.

Problèmes de couverture des événements
Effacer le principe
Utiliser les sources d'événements La manière d'ajouter des événements aux types d'événements entraînera des problèmes de couverture. Nous utilisons une fonction pour éviter ce problème.

function addEvent(tag,fn){
    var oldClick=tag.onclick    if(typeof oldClick=="function"){
        tag.onclick=function(){
            oldClick();
            fn();
    }
    }else{
        tag.onclick=fn;
    }
}

Ajouter des événements (doit maîtriser)
Nouvelle façon d'ajouter des événements :
Avantages, vous pouvez éviter les problèmes de couverture des événements
Event source.addEventListener( " click",function(){}); les navigateurs ie9 et supérieurs prennent en charge
Remarque : n'ajoutez pas on

event source.attachEvent("onclick",function(){}) au nom du type. c'est-à-dire le support des versions inférieures
Notez que le nom du type est ajouté avec on

La façon de supprimer l'événement
La méthode d'ajout de addEventListener consiste à utiliser RemoveEventListener pour le supprimer
Notez l'écriture du deuxième paramètre

Event source.detachEvent("onclick",fn) permet d'annuler l'événement ajouté à l'aide de attachEvent

Méthode d'annulation originale

box.onclick=function(){}
box.onclick=null;

Package compatible addEventListener.

var Event = {//添加事件。oElement：元素，sEvent：事件类型，fnHandler：绑定的函数
    addHandler: function (oElement, sEvent, fnHandler) {
        oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : oElement.attachEvent("on" + sEvent, fnHandler)    
    },//删除事件。
    removeHandler: function (oElement, sEvent, fnHandler) {
        oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, fnHandler)
    }
}
使用列子：
<input type="button" value="毫无用处的按钮"> <input type="button" value="绑定click"> <input type="button" value="解除绑定">

window.onload = function (){
    var aBtn = document.getElementsByTagName("input");    //为第一个按钮添加绑定事件
    aBtn[1].onclick = function ()
    {
        Event.addHandler(aBtn[0], "click", fnHandler);    
        aBtn[0].value = "我可以点击了"
    }    //解除第一个按钮的绑定事件
    aBtn[2].onclick = function ()
    {
        Event.removeHandler(aBtn[0], "click", fnHandler);
        aBtn[0].value = "毫无用处的按钮"    
    }    //事件处理函数
    function fnHandler ()
    {
        alert("事件绑定成功！")    
    }
}

Barbotage d'événements et capture d'événements
Vous devez maîtriser l'ordre d'exécution du bouillonnement et de la capture
Le bouillonnement d'événements est un moyen de livraison d'événements
Livraison La méthode est : déclencher de l'élément le plus spécifique à l'élément le moins spécifique 子向父
Déclenchez d'abord l'événement de l'élément actuel, et propagez-le vers le haut une fois le déclencheur terminé. Si le parent contient également cet événement, déclenchez-le, puis. vers le haut. Si cela ne continue pas directement, regardez vers le haut.
Pour les événements ajoutés via addEventListener, le troisième paramètre est faux pour indiquer un événement bouillonnant. La valeur par défaut est false

box1.addEventListener("click",function(){alert(1)},false)

La capture d'événements est un moyen de transmission d'événements
La méthode d'exécution de la capture d'événements se fait de l'extérieur vers l'intérieur (contrairement au bouillonnement).
Événements ajoutés via addEventListener, le troisième paramètre est vrai pour indiquer la capture d'événement.

box1.addEventListener("click",function(){alert(1)},true)

Objet événement (doit maîtriser)
Comment obtenir :
1. Lorsqu'un événement est déclenché, nous pouvons recevoir l'objet événement dans le gestionnaire d'événement.
Cette forme d'acquisition n'est pas prise en charge dans les versions inférieures d'IE.

document.onmousemove=function(e){
    var e=e||window.event;//兼容ie}

2. Utilisez window.event comme objet événement dans les versions inférieures d'IE, qui a la même fonction que e

Attributs de l'objet événement (doivent être maîtrisés )
Event object.type représente le type d'événement. Notez que on n'est pas ajouté

Event object.clientX et event object.clientY peuvent obtenir l'abscisse et l'ordonnée de la souris pour le. zone visible du navigateur lorsque l'événement est déclenché.

Event object.pageX et event object.pageY peuvent obtenir l'abscisse et l'ordonnée du pointeur de la souris vers le sommet gauche de la page lorsque l'événement est déclenché. Il existe un problème de compatibilité. Les versions inférieures d'IE ne le prennent pas en charge et nécessitent des fonctions d'encapsulation pour l'obtenir.
Packaging de la page Environnement d'exécution

function getPage(e){var e=e||window.event;var src=scroll()//这个函数是在dom高级里面讲到对scrollLeft和scrollTop的封装;
    return {
     PageX:scroll.scrollleft+e.clientX,
      PageY:scroll.scrolltop+e.clienttop,
    }
}

Le programme pointe vers l'élément dom lui-même
obj.addEventListener(type, fn, false);
Le programme pointe vers le dom L'élément lui-même
obj.attachEvent('on' + type, fn); Le programme pointe vers window



Quels sont les avantages du bouillonnement d'événements et de la capture d'événements ?

封装兼容性的addEvent(elem, type, handle);方法function addEvent(elem, type, handle) {    if(elem.addEventListener) {
        elem.addEventListener(type, handle, false);
    }else if(elem.attachEvent) {
         elem['temp'] = function() {
            handle.call(elem);
        }
        elem.attachEvent('on' + type, elem['temp']);
    }else{
        elem['on' + type] = handle;
    }
}

封装的兼容方法function removeEvent(elem, type, handle) {
    if(elem.removeEventListener) {
        elem.removeEventListener(type, handle, false);
    }else if(elem.detachEvent) {
        elem.detachEvent('on' + type, handle);
    }else{
        elem['on' + type] = null;
    }
}

Mozilla 1.0 : p -> body -> html -> document -> window (2) Capture d'événement (capture d'événement) : L'événement est déclenché à partir de l'objet le moins précis (objet document), puis au plus précis (les événements peuvent également être capturés au niveau de la fenêtre, mais cela doit être spécifiquement spécifié par le développeur). (3) Flux d'événements DOM : prend en charge deux modèles d'événements en même temps : les événements de capture et les événements bouillonnants, mais les événements de capture se produisent en premier. Les deux flux d'événements toucheront tous les objets du DOM, en commençant par l'objet document et en terminant par l'objet document.

Un exemple typique de bouillonnement d'événements

L'idée du bouillonnement est d'écouter les événements sur les nœuds ancêtres et de combiner event.target/event.srcElement pour obtenir l'effet final. équivalent au code suivant :



Arrêter le bouillonnement de l'événement

event.stopPropagation(); // 阻止事件冒泡return false;既能阻止默认事件又能 阻止事件冒泡

当用户名为空时，单击“提交”按钮，会出现提示，并且表单不能提交。只有在用户名里输入内容后，才能提交表单。可见，preventDefault()方法能阻止表单的提交行为。
如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返同false。这是对在事件对象上同时调用stopPrapagation()方法和preventDefault()方法的一种简写方式。
在表单的例子中，可以把 event.preventDefault(); 改写为： return false;
也可以把事件冒泡例子中的 event.stopPropaqation(); 改写为： return false;

事件覆盖的问题
清楚原理
使用事件源.事件类型的添加事件方式会产生覆盖问题。我们通过一个函数去避免这个问题。

function addEvent(tag,fn){
    var oldClick=tag.onclick    if(typeof oldClick=="function"){
        tag.onclick=function(){
            oldClick();
            fn();
    }
    }else{
        tag.onclick=fn;
    }
}

添加事件（必须掌握）
自带的添加事件新方式：
好处，可以避免事件覆盖问题
事件源.addEventListener(“click”,function(){}); ie9以上浏览器支持
注意：类型名不加 on

事件源.attachEvent(“onclick”,function(){}) ie低版本支持
注意，类型名加on

移除事件的方式
addEventListener 的添加方式使用removeEventListener进行移除
注意第二个参数的写法

事件源.detachEvent(“onclick”,fn)用于取消使用attachEvent添加的事件

原始的取消方式

box.onclick=function(){}
box.onclick=null;

addEventListener兼容封装。

var Event = {//添加事件。oElement：元素，sEvent：事件类型，fnHandler：绑定的函数
    addHandler: function (oElement, sEvent, fnHandler) {
        oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : oElement.attachEvent("on" + sEvent, fnHandler)    
    },//删除事件。
    removeHandler: function (oElement, sEvent, fnHandler) {
        oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, fnHandler)
    }
}
使用列子：
<input type="button" value="毫无用处的按钮"> <input type="button" value="绑定click"> <input type="button" value="解除绑定">

window.onload = function (){
    var aBtn = document.getElementsByTagName("input");    //为第一个按钮添加绑定事件
    aBtn[1].onclick = function ()
    {
        Event.addHandler(aBtn[0], "click", fnHandler);    
        aBtn[0].value = "我可以点击了"
    }    //解除第一个按钮的绑定事件
    aBtn[2].onclick = function ()
    {
        Event.removeHandler(aBtn[0], "click", fnHandler);
        aBtn[0].value = "毫无用处的按钮"    
    }    //事件处理函数
    function fnHandler ()
    {
        alert("事件绑定成功！")    
    }
}

事件冒泡和事件捕获
必须掌握冒泡和捕获的执行顺序
事件冒泡是事件传递的一种方式
传递方式为：由最特定的元素触发到最不特定的元素 子向父
首先触发当前元素的事件，触发完毕向上传播，如果父级也含有这个事件，触发，再向上，如果没有直接继续向上寻找。
通过addEventListener添加的事件，第三个参数为false表示事件冒泡。默认为false

box1.addEventListener("click",function(){alert(1)},false)

事件捕获是事件传递的一种方式
事件捕获的执行方式，是由外向内（跟冒泡相反）。
通过addEventListener添加的事件，第三个参数为true表示事件捕获。

box1.addEventListener("click",function(){alert(1)},true)

事件对象（必须掌握）
获取方式：
1、当事件触发时，我们可以通过在事件处理程序中接收事件对象。
这种获取形式在ie低版本不支持。

document.onmousemove=function(e){
    var e=e||window.event;//兼容ie}

2、在ie低版本中使用window.event作为事件对象，作用和e相同

事件对象的属性（必须掌握）
事件对象.type 表示事件的类型，注意是不加on的

事件对象.clientX和事件对象.clientY可以获取事件触发时鼠标针对浏览器可视区域的横坐标和纵坐标。

事件对象.pageX和事件对象.pageY可以获取事件触发时鼠标针对页面左顶点的横坐标和纵坐标。 有兼容性问题，ie低版本不支持，需要封装函数获取。
pageX和pageY的封装

function getPage(e){var e=e||window.event;var src=scroll()//这个函数是在dom高级里面讲到对scrollLeft和scrollTop的封装;
    return {
     PageX:scroll.scrollleft+e.clientX,
      PageY:scroll.scrolltop+e.clienttop,
    }
}

onmousemove 鼠标移动时触发
onmousedown 鼠标点下时触发
onmouseup 鼠标抬起时触发
事件处理程序的运行环境
ele.onxxx = function(event) { }
程序this指向是dom元素本身
obj.addEventListener(type, fn, false);
程序this指向是dom元素本身
obj.attachEvent(‘on’ + type, fn);
程序this指向window

封装兼容性的addEvent(elem, type, handle);方法function addEvent(elem, type, handle) {    if(elem.addEventListener) {
        elem.addEventListener(type, handle, false);
    }else if(elem.attachEvent) {
         elem['temp'] = function() {
            handle.call(elem);
        }
        elem.attachEvent('on' + type, elem['temp']);
    }else{
        elem['on' + type] = handle;
    }
}

封装的兼容方法function removeEvent(elem, type, handle) {
    if(elem.removeEventListener) {
        elem.removeEventListener(type, handle, false);
    }else if(elem.detachEvent) {
        elem.detachEvent('on' + type, handle);
    }else{
        elem['on' + type] = null;
    }
}

事件冒泡和事件捕获有什么好处和弊端。

（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
IE 5.5: p -> body -> document
IE 6.0: p -> body -> html -> document
Mozilla 1.0: p -> body -> html -> document -> window
（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。
DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。
事件冒泡典型的例子
冒泡的思路是在祖先节点上监听事件，结合event.target/event.srcElement来实现最终效果，其效果等同于如下代码：

<p class="J_rate" onmouseover="..." onmouseout="..." onclick="...">
  <img  src="star.gif" title="很烂" / alt="Supplément avancé pour les événements js dom" >
  <img  src="star.gif" title="一般" / alt="Supplément avancé pour les événements js dom" >
  <img  src="star.gif" title="还好" / alt="Supplément avancé pour les événements js dom" >
  <img  src="star.gif" title="较好" / alt="Supplément avancé pour les événements js dom" >
  <img  src="star.gif" title="很好" / alt="Supplément avancé pour les événements js dom" >
 </p>
 // 五心好评的例子，不用给img添加，直接给父元素加

停止事件冒泡

event.stopPropagation(); // 阻止事件冒泡return false;既能阻止默认事件又能 阻止事件冒泡

当用户名为空时，单击“提交”按钮，会出现提示，并且表单不能提交。只有在用户名里输入内容后，才能提交表单。可见，preventDefault()方法能阻止表单的提交行为。
如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返同false。这是对在事件对象上同时调用stopPrapagation()方法和preventDefault()方法的一种简写方式。
在表单的例子中，可以把 event.preventDefault(); 改写为： return false;
也可以把事件冒泡例子中的 event.stopPropaqation(); 改写为： return false;

相关推荐：

jquery之dom学习

原生js 操作dom

jQuery操作DOM的方法

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!