Heim > Artikel > Web-Frontend > Was ist der Unterschied zwischen onClick und click in jQuery? Einführung in den Unterschied zwischen onClick und click in jQuery

Was ist der Unterschied zwischen onClick und click in jQuery? Einführung in den Unterschied zwischen onClick und click in jQuery

不言nach vorne: 2018-10-17 16:38:414547Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Frage, was der Unterschied zwischen onClick und click in jQuery ist. Die Einführung in den Unterschied zwischen onClick und Click in jQuery hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

Raus aus der Situation

Dieses Problem hatte ich in meinem vorherigen Unternehmen nicht, also habe ich mich nicht damit beschäftigt. Bis ich mein aktuelles Unternehmen wechselte, war ich am zweiten Tag sehr hilflos. Da das Projekt dringend war, war es zu spät, das Framework zu wechseln -Layout, also musste ich fortfahren.

Inmitten der Situation

Überall gibt es Listen und dynamische Seiten, die von js erstellt wurden. Plötzlich passierte ein Unfall. ==Das von mir gebundene Klickereignis ist ungültig==.

Situationslösung

Der Grund, den ich damals wusste, war, dass die dynamisch erstellten Elemente während der Initialisierung noch nicht verfügbar waren. Wie konnten also die von mir gebundenen Ereignisse gebunden werden? ? Nun (==Ich kannte damals weder den Unterschied zwischen onclick und click noch die unten erläuterte Verwendung von onclick==)

Lösung

$("#list").on('click',function(e){
        var ev = e || window.event;
        var target = ev.target || ev.srcElement;
        if (target.nodeName.toLowerCase() == 'a' && target.className=='reset') {
            msgconfirm('','是否确认重置密码？',function(){
                ajax('/user/reset?id='+target.type,'','get','json',null,function(data){
                    var userObj=data.tUser;
                    tipalert('',{
                        data:'密码重置成功',
                        username:userObj.account,
                        password:userObj.passWord,
                        uKey:userObj.key.replace(/\,/img,'</br>')
                    },'../../images/ok-ico.png',function(){
                        window.location.reload();
                    })
                })
            })
        }
    })

jquery+native, ich möchte auch nicht, aber ich konnte keine andere Lösung finden. Obwohl sie nicht gut aussah und die Leistung nicht sehr gut war, habe ich mich nicht damit befasst Es.

. . . . . . . . . .

Nach einer langen, langen Zeit nach der Situation

Jetzt sehe ich den Code anderer Leute

$("body").on("keyup","#userId,#password",function(){
        if(event.keyCode==13){
            loginFunc();
        }
    });

Ich möchte mir wirklich sagen: „Was machst du?“

Ich habe damals wirklich nicht viel darüber nachgedacht. Ich habe im Internet nachgeschaut und festgestellt, dass onclick für dynamische Elemente und click für statische Elemente geeignet ist. Aber es wurde nicht gesagt, warum. Oben gibt es viel Unsinn. Lassen Sie mich unten mein Verständnis erläutern.

Lass uns zuerst über die Vorinterpretation in js sprechen

Seiteninitialisierung

Variablen

Grafik LR
Variable-->|. Initialisierung|Variable initialisieren, aber keinen Wert zuweisen
Variable initialisieren, aber keinen Wert zuweisen-->|Initialisierung abgeschlossen|Variablenzuweisung

Funktion

graph LR
Funktion-->|Initialisierung|Bilden Sie einen neuen Raum im aktuellen Bereich – als aktuelle Speicherfunktion
Bilden Sie einen neuen Raum im aktuellen Bereich – als aktuelle Speicherfunktion- ->|. Initialisierung abgeschlossen |. Ausführungsfunktion

Nachdem wir die Vorerklärung gelesen haben, sprechen wir über das heutige Thema

Der Unterschied zwischen onclick und Klicken Sie während der Initialisierung

Statische Elemente binden: Das Element ist vorhanden und die Vorinterpretation ist in Ordnung, daher gibt es keinen Unterschied; 🎜>Dynamische Elemente binden: Element existiert nicht, Vorinterpretation, Elemente können nicht gefunden werden, wie vorab interpretiert werden kann, daher gibt es keine Möglichkeit, ob es sich um einen Klick oder einen Klick handelt Binden Sie statische Elemente, um die Ereignisbindung dynamischer Elemente zu implementieren:

<html>

    <div class="test">
        <button class="new" id="newon">NewOn</button> 
        <button class="new" id="newclick">NewClick</button>
        <ul class="li"> 
            <li>原先的HTML元素on<button class="deleteon">Delete</button></li> 
            <li>原先的HTML元素click<button class="deleteclick">Delete</button></li> 
        </ul> 
    </div>
    <script>
        $("#newclick").click(function(){ 
            $(".li").append('<li>动态添加的HTML元素click<button class="deleteclick">Delete</button></li>'); 
        });
        $("#newon").click(function(){ 
            $(".li").append('<li>动态添加的HTML元素on<button class="deleteon">Delete</button></li>'); 
        });
        $(".delete").click(function(){ 
            $(this).parent().remove(); 
        }); 
        //删除选中元素
        $(".li").on('click', ".deleteon", function(){
            $(this).parent().remove(); 
        })
        //看看，删除不了吧
        $(".deleteclick").click(function(){ 
            $(this).parent().remove(); 
        });
    </script>
    
</html>

Verwendung von onclick (jquery, jquery+native)

In Bezug auf die Verwendung war es so Ich habe es erst heute vorgestellt. Es stellte sich heraus, dass es beim Binden von Ereignissen möglich ist, aber ich bin tatsächlich auf den ersten Blick umgestiegen.
Zusammenfassung der Situation

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen onClick und click in jQuery? Einführung in den Unterschied zwischen onClick und click in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery 堆 JS 作用域事件

Stellungnahme：

Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Detaillierte Erläuterung der Verwendung des Defer-Attributs und des Async-Attributs in JavascriptNächster Artikel：Detaillierte Erläuterung der Verwendung des Defer-Attributs und des Async-Attributs in Javascript

In Verbindung stehende Artikel

Mehr sehen