JS에서 이벤트 처리 함수 이름 뒤에 괄호가 있는지에 대한 질문

오늘은 이벤트 핸들러에 대한 작은 세부 사항을 요약해 보겠습니다. 먼저 이벤트 처리의 몇 가지 개념을 검토해 보겠습니다.

JS의 이벤트 처리(이벤트 바인딩)는 일부 또는 특정 이벤트가 특정 활동을 트리거하도록 하는 것입니다. DOM 레벨 0과 DOM 레벨 2라는 두 가지 일반적인 형식이 있습니다. 이 두 방법의 가장 큰 차이점은 DOM 레벨 0 이벤트 처리는 이벤트 버블링에만 사용할 수 있는 반면, DOM 레벨 2 이벤트 처리는 세 번째 매개변수를 설정하여 각각 이벤트 버블링과 이벤트 캡처를 지원할 수 있다는 것입니다.

DOM 레벨 0 이벤트 처리는 일반적으로 이벤트 핸들러에 직접 함수를 할당합니다. 방법 1에 표시된 것처럼 이벤트 핸들러를 스크립트에 할당할 수도 있습니다. 방법 2에 표시된 대로 이벤트 핸들러.

<!--方式一-->
<div onclick="fun1();fun2(&#39;world!&#39;);"></div>
<!--方式二-->
<div id="a">点我</div>
<script>
var a=document.getElementById("a");
a.onclick=fun1; //方式二
function fun1(){
alert("hello!");
}
function fun2(cc){
alert(cc);
}
</script>

이 두 방법의 차이점은 위의 예에서도 나타납니다. 첫 번째 방법은 동시에 여러 처리 기능을 바인딩할 수 있지만, 필요합니다. 전역 함수여야 합니다. 그렇지 않으면 참조 오류가 발생합니다. 두 번째 방법은 한 번에 하나의 처리 함수만 바인딩할 수 있습니다. 그렇지 않으면 새 함수가 이전 함수를 덮어씁니다.

DOM 레벨 2 이벤트 처리는 처리 기능을 직접 바인딩하지 않고 다음과 같이 함수를 이벤트 리스너로 추가하며 덮어쓰기 없이 여러 처리 기능을 바인딩할 수도 있습니다. 그러나 이 방법은 브라우저 호환성 문제가 있으므로 IE에서는 대신 AttachEvent 메서드를 사용해야 합니다.

a.addEventListener("click",fun1,false); //事件冒泡
a.addEventListener("click",anotherFun,false); //不会覆盖上一事件，均被执行

간략한 리뷰는 여기까지입니다. 다시 본론으로 돌아가서 리뷰 중에 헷갈리는 부분을 발견하셨는지 궁금합니다. 함수를 언급할 때 함수 이름 뒤에 괄호가 붙는 경우도 있고, 괄호가 붙지 않는 경우도 있습니다. 이것이 프로그램 작동에 어떤 영향을 미치나요? 정보를 참고한 후, 제가 이해한 바를 바탕으로 다음과 같이 간략하게 요약했습니다.

우선 괄호를 추가하세요. 프로그램에서 "fun1();"이라고 쓰는 경우가 많습니다. 예, 함수 이름 뒤에 괄호를 추가하면 함수 메모리에 즉시 함수가 실행됩니다. , 당신은 가치를 얻을 것입니다. 이것을 많이 사용하다 보면 앞서 언급한 이벤트 처리 함수 등 함수가 호출되는 모든 곳에 이렇게 작성하는 것이 익숙해질 수 있습니다. 그러나 이렇게 하면 통제할 수 없는 상황이 발생할 수 있습니다. 예를 들어 요소를 클릭할 때만 함수를 실행하고 싶지만 처음부터 함수가 실행되는 것을 발견했습니다. 위 예제에서 사용된 DOM0 모드 2와 DOM2 레벨 이벤트 처리 함수는 함수 이름 뒤에 괄호를 추가하지 않는 것을 알 수 있는데, 그 이유는 이러한 상황을 피하기 위함입니다. 괄호를 추가하면 fun1 함수가 즉시 트리거되어 실행됩니다.

그러면 DOM0 메소드 1에 괄호가 있는 이유는 무엇입니까? 태그의 이벤트 속성 사이의 따옴표가 js 문으로 직접 실행되기 때문입니다. 괄호를 추가해야만 함수를 호출하고 실행할 수 있습니다. 다만, 요소 태그를 이용하여 이벤트를 바인딩하기 때문에 태그 클릭 시 실행되도록 타이밍을 제어합니다.

함수명이 없고 바로 실행하고 싶다면? 즉, 익명 함수 표현식이 즉시 실행되는 모드입니다. 그 뒤에 즉시 실행 괄호가 있는지 살펴보겠습니다. 이 IIFE 형식에서 전체 함수 본문을 둘러싸는 괄호는 범위를 제한합니다. 특히 IIFE에 관심이 있는 아동화는 관련 정보를 확인할 수 있지만 여기서는 자세히 설명하지 않습니다.

(function(){
//do something...
})();

이제 괄호 없이 사례를 분석해 보겠습니다. 앞서 괄호를 추가하지 않으면 제어력을 잃을 수 있다고 언급했습니다. 함수 이름만 이벤트에 전달하는 것은 함수 포인터(즉, 이 함수의 항목 주소)를 요소 이벤트에 전달하는 것과 동일하기 때문입니다. 이 기능의 장점은 필요할 때 해당 기능을 찾아서 실행할 수 있다는 것입니다. 작은 비유를 사용하자면, 친구를 만났을 때 괄호를 추가하면 그 친구는 당신이 그 시간에 바쁜지 상관하지 않고 초대받지 않은 불쾌한 느낌이 들게 됩니다. 괄호를 추가하는 것은 친구가 자신의 집이 어디인지 알려주고 필요할 때 찾아오는 것과 같습니다. 이것은 정말 사려 깊은 친구입니다. 따라서 대부분의 이벤트 바인딩은 함수 이름인 함수 포인터를 이벤트에 전달합니다.

이때 또 궁금한 점이 있습니다. 앞서 설명한 함수는 모두 매개변수가 없는 함수입니다. 코드예시에서 fun2처럼 매개변수화된 함수라면 어떨까요? DOM0 메소드 1만 사용할 수 있나요? 물론 부정적이다. 구조와 행위의 분리 원칙을 따르지 않는 DOM0 모드 1을 사용하지 않도록 하라. 일반적으로 이 상황은 다음 코드와 같이 익명 함수를 사용하여 해결됩니다. 좋은 제안 있으시면 메시지 남겨주세요~

//DOM Level 0
a.onclick=function(){
fun2("world!");
};
//DOM Level 2
a.addEventListener("click",function(){fun2("world!");},false);