Javascript / jQuery에서 (e)는 무엇을 의미합니까?
저는 JavaScript / jQuery를 처음 접했고 함수를 만드는 방법을 배우고 있습니다. 많은 기능이 괄호 안에 (e)로 표시됩니다. 제가 의미하는 바를 보여 드리겠습니다.
$(this).click(function(e) {
// does something
});
함수는 항상 (e)의 값을 사용하지 않는 것처럼 보이지만 왜 그렇게 자주 사용됩니까?
e
event
이벤트 핸들러에 전달 될 객체에 대한 짧은 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
http://www.quirksmode.org/dom/events/index.html
http://www.w3.org/TR/DOM-Level-3-Events/#event-types-list
면책 조항 : 이것은이 특정 게시물에 대한 매우 늦은 답변이지만이 질문에 대한 다양한 답변을 읽었으므로 대부분의 답변이 숙련 된 코더 만 이해할 수있는 용어를 사용한다는 것을 알게되었습니다. 이 답변은 초심자 청중을 염두에두고 원래 질문을 해결하려는 시도입니다.
소개
작은 ' (e) '는 사실 자바 스크립트에서 이벤트 처리 함수라고하는 더 넓은 범위의 일부입니다. 모든 이벤트 처리 함수는 이벤트 객체를받습니다. 이 논의의 목적을 위해, 객체는 다른 언어의 객체와 매우 유사한 속성 ( 변수 ) 및 메소드 ( 함수 ) 를 보유한 "사물"로 생각하십시오 . 작은 (e) 것 안의 ' e ' 핸들 은 객체와 상호 작용할 수있게 해주는 변수와 같습니다 (그리고 저는 변수 VERY 라는 용어를 느슨하게 사용합니다 ).
다음 jQuery 예제를 고려하십시오.
$("#someLink").on("click", function(e){ // My preferred method
e.preventDefault();
});
$("#someLink").click(function(e){ // Some use this method too
e.preventDefault();
});
설명
- "#someLink"는 요소 선택기입니다 (HTML 태그가이를 트리거 함).
- "클릭"은 이벤트 (선택한 요소를 클릭 할 때)입니다.
- "function (e)"은 이벤트 처리 함수입니다 (이벤트시 객체가 생성됨).
- "e"는 개체 처리기입니다 (개체에 액세스 할 수 있음).
- "preventDefault ()"는 객체가 제공하는 메서드 (함수)입니다.
무슨 일이야?
사용자가 ID가 "#someLink"인 요소(아마도 앵커 태그)를 클릭하면 익명 함수 "function (e)"을 호출하고 결과 개체를 처리기 "e"에 할당합니다. 이제 해당 핸들러를 가져 와서 해당 메서드 중 하나 인 "e.preventDefault ()"를 호출하면 브라우저가 해당 요소에 대한 기본 작업을 수행하지 못합니다 .
참고 : 핸들은 원하는대로 이름을 지정할 수 있습니다 (예 : ' function (billybob) '). 'e'는 '이벤트'를 나타내며 이러한 유형의 기능에 대한 표준으로 보입니다.
'e.preventDefault ()'가 이벤트 핸들러의 가장 일반적인 용도 일 수 있지만 객체 자체에는 이벤트 핸들러를 통해 액세스 할 수있는 많은 속성과 메서드가 포함되어 있습니다.
이 주제에 대한 몇 가지 좋은 정보는 jQuery의 학습 사이트 인 http://learn.jquery.com 에서 찾을 수 있습니다 . jQuery Core 및 이벤트 사용 섹션에 특히주의하십시오 .
e
특별한 의미가 없습니다. e
매개 변수가 인 경우 함수 매개 변수 이름 으로 사용하는 것은 규칙 일뿐 입니다 event
.
그것은 될 수 있습니다
$(this).click(function(loremipsumdolorsitamet) {
// does something
}
as well.
The e
argument is short for the event object. For example, you might want to create code for anchors that cancels the default action. To do this you would write something like:
$('a').click(function(e) {
e.preventDefault();
}
This means when an <a>
tag is clicked, prevent the default action of the click event.
While you may see it often, it's not something you have to use within the function even though you have specified it as an argument.
In that example, e
is just a parameter for that function, but it's the event
object that gets passed in through it.
In jQuery e
short for event
, the current event object. It's usually passed as a parameter for the event function to be fired.
Demo: jQuery Events
In the demo I used e
$("img").on("click dblclick mouseover mouseout",function(e){
$("h1").html("Event: " + e.type);
});
I may as well have used event
$("img").on("click dblclick mouseover mouseout",function(event){
$("h1").html("Event: " + event.type);
});
Same thing!
Programmers are lazy we use a lot of shorthand, partly it decreases our work, partly is helps with readability. Understanding that will help you understand the mentality of writing code.
Today I just wrote a post about "Why do we use the letters like “e” in e.preventDefault()?" and I think my answer will make some sense...
At first,let us see the syntax of addEventListener
Normally it will be: target.addEventListener(type, listener[, useCapture]);
And the definition of the parameters of addEventlistener are:
type :A string representing the event type to listen out for.
listener :The object which receives a notification (an object that implements the Event interface) when an event of the specified type occurs. This must be an object implementing the EventListener interface, or a JavaScript function.
(From MDN)
But I think there is one thing should be remarked: When you use Javascript function as the listener, the object that implements the Event interface(object event) will be automatically assigned to the "first parameter" of the function.So,if you use function(e) ,the object will be assigned to "e" because "e" is the only parameter of the function(definitly the first one !),then you can use e.preventDefault to prevent something....
let us try the example as below:
<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>
the result will be : [object MouseEvent]5 and you will prevent the click event.
but if you remove the comment sign like :
<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>
you will get : 8 and an error:"Uncaught TypeError: e.preventDefault is not a function at HTMLInputElement. (VM409:69)".
Certainly,the click event will not be prevented this time.Because the "e" was defined again in the function.
However,if you change the code to:
<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>
every thing will work propertly again...you will get 8 and the click event be prevented...
Therefore, "e" is just a parameter of your function and you need an "e" in you function() to receive the "event object" then perform e.preventDefault(). This is also the reason why you can change the "e" to any words that is not reserved by js.
It's a reference to the current event object
$(this).click(function(e) {
// does something
});
In reference to the above code
$(this)
is the element which as some variable.
click
is the event that needs to be performed.
the parameter e
is automatically passed from js to your function which holds the value of $(this)
value and can be used further in your code to do some operation.
참고URL : https://stackoverflow.com/questions/10323392/in-javascript-jquery-what-does-e-mean
'IT박스' 카테고리의 다른 글
PHP의 오류 로그는 XAMPP에서 어디에 있습니까? (0) | 2020.09.24 |
---|---|
문자열을 날짜 T-SQL로 변환하는 방법은 무엇입니까? (0) | 2020.09.24 |
ng-init에서 여러 값 선언 (0) | 2020.09.24 |
jQuery로 테이블 만들기-추가 (0) | 2020.09.23 |
.gitignore는 .idea 경로를 무시하지 않습니다. (0) | 2020.09.23 |