addEventListener를 사용하여 함수 내에서 매개 변수로 이벤트를 추가합니다 (FF/IE에서는 작동하지 않음). 자바 스크립트

<html> 
<head> 
<title>FML</title> 

<script type="text/javascript"> 

function function1(e, div) { 
div.innerHTML="this works" 
document.getElementById('myspan').innerHTML= 'x-pos on click: ' + e.clientX 
div.addEventListener("mousemove", function(){test(event, this)}, true); 
} 

function test(e, div) { 
div.innerHTML+='<br/>so does this' 
//This doesn't work. Can't add event as a parameter to function that has to be executed when using addEventListener 
document.getElementById('myspan2').innerHTML= 'y-pos on move: ' + e.clientY 
} 

</script> 
</head> 
<body> 
<span id="myspan">&nbsp;</span> 
<span id="myspan2">&nbsp;</span> 
<div style="width:100px;height:100px;background-color:blue;overflow:hidden;" onclick="function1(event, this)"> 
</body> 
</html>

파란색 div를 클릭하십시오.addEventListener를 사용하여 함수 내에서 매개 변수로 이벤트를 추가합니다 (FF/IE에서는 작동하지 않음). 자바 스크립트

나는, 이벤트 마우스 오버를 추가 할 그것을 테스트() 실행이 - 다음과 같은 매개 변수를 포함해야합니다 기능 : 기능 검사 (e는, DIV가) I "는가 계속 호출이 이벤트

을 이벤트가 정의되지 않았습니다 "라는 오류가 발생합니다. 아이러니 컬하게는 Chrome과 Safari에서 완벽하게 작동하지만 Firefox와 IE에서는 오류가 발생합니다.

어떤 방법 으로든 addEventListener를 사용하여 이벤트 매개 변수를 추가 할 수 있습니까? 크롬과 사파리에서 window.event로 작동하도록 할 수는 있지만, 이것이 내가 원하는 정확한 설정입니다. 내가 끈적 거리는 동안 googling하고 재판/오류가있어 ... FML :/어떤 팁/힌트/... 머리에 총을 쏘는 것 외에?

jquery가이 모든 문제를 해결할 것이라고 알고 있지만 jQuery로 마이그레이션하기 전에 javascript에 능숙 해지고 싶습니다. 또는 어쨌든 마이그레이션해야합니까?

감사와 환호, p.

출처

2011-09-12 Pascalculator

내 답변 외에도 "jquery가이 모든 문제를 해결할 것이라고 알고 있지만 jQuery로 마이그레이션하기 전에 javascript에 능숙 해지고 싶습니다." 이것은 언어를 배우는 올바른 방법입니다. JS 커뮤니티에서는보기 드뭅니다. 사람들이 여기, 그래서 여기에, jQuery의 특수한 구조를 묻는조차도 if-then-else를 대체 할 것을 요구했기 때문에 ... :-D – Imp

div.addEventListener("mousemove", function(){test(event, this)}, true);

물론 "이벤트가 정의되지 않았습니다."라는 메시지가 나타납니다. mousemove 이벤트가 트리거되면, 이벤트 핸들러가 호출됩니다 : 이벤트 정보 객체에 도달하는 방법은 두 가지가 있습니다

function(){test(event, this)}

. 인수로 이벤트 핸들러로 전달되거나 window.event에서 찾을 수 있습니다.

두 번째 경우가 있다고 가정합니다. 함수에 event이라는 로컬 변수가 없으며 function1에 변수가 없으므로 브라우저는 전역 개체에 event이 정의되어 있는지 확인합니다. 자바 스크립트에서 전역 객체는 window라고, 그래서 당신의 기능은

function(){test(window.event, this)}

로 해석하고 그것을 작동합니다.

그러나 이전에 언급했듯이 일부 브라우저에서는 이벤트 정보가 인수로 전달됩니다. 그래서 이벤트 핸들러는 아마도 다음과 같이하고 싶었 :

function(event){test(event, this)}

그렇지 않으면 test()에 전달 된 event가 정의 될 것이다. 그래서,이 크로스 브라우저 처리기를 만드는 방법입니다 :

function(event) { 
    if (!event) // i.e. the argument is undefined or null 
     event = window.event; 

    test(event, this); 
}

두 번째 문제는 addEventListener() 나이의 IE (가 있지만, IE9에서하는)에서 작동하지 않는다는 것입니다. 이전 IE의 경우 attachEvent()과 비슷한 기능을 사용해야합니다.당신은 하나의 핸들러를 첨부하는 경우 또는, 당신은 그것을 간단한 식으로 이벤트가 매개 변수로 전달되어야 파이어 폭스와 같은 일부 브라우저에서

div.onmousemove = function() {...};

출처

2012-05-11 23:31:19 Imp

와우, 고마워! 이것은 너무 오랫동안 나를 괴롭 히고 있었고, 이것이 결코 풀리지 않을 것이라고 생각하지 않았습니다. 당신이 순수한 사람 같아 :) 그 동안 jQuery로 마이 그 레이션했지만, 아직 (운좋게도) 전체적인 (jQuery) 라이브러리를로드 할 필요가 없도록 더 작은 것들에 대해 JavaScript를 사용합니다. – Pascalculator

이 방법으로 이벤트 수신기를 제거 할 수 있습니까? 그렇지 않으면 익명 함수 내에서 명명 된 함수를 이런 식으로 중첩하는 것은 무엇입니까? –

을 수행 할 수 있습니다, 그래서 당신은이 코드

를 교체해야 이

div.addEventListener("mousemove", function(event){test(event, this)}, true);

와

div.addEventListener("mousemove", function(){test(event, this)}, true);

의 코드 신중하게 두 줄을 비교하고 이벤트를 통지 속성은 두 번째 행에 추가 된 함수의 매개 변수로 전달됩니다.

(예전 IE 용) attachEvent()을 사용해야합니다.

는 attachEvent이 하여 addEventListener 지금은 거의 모든 현대적인 브라우저 지원하는 현대적인 표준 JS 대체 된 공지 것을

div.attachEvent("onclick", function(event){test(event, this)});

여기 http://caniuse.com/#feat=addeventlistener 호환성 표를 볼 수 있습니다.

출처

2017-02-03 14:58:28

addEventListener를 사용하여 함수 내에서 매개 변수로 이벤트를 추가합니다 (FF/IE에서는 작동하지 않음). 자바 스크립트

답변

관련 문제