Erweiterte Ergänzung für JS-Dom-Ereignisse

Wir haben bereits die Methode zum Betrieb von Dom mit nativem js geteilt. In diesem Artikel werden wir die erweiterte Ergänzung von Dom-Ereignissen in js verfolgen, in der Hoffnung, allen zu helfen.

Probleme mit der Ereignisberichterstattung
Prinzip klären
Ereignisquellen verwenden Die Art und Weise, Ereignisse zu Ereignistypen hinzuzufügen, führt zu Abdeckungsproblemen. Wir verwenden eine Funktion, um dieses Problem zu vermeiden.

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

Ereignisse hinzufügen (muss beherrscht werden)
Neue Möglichkeit, Ereignisse hinzuzufügen:
Vorteile, Sie können Probleme bei der Ereignisabdeckung vermeiden
Event source.addEventListener( " click",function(){}); Browser ab IE9 unterstützen
Hinweis: Fügen Sie nicht

event source.attachEvent("onclick",function(){}) zum Typnamen hinzu. dh Unterstützung niedrigerer Versionen
Beachten Sie, dass der Typname mit on hinzugefügt wird

Die Möglichkeit, das Ereignis zu entfernen
Die Hinzufügungsmethode von addEventListener besteht darin, es mit „removeEventListener“ zu entfernen
Beachten Sie die Schreibweise des zweiten Parameters

Event source.detachEvent("onclick",fn) wird verwendet, um das mit attachmentEvent hinzugefügte Ereignis abzubrechen

Ursprüngliche Stornierungsmethode

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

addEventListener-kompatibles Paket.

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("事件绑定成功！")    
    }
}

Ereignissprudeln und Ereigniserfassung
Sie müssen die Ausführungsreihenfolge des Sprudelns und Erfassens beherrschen
Ereignissprudeln ist eine Möglichkeit der Ereignisübermittlung
Lieferung Die Methode ist: Trigger vom spezifischsten Element zum am wenigsten spezifischen Element 子向父
Lösen Sie zuerst das Ereignis des aktuellen Elements aus und verbreiten Sie es nach oben, nachdem der Trigger abgeschlossen ist. Wenn das übergeordnete Element dieses Ereignis ebenfalls enthält, lösen Sie es aus und dann nach oben. Wenn es nicht direkt weitergeht, schauen Sie nach oben.
Bei Ereignissen, die über addEventListener hinzugefügt werden, ist der dritte Parameter „false“, um anzuzeigen, dass das Ereignis sprudelt. Der Standardwert ist „false“

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

Ereigniserfassung ist eine Möglichkeit der Ereignisübermittlung
Die Ausführungsmethode der Ereigniserfassung erfolgt von außen nach innen (im Gegensatz zum Sprudeln).
Über addEventListener hinzugefügte Ereignisse. Der dritte Parameter ist wahr, um die Ereigniserfassung anzugeben.

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

Ereignisobjekt (muss beherrschen)
So erhalten Sie:
1. Wenn ein Ereignis ausgelöst wird, können wir das Ereignisobjekt im Ereignishandler empfangen.
Diese Form der Erfassung wird in niedrigeren IE-Versionen nicht unterstützt.

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

2. Verwenden Sie window.event als Ereignisobjekt in niedrigeren Versionen von IE, das die gleiche Funktion wie e hat.

Attribute des Ereignisobjekts (müssen beherrscht werden). )
Event object.type stellt den Ereignistyp dar.

Event object.clientX und event object.clientY können die Abszisse und Ordinate der Maus erhalten Der sichtbare Bereich des Browsers, wenn das Ereignis ausgelöst wird.

Ereignisobjekt.pageX und Ereignisobjekt.pageY können die Abszisse und Ordinate des Mauszeigers zum linken Scheitelpunkt der Seite abrufen, wenn das Ereignis ausgelöst wird. Es besteht ein Kompatibilitätsproblem. Niedrigere IE-Versionen unterstützen es nicht und erfordern Kapselungsfunktionen, um es zu erhalten.
Paket der Seitenlaufumgebung

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,
    }
}

ele.onxxx = function(event) { }

Das Programm zeigt auf das Dom-Element selbst
obj.addEventListener(type, fn, false);
Das Programm zeigt auf das dom Das Element selbst
obj.attachEvent('on' + type, fn); Programmiert dies auf das Fenster



Was sind die Vorteile von Event-Bubbling und Event-Capturing?

(1) Blasenartige Ereignisse: Ereignisse werden in der Reihenfolge vom spezifischsten Ereignisziel zum am wenigsten spezifischen Ereignisziel (Dokumentobjekt) ausgelöst.

封装兼容性的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;
    }
}

IE 5.5: p -> body -> document

封装的兼容方法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;
    }
}

IE 6.0: p -> body -> html -> Mozilla 1.0: p –> body –> html –> bis Höchste Genauigkeit (Ereignisse können auch auf Fensterebene erfasst werden, dies muss jedoch ausdrücklich vom Entwickler angegeben werden).

(3) DOM-Ereignisfluss: Unterstützt zwei Ereignismodelle gleichzeitig: Erfassungsereignisse und Blasenereignisse, aber die Erfassungsereignisse treten zuerst auf. Beide Ereignisströme berühren alle Objekte im DOM, angefangen beim Dokumentobjekt bis hin zum Dokumentobjekt. Die einzigartigste Eigenschaft des DOM-Ereignismodells besteht darin, dass Textknoten auch Ereignisse auslösen (nicht im IE).

Ein typisches Beispiel für das Sprudeln von Ereignissen

Die Idee des Sprudelns besteht darin, auf Ereignisse auf Vorfahrenknoten zu warten und event.target/event.srcElement zu kombinieren, um den endgültigen Effekt zu erzielen entspricht dem folgenden Code:



Event-Blubbern stoppen

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="Erweiterte Ergänzung für JS-Dom-Ereignisse" >
  <img  src="star.gif" title="一般" / alt="Erweiterte Ergänzung für JS-Dom-Ereignisse" >
  <img  src="star.gif" title="还好" / alt="Erweiterte Ergänzung für JS-Dom-Ereignisse" >
  <img  src="star.gif" title="较好" / alt="Erweiterte Ergänzung für JS-Dom-Ereignisse" >
  <img  src="star.gif" title="很好" / alt="Erweiterte Ergänzung für JS-Dom-Ereignisse" >
 </p>
 // 五心好评的例子，不用给img添加，直接给父元素加

停止事件冒泡

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

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

相关推荐：

jquery之dom学习

原生js 操作dom

jQuery操作DOM的方法

Das obige ist der detaillierte Inhalt vonErweiterte Ergänzung für JS-Dom-Ereignisse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!