Question

我的主要问题是从事件处理程序传递的内容，特别是鼠标输入事件。

我在插件中有代码如下：

(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个参数时。

Answer 1

原因是call的第一个参数是thisArg：

语法：fun.call(thisArg[, arg1[, arg2[, ...]]])

参数

thisArg - 为乐趣调用提供的值。请注意，这可能不是方法看到的实际值：如果方法是a   在非严格模式代码中的函数，null和undefined将被替换   使用全局对象，原始值将被加框。

ARG1，   arg2，...       对象的参数。

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

正如您在此short demo中看到的那样，第一个参数传递给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);
 }

我需要帮助来理解使用.call（）在jQuery鼠标事件中的回调？

1 个答案: