1

私の主な質問は、イベント ハンドラー、特にマウス入力イベントから何が渡されるかです。

以下のようにプラグインにコードがあります。

(function ($, undefined) {
$.fn.MyPlugin= function (options) {
    var defaults = {
        mpClickCallback: defaultCallback,
        mpEnterCallback: defaultCallback,
        mpExitCallback: defaultCallback
    };
    var settings = $.fn.extend(defaults, options);

    var list= $(this).find("#list");
    var items= $(menuList).find("li");

    var defaultCallback = function (bool, data, element){
    };


    $(list).each(function (){
        $(this).mouseenter(function(e){
            settings.mpEnterCallback.call(true, e, this);
        })
        .mouseleave(function(evt){
            settings.mpExitCallback.call(true, evt, this);
        })
        .click(function(evt){
            settings.mpClickCallback.call(true, evt, this);
        });


    });

    }
})(jQuery);

上記のコードにより、次のハンドラーが次のパラメーターで起動します。

$("#MyLists").MyPlugin({
    mpEnterCallback(e, el){
        console.log("event data: " + e);
        console.log("element" + el);
});

最初のパラメーターを省略すると、コールバックで el オブジェクトが undefined になります。settings.mpEnterCallback.call(e, this);

単純なコールバック関数を提供しようとしています。これにより、HTML スクリプトで、マウスの出入り時に要素のコード ハンドラーを作成できるようになります。

HTML の例:

<div id="MyLists">
  <ul id="mylist-list">
    <li>
      <div class="list-item">My first list item
        <a href="#item1">image link <span>link item</span> </a>
      </div>
      <div class="list-item-footer">
         image here
         image here
      </div>
    </li>
  </ul>
</div>

プラグイン内のすべての要素にハンドラーを提供しようとしています。それらはすべてページに機能を提供するためです。

イベント ハンドラーのパラメーターを決定する理由と方法を教えてください。ほとんどの場合、最初のパラメーターにイベント データがありますが、それを使用すると何も機能しません。イベント ハンドラーの偶数データを取得できるのは、3 つのパラメーターを使用するときだけです。

4

1 に答える 1

2

その理由は、の最初のパラメーターが次callのthisArgとおりであるためです。

構文：fun.call(thisArg[, arg1[, arg2[, ...]]])

パラメーター

thisArg - fun の呼び出しに提供される this の値。これは、メソッドによって表示される実際の値ではない可能性があることに注意してください。メソッドが非厳密モード コードの関数である場合、null および undefined はグローバル オブジェクトに置き換えられ、プリミティブ値はボックス化されます。

arg1、arg2、... オブジェクトの引数。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

この短いデモでわかるように、最初の引数は次のように渡されthisます。

function demo(e, el){
  console.log(this, e, el);
}

/* this = "hey"
 * e = "there"
 * el = "!"
 */
demo.call("Hey", "there", "!");

通常、jQuerythisは要素に設定するため、jQuery プラグインでこのパターンを維持することをお勧めします。

settings.mpEnterCallback.call(this, e);

function(e){
    console.log("event data: " + e);
    console.log("element" + this);
 }
于 2013-06-12T15:40:10.520 に答える