首頁 > web前端 > js教程 > jQuery中onClick和click有何不同? jQuery中onClick和click的區別介紹

jQuery中onClick和click有何不同? jQuery中onClick和click的區別介紹

不言
發布: 2018-10-17 16:38:41
轉載
4564 人瀏覽過

本篇文章帶給大家的內容是關於jQuery中onClick和click有何不同? jQuery中onClick和click的差別介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

狀況之外

在之前的公司並沒有遇到這個問題,也就沒有深究。直到自己換了現在的公司,剛來第二天就開始寫別人寫到一半的項目,很無奈,不是原生就是jquery,由於項目急,已經來不及切換框架重新佈局,只能繼續了。

狀況之中

到處都是列表,到處都是js創建的動態頁面,好吧,那我也繼續吧,突然,意外發生了。 ==我綁定的click事件無效==。

狀況-解決唄

當時知道的原因是動態建立的元素在初始化的時候還沒有,那我綁定的事件怎麼可能綁定的上嘛(==當時還不知道onclick和click差別,也不知道onclick下面介紹的用法==)

解決方法

$("#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 原生,我也不想的,可是我又找不到別的解決方案,解決就OK了,雖然不好看,性能也不是太好,但是我也沒有深究。

。 。 。 。 。 。 。 。 。 。

狀況之後的好久以後

那就是現在啦,看到別人的代碼

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

我真的想對自己說“what are you 弄啥嘞” 。

當時真的是沒想那麼多。在網路上查了一下都說onclick適用於動態元素,click適用於靜態元素。但是並沒有說為什麼。上面廢話一大堆,下面我說一下我的理解吧。

先說一下js中的預解釋

頁面初始化

##變數

# graph LR

變數-->|初始化|初始化變數但是不會賦值
初始化變數但是不會賦值-->|初始化完成|變數賦值

函數

graph LR

函數-->|初始化|在當前作用域形成一個新的空間-作為存儲當前函數
在當前作用域形成一個新的空間-作為存儲當前函數-->|初始化完成|執行函數

看完預解釋就說一下今天的主題吧

  1. onclick和click在初始化時的差異

    1. 綁定靜態元素:元素存在,預先解釋OK,所以是沒啥區別啦;

    2. 綁定動態元素:元素不存在,預先解釋,元素都找不到,咋預解釋啊,所以不管是onclick還是click都沒有辦法;

    3. 綁定靜態元素實現動態元素的事件綁定:

    <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>
    登入後複製
onclick的用法(jquery、jquery 原生)

關於用法,上面已經介紹了,這個也是我今天才知道的,原來在綁定事件的時候就可以加入元素,而我竟然轉到了原生,一看就很菜,小白啊小白。

狀況總結

動態元素綁定用onclick,靜態元素綁定兩者都可以,為了程式碼的統一還是都用onclick吧,切記,onclick可以篩選元素哦! !


以上是jQuery中onClick和click有何不同? jQuery中onClick和click的區別介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板