Search code examples
jqueryeventsmouseenter

I need help to understand the call back in jQuery mouse events using .call()?

My main question is what is being passed from the event handlers especially the mouse enter events.

I have code in a plugin as below:

(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);

The above code will cause the following handler to fire with the parameters as shown:

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

When I omit the first parameter then I get undefined for the el object in the call back. settings.mpEnterCallback.call(e, this);

I am trying to provide a simple callback function so that in the HTML script code handlers can be created for elements when the mouse enters or exits.

Example 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>

I am trying to provide handlers for all of the elements within the plugin as they all serve a function to the page.

Why and how can I determine the parameters for the event handlers. I see most of the time they have event data for the first parameter, but if I use that nothing works, the only time I can get the event handler's even data is when I use the 3 parameters.

Solution

  • The reason is that the first parameter of call is the thisArg:

    Syntax: fun.call(thisArg[, arg1[, arg2[, ...]]])

    Parameters

    thisArg - The value of this provided for the call to fun. Note that this may not be the actual value seen by the method: if the method is a function in non-strict mode code, null and undefined will be replaced with the global object, and primitive values will be boxed.

    arg1, arg2, ... Arguments for the object.

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

    As you can see in this short demo the first argument is passed to this:

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

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

    Usually jQuery sets this to the element so it's probably a good idea to keep this pattern in your jQuery plugin:

    settings.mpEnterCallback.call(this, e);

function(e){
    console.log("event data: " + e);
    console.log("element" + this);
 }