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 对象。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", "!");

通常 jQuery 设置this为元素，因此在 jQuery 插件中保留此模式可能是个好主意：

settings.mpEnterCallback.call(this, e);

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