ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery の onClick と click の違いは何ですか? jQuery の onClick と click の違いの概要

jQuery の onClick と click の違いは何ですか? jQuery の onClick と click の違いの概要

不言
不言転載
2018-10-17 16:38:414547ブラウズ

この記事の内容は、jQuery における onClick と click の違いについてです。 jQuery における onClick と click の違いについての紹介は、参考になると思います。

状況外の状況

以前の会社ではこの問題に遭遇しなかったので、これ以上は立ち入りませんでした。今の会社に変わるまでは、他人が書きかけたプロジェクトを2日目から書き始めて、とても無力でした。プロジェクトが緊急だったので、フレームワークを切り替えてやり直すには遅すぎました。 -レイアウトなので、続行する必要がありました。

この状況では、どこにでもリストがあり、js によって作成された動的ページがどこにでもあります。 さて、突然、事故が起こりました。 ==バインドしたクリック イベントは無効です==。

状況-解決策

当時私が知っていた理由は、動的に作成された要素が初期化中にまだ利用可能ではなかったので、バインドしたイベントをどのようにバインドできるのかということでした。そうですね (==当時は 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 ネイティブも必要ありませんが、他の解決策は見つかりませんでしたが、見た目も良くなく、パフォーマンスもあまり良くありませんでした。それ。

。 。 。 。 。 。 。 。 。 。

この状況から長い長い時間が経ち、

今、他の人のコードを見て、本当に「何をしているの?」と自分に言いたくなります。

当時はそれについてあまり考えていませんでした。インターネットで調べたところ、動的要素にはonclick、静的要素にはclickが適していると書かれていました。しかし、その理由は語られなかった。上記にはナンセンスな部分がたくさんありますが、以下に私の理解を説明させてください。

# まずは js の事前解釈について話しましょう

ページの初期化

変数

グラフ LR変数-->初期化|変数を初期化しますが、値は割り当てられません
変数を初期化しますが、値は割り当てられません-->|初期化が完了しました|変数の割り当て

関数

graph LR
関数-->|初期化|現在のスコープに新しい空間を形成する - ストレージ現在の関数として
現在のスコープに新しい空間を形成する - ストレージの現在の関数として - ->| 初期化が完了しました | 実行関数

事前説明を読んだ後、今日のトピックについて話しましょう



onclick と初期化中にクリック

  1. 静的要素をバインド: 要素は存在し、事前解釈は OK なので、違いはありません。 ##動的要素のバインド: 要素が存在しません。事前解釈です。要素が見つかりません。事前解釈する方法があるため、onclick か click かはわかりません。

    静的要素をバインドして動的要素のイベントバインディングを実装する :

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

      onclickの使い方(jquery、jqueryネイティブ)

    2. 使い方に関しては、イベントをバインドするときに要素を追加できることを今日初めて知りましたが、一見、初心者、初心者、初心者のように見えました。
    3. 状況の概要

    4. Onclick は動的要素のバインディングに使用されますが、両方とも静的要素のバインディングに使用できます。コードを統一するには、onclick を使用することをお勧めします。 onclick では要素をフィルタリングできます。 !

以上がjQuery の onClick と click の違いは何ですか? jQuery の onClick と click の違いの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。