search

Home >Web Front-end >JS Tutorial >What is the difference between onClick and click in jQuery? Introduction to the difference between onClick and click in jQuery

What is the difference between onClick and click in jQuery? Introduction to the difference between onClick and click in jQuery

不言
不言forward
2018-10-17 16:38:414587browse

The content of this article is about the difference between onClick and click in jQuery? The introduction to the difference between onClick and click in jQuery has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Outside of the situation

I didn’t encounter this problem in my previous company, so I didn’t go into it further. Until I changed my current company, I started writing a half-written project by others on the second day. I was very helpless. It was either native or jquery. Because the project was urgent, it was too late to switch the framework and re-layout, so I had to continue.

In the situation

There are lists everywhere, and dynamic pages created by js are everywhere. Okay, let me continue. Suddenly, an accident happened. ==The click event I bound is invalid==.

Situation-Solution

The reason I knew at the time was that the dynamically created elements were not yet available during initialization, so how could the events I bound be bound? Well (==At that time, I didn’t know the difference between onclick and click, nor did I know the usage of onclick explained below==)

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, I don’t want it either , but I couldn't find any other solution. The solution was OK. Although it didn't look good and the performance wasn't very good, I didn't delve into it.

. . . . . . . . . .

After a long, long time after the situation

That's now, seeing other people's code

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

I really want to say to myself "what are you doing?" .

I really didn’t think too much about it at the time. I checked on the Internet and said that onclick is suitable for dynamic elements and click is suitable for static elements. But it didn't say why. There is a lot of nonsense above, let me explain my understanding below.

Let’s talk about the pre-interpretation in js first

Page initialization

Variables

graph LR
Variable-->| Initialization|Initialize variable but will not assign value
Initialize variable but will not assign value-->|Initialization completed|Variable assignment

Function

graph LR
Function-->|Initialization|Form a new space in the current scope-as a storage current function
Form a new space in the current scope-as a storage current function-->| Initialization completed | Execution function

After reading the pre-explanation, let’s talk about today’s topic

  1. The difference between onclick and click during initialization

    1. Bind static elements: The element exists, and the pre-interpretation is OK, so there is no difference;

    2. Bind dynamic elements: Element It does not exist, pre-interpretation, the elements cannot be found, how to pre-interpret it, so there is no way whether it is onclick or click;

    3. Bind static elements to implement event binding of dynamic elements ：

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

Usage of onclick (jquery, jquery native)

Regarding the usage, it has been introduced above. I only learned about this today. It turns out that it is Elements can be added when binding events, but I actually switched to native. At first glance, I looked like a novice, novice, novice.

Summary of the situation

Onclick is used for dynamic element binding, and both can be used for static element binding. For the unification of the code, it is better to use onclick. Remember, onclick can filter elements! !


The above is the detailed content of What is the difference between onClick and click in jQuery? Introduction to the difference between onClick and click in jQuery. For more information, please follow other related articles on the PHP Chinese website!

jquery 堆 JS 作用域 事件
Statement：
This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Detailed explanation of the usage of defer attribute and async attribute in JavascriptNext article：Detailed explanation of the usage of defer attribute and async attribute in Javascript

Related articles

See more