Detaillierte Analyse der nativen Ereignisbeschreibung von js (Code beigefügt, einfach und klar)-js-Tutorial-php.cn

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

亚连

Freigeben： 2018-05-18 14:29:01

Original

1943 Leute haben es durchsucht

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>

Nach dem Login kopieren

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.

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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!