아주 기본적인 자바 스크립트 함수 호출

Question

2 일부터 리플릿 API를 사용하고 있습니다. 내가 예기치 않은 동작을하는 함수 호출에 갇혀있다.

var it=0; 

var map = L.map('map1', { 
    center:[51.505,-0.09], 
    zoom: 2, 
}); 

L.tileLayer('http://{s}.tile.cloudmade.com/c77b2fb7bfb74f74998061abda20d58f/997/256/{z}/{x}/{y}.png',{ 
    attribution: '2013 &copy @ Rajat/Akshat', 
    maxZoom: 18 
}).addTo(map); 

var marker = L.marker([51.5,-0.09], {draggable: true, opacity: 0.8}).addTo(map); 

function onDragEnd(e) { 
    var lat_marker = e.target._latlng.lat; 
    var lng_marker = e.target._latlng.lng;  
} 

var i=6; 
marker.on('dragend',onDragEnd(event)); 

div ID가 HTML 페이지에 작성되었습니다 MAP1을 다음과 같이 코드입니다.

이제 문제는이 기능은 다음과 같습니다

marker.on('dragend',onDragEnd(event)); 

는이 오류를

ReferenceError: event is not defined

marker.on('dragend',onDragEnd(event));

을 보여줍니다하지만 어떤 인수 marker.on('dragend',onDragEnd());없이 통과 할 때, 그것을 작동합니다.

또한, 나는 함수에서 내 자신의 매개 변수를 추가 할 : i은 몇 가지 간단한 변수입니다

marker.on('dragend',onDragEnd(i)); 

. 하지만이 함수에서 잘못된 점은 예상대로 작동하지 않습니다.

Answer 1

onDragEnd(event) 

이 기능을 실행합니다. 당신은 함수가 즉시 기능을 실행 한 후 ()를 사용

marker.on('dragend',onDragEnd); 

을 참조하는 함수에 전달해야합니다. 끌기가 끝나면이 메서드를 콜백으로 사용하면됩니다.

이 메서드를 호출하면 이벤트 객체가 y default로 전달됩니다. 그래서 당신은

for(var i=0; i < $('span').length ; i++) { 
    $('span').eq(i).on('click', bindClick(i)); 
} 

function bindClick(index) { 
    return function(e) { 
     dragEnd(e, index); 
    } 
} 

function dragEnd(e, index) { 
    console.log(e); 
    console.log(index); 
} 

코드 ..

function onDragEnd(event) { 

당신이이 라인에서 뭔가를 시도 할 수 있습니다 사용자 정의 매개 변수를 전달하려면 인자로 전달에 대해 걱정할 필요가 없습니다

for (var i = 0; i < $('.marker').length; i++) { 
    var marker = $('.marker').eq(i); 
    $('span').eq(i).on('dragend', bindDragEnd(i)); 
} 

function bindDragEnd(index) { 
    return function (e) { 
     dragEnd(e, index); 
    } 
} 

function dragEnd(e, index) { 
    console.log(e); 
    // you can access the marker object 
    //by accessing it like $('.marker').eq(index) 
} 

Check Fiddle