Quelle est la différence entre onClick et click dans jQuery ? Introduction à la différence entre onClick et click dans jQuery

Le contenu de cet article porte sur quelle est la différence entre onClick et click dans jQuery ? L'introduction à la différence entre onClick et click dans jQuery a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'elle vous sera utile.

Hors de la situation

Je n'ai pas rencontré ce problème dans mon ancienne entreprise, donc je ne l'ai pas creusé. Jusqu'à ce que je change d'entreprise actuelle, j'ai commencé à écrire un projet à moitié écrit par d'autres le deuxième jour. C'était soit natif, soit jquery. Parce que le projet était urgent, il était trop tard pour changer de framework et réorganiser. mise en page, j'ai donc dû continuer.

Au milieu de la situation

Il y a des listes partout et des pages dynamiques créées par js partout. D'accord, laissez-moi continuer. Du coup, un accident s'est produit. ==L'événement de clic que j'ai lié n'est pas valide==.

Situation-Solution

La raison pour laquelle je savais à l'époque était que les éléments créés dynamiquement n'étaient pas encore disponibles lors de l'initialisation, alors comment les événements que j'ai liés pourraient-ils être liés ? Eh bien (==Je ne connaissais pas la différence entre onclick et click à ce moment-là, et je ne connaissais pas non plus l'utilisation de onclick expliquée ci-dessous==)

Solution

$("#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, moi non plus, je ne voulais pas, mais je n'ai trouvé aucune autre solution, donc la solution était OK Même si elle n'avait pas l'air bonne et que les performances n'étaient pas très bonnes, je l'ai fait. Je ne vais pas m'y plonger.

. . . . . . . . . .

Après très, très longtemps après la situation

C'est maintenant, en voyant le code des autres

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

J'ai vraiment envie de me dire « qu'est-ce que tu fais ? Leh".

Je n’y pensais vraiment pas beaucoup à l’époque. J'ai vérifié sur Internet et dit que onclick convient aux éléments dynamiques et click convient aux éléments statiques. Mais il n'a pas précisé pourquoi. Il y a beaucoup d'absurdités ci-dessus, laissez-moi vous expliquer ma compréhension ci-dessous.

Parlons d'abord de la pré-interprétation en js

Initialisation de la page

Variables

graphique LR
Variable-->| Initialisation|Initialiser la variable mais n'attribuera pas de valeur
Initialiser la variable mais n'attribuera pas de valeur-->|Initialisation terminée|Affectation de variable

Fonction

graph LR
Fonction-->|Initialisation|Former un nouvel espace dans la portée actuelle-en tant que fonction actuelle de stockage
Former un nouvel espace dans la portée actuelle-en tant que fonction actuelle de stockage- ->| Initialisation terminée | Fonction d'exécution

Après avoir lu la pré-explication, parlons du sujet d'aujourd'hui

1. La différence entre onclick et cliquez pendant l'initialisation

1. Lier les éléments statiques : L'élément existe, et la pré-interprétation est OK, donc il n'y a pas de différence

2. Lier des éléments dynamiques : élément n'existe pas, pré-interprétation, éléments introuvables, comment pré-interpréter, donc il n'y a aucun moyen que ce soit sur clic ou clic ; Lier des éléments statiques pour implémenter la liaison d'événements d'éléments dynamiques :

3. Utilisation de onclick (jquery, jquery+native)
Concernant l'utilisation, il a a été présenté ci-dessus, et je ne l'ai appris qu'aujourd'hui. Il s'avère que vous pouvez ajouter des éléments lors de la liaison d'événements, mais en fait, je suis passé au natif à première vue, j'avais l'air d'un novice, d'un novice, d'un novice.

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

Résumé de la situation

Onclick est utilisé pour la liaison d'éléments dynamiques, et la liaison d'éléments statiques peut être les deux. Pour l'unification du code, utilisez onclick pour les deux. N'oubliez pas que onclick peut filtrer les éléments ! !

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!