답변:
eevent이벤트 핸들러에 전달 될 객체에 대한 짧은 var 참조입니다 .
이벤트 개체에는 기본적으로 이벤트 처리기에서 사용할 수있는 흥미로운 메서드와 속성이 많이 있습니다.
게시 한 예제에서 MouseEvent
$(<element selector>).click(function(e) {
// does something
alert(e.type); //will return you click
}
데모 -마우스 이벤트 데모 사용e.which및e.type
유용한 참고 자료 :
http://api.jquery.com/category/events/
http://www.quirksmode.org/js/events_properties.html
http://www.javascriptkit.com/jsref/event.shtml
면책 조항 : 이것은이 특정 게시물에 대한 매우 늦은 답변이지만이 질문에 대한 다양한 답변을 읽었으므로 대부분의 답변이 숙련 된 코더 만 이해할 수있는 용어를 사용한다는 사실에 놀랐습니다. 이 답변은 초심자 청중을 염두에두고 원래 질문을 해결하려는 시도입니다.
작은 ' (e) '는 사실 자바 스크립트에서 이벤트 처리 함수라고하는 더 넓은 범위의 일부입니다. 모든 이벤트 처리 함수는 이벤트 객체를받습니다. 이 논의의 목적을 위해, 객체는 다른 언어의 객체와 매우 유사한 속성 ( 변수 ) 및 메서드 ( 함수 ) 를 포함하는 "사물"로 생각하십시오 . 작은 (e) 것 안의 ' e ' 핸들 은 객체와 상호 작용할 수있게 해주는 변수와 같습니다 (그리고 변수 라는 용어를 느슨하게 사용합니다 ).
다음 jQuery 예제를 고려하십시오.
$("#someLink").on("click", function(e){ // My preferred method
e.preventDefault();
});
$("#someLink").click(function(e){ // Some use this method too
e.preventDefault();
});
무슨 일이야?
사용자가 ID가 "#someLink"인 요소(아마도 앵커 태그)를 클릭하면 익명 함수 "function (e)"을 호출하고 결과 객체를 "e" 핸들러에 할당합니다. 이제 해당 핸들러를 가져 와서 해당 메서드 중 하나 인 "e.preventDefault ()"를 호출하면 브라우저가 해당 요소에 대한 기본 작업을 수행하지 못합니다 .
참고 : 핸들은 원하는대로 이름을 지정할 수 있습니다 (예 : ' function (billybob) '). 'e'는 '이벤트'를 나타내며 이러한 유형의 기능에 대한 표준으로 보입니다.
'e.preventDefault ()'가 이벤트 핸들러의 가장 일반적인 용도 일 수 있지만 객체 자체에는 이벤트 핸들러를 통해 액세스 할 수있는 많은 속성과 메서드가 포함되어 있습니다.
이 주제에 대한 몇 가지 좋은 정보는 jQuery의 학습 사이트 인 http://learn.jquery.com 에서 찾을 수 있습니다 . jQuery Core 및 이벤트 사용 섹션에 특히주의하십시오 .
jQuery의 e줄임말 event에서 현재 이벤트 객체입니다. 일반적으로 이벤트 함수가 실행되는 매개 변수로 전달됩니다.
데모 : jQuery 이벤트
데모에서 나는 e
$("img").on("click dblclick mouseover mouseout",function(e){
$("h1").html("Event: " + e.type);
});
내가 사용했을 수도 있습니다 event
$("img").on("click dblclick mouseover mouseout",function(event){
$("h1").html("Event: " + event.type);
});
같은 것!
프로그래머는 게으르다. 우리는 많은 속기를 사용하고 부분적으로 작업을 줄이며 부분적으로 가독성에 도움이된다. 이를 이해하면 코드 작성의 사고 방식을 이해하는 데 도움이됩니다.
오늘 저는 "e.preventDefault ()에서"e "와 같은 문자를 사용하는 이유는 무엇입니까?"에 대한 게시물을 작성했습니다. 그리고 내 대답이 의미가 있다고 생각합니다 ...
먼저 addEventListener 구문을 살펴 보겠습니다.
일반적으로 다음과 같습니다. target.addEventListener (type, listener [, useCapture]);
그리고 addEventlistener의 매개 변수 정의 는 다음과 같습니다.
type： 청취 할 이벤트 유형을 나타내는 문자열입니다.
listener： 지정된 유형의 이벤트가 발생했을 때 통지를받는 객체 (Event 인터페이스를 구현하는 객체). 이것은 EventListener 인터페이스를 구현하는 객체이거나 JavaScript 함수 여야합니다.
(MDN에서)
하지만 주목해야 할 점이 하나 있다고 생각 합니다. 자바 스크립트 함수를 리스너로 사용하면 Event 인터페이스 (object event)를 구현하는 객체 가 함수 의 "첫 번째 매개 변수" 에 자동으로 할당됩니다. function (e), "e"가 함수의 유일한 매개 변수이기 때문에 객체가 "e"에 할당됩니다 (확실히 첫 번째 매개 변수입니다!), 그런 다음 e.preventDefault를 사용하여 무언가를 방지 할 수 있습니다 ....
아래 예제를 시도해 보겠습니다.
<p>Please click on the checkbox control.</p>
<form>
<label for="id-checkbox">Checkbox</label>
<input type="checkbox" id="id-checkbox"/>
</div>
</form>
<script>
document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
//var e=3;
var v=5;
var t=e+v;
console.log(t);
e.preventDefault();
}, false);
</script>
결과는 [object MouseEvent] 5가 되며 클릭 이벤트를 방지합니다.
그러나 다음과 같이 주석 기호를 제거하면
<script>
document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
var e=3;
var v=5;
var t=e+v;
console.log(t);
e.preventDefault();
}, false);
</script>
당신은 얻을 것이다 : 8 과 오류 : "catch되지 않은 형식 오류 :. e.preventDefault가 HTMLInputElement (69 VM409)에서 함수가 아닙니다."
확실히 이번에는 클릭 이벤트가 방지되지 않을 것입니다. 함수에서 "e"가 다시 정의 되었기 때문입니다.
그러나 코드를 다음과 같이 변경하면
<script>
document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
var e=3;
var v=5;
var t=e+v;
console.log(t);
event.preventDefault();
}, false);
</script>
모든 것이 다시 올바르게 작동합니다 ... 8 을 얻고 클릭 이벤트가 방지됩니다 ...
따라서 "e"는 함수의 매개 변수 일 뿐이며 "이벤트 객체"를 수신하고 e.preventDefault ()를 수행하려면 function ()에 "e"가 필요합니다. 이것이 "e"를 js에 의해 예약되지 않은 단어로 변경할 수있는 이유이기도합니다.
$(this).click(function(e) {
// does something
});위의 코드를 참조하면
$(this)일부 변수로 사용되는 요소입니다.
click수행해야하는 이벤트입니다.
매개 변수 e는 js에서 값의 $(this)값 을 보유하는 함수로 자동으로 전달되며 코드에서 추가로 사용하여 일부 작업을 수행 할 수 있습니다.