.call()을 사용하여 jQuery 마우스 이벤트에서 콜백을 이해하는 데 도움이 필요합니까?

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

난 후 첫 번째 매개 변수를 생략 나는 콜백에서 엘 객체에 대해 정의되지 않은 것을 얻는다. 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 - 재미에 대한 호출을 위해 제공이의 값. 메서드에 의해 표시되는 실제 값이 아닐 수 있습니다. 메서드가 비 엄격 모드 코드의 함수 인 경우 null 및 undefined가 전역 개체로 바뀌고 기본 값이 boxed됩니다.

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