Heim > Artikel > Web-Frontend > Detaillierte Analyse der nativen Ereignisbeschreibung von js (Code beigefügt, einfach und klar)

Detaillierte Analyse der nativen Ereignisbeschreibung von js (Code beigefügt, einfach und klar)

亚连Original: 2018-05-18 14:29:011993Durchsuche

Die folgenden js-Native-Events habe ich für Sie zusammengestellt. Interessierte Studierende können einen Blick darauf werfen.

1. Der Ereignisfluss
Der Ereignisfluss ist hauptsächlich in zwei Typen unterteilt: Ereignissprudeln und Ereigniserfassung. Ereignisse sprudeln, wobei das Zielelement das Ereignis zuerst empfängt und sich dann allmählich nach oben zu weniger spezifischen Knoten ausbreitet. Die Ereigniserfassung ist genau das Gegenteil. Die Grundidee besteht darin, dass weniger spezifische Knoten das Ereignis zuerst empfangen und es dann schrittweise bis zum Zielknoten weitergeben.

<html>
    <head>
        <title>事件流</title>
    </head>
    <body>
        <div id ="testDiv"></div>
    </body>
 </html>

Wenn auf ein Div geklickt wird, erhält das Bubbling-Ereignis die Knotenreihenfolge div->body->html->document
Das Capture-Ereignis empfängt die Knotenreihenfolge document->html-> ;body ->div

2. Ereignishandler
a) HTML-Ereignishandler
Jedes von einem Element unterstützte Ereignis kann ein HTML-Attribut mit demselben Namen wie der entsprechende angegebene Ereignishandler verwenden.
Nachteile: 1. Zeitunterschiedsproblem, der Benutzer hat möglicherweise auf das Seitenelement geklickt, bevor der Browser die Klickereignisfunktion analysiert hat – wickeln Sie den Fehler durch Try-Catch ein
2. Die Bereichskette des Ereignishandlers ist Verschiedene Browser können zu unterschiedlichen Ergebnissen führen.
3. HTML-Code und Javascript-Code sind eng miteinander verbunden, was der Erweiterung und Wartung nicht förderlich ist.
b) Event-Handler auf DOM0-Ebene
Weisen Sie die Funktion dem Element-Event-Handler-Attribut zu
var btn = document.getElementById(“#dv“);
btn.onclick = function(){} ;
Der Event-Handler des Elements, das Sie löschen möchten – btn.onclicn = null;

Der auf diese Weise hinzugefügte Event-Handler wird während der Event-Bubbling-Phase verarbeitet. ? (true bedeutet, dass der Handler in der Capture-Phase aufgerufen wird, false bedeutet, dass der Event-Handler in der Bubbling-Phase aufgerufen wird)

Hinweis: addEventListener muss durch RemoveEventListener gelöscht werden und die Parameter müssen konsistent sein, sodass anonyme Funktionen, die über addEventListener hinzugefügt werden, nicht möglich sind entfernt werden.

d)IE事件处理程序

attachEvent
detachEvent
两个方法接收相同的两个参数（”onclick”,”function(){}”）;
由于IE8级更早版本只支持事件冒泡,所以通过attachEvent添加的事件处理程序只能被添加到冒泡阶段。
注意：attach中第一个参数是onclick而不是addEventListener中的click
IE事件处理程序attachEvent添加的在全局作用域中运行

var btn = document.getElementById(“#tes”); 
btn.attachEvent(“onclick”,function(){ 
alert(this == window); //true 
})

3、跨浏览器的事件处理程序。
由于不同浏览器之间事件处理程序不同，所以有必要编写可以跨浏览器使用的事件处理程序。

var eventUtil = {
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent("on" + type,handler);
        }else{
            element["on" + type] = handler;
        }
    },
    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.deatchEvent){
            element.deatch("on" + type,handler);
        }else{
            element["on" + type] = null;
        }
    }
}

上面是我整理给大家的，希望今后会对大家有帮助。

JS弹出窗口代码大全

几个前端常见的JS排序代码

JS去掉字符串前后空格或去掉所有空格的用法

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse der nativen Ereignisbeschreibung von js (Code beigefügt, einfach und klar). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie natives JS, um die Formularserialisierung zu implementieren (grafisches Tutorial)Nächster Artikel：Verwenden Sie natives JS, um die Formularserialisierung zu implementieren (grafisches Tutorial)

In Verbindung stehende Artikel

Mehr sehen