JavaScript 이벤트를 처리하는 방법에는 세 가지가 있습니다. 1. HTML 이벤트 핸들러, HTML 코드에 이벤트 핸들러를 직접 추가합니다. 구문은 "<element event=event function...>"입니다. 2. DOM0 수준 이벤트 핸들러의 경우 지정된 객체 이벤트 처리를 추가하려면 구문은 "element object.event=function(){...}"입니다. 3. DOM2 수준 이벤트 핸들러도 특정 객체에 추가되며 주로 지정 및 작업을 처리하는 데 사용됩니다. 이벤트 핸들러를 삭제합니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
자바스크립트 이벤트 핸들러를 사용하는 3가지 방법
이벤트가 발생하면 이를 처리해야 합니다. Javascript 이벤트 핸들러에는 세 가지 주요 메서드가 있습니다.
1. HTML 이벤트 핸들러
즉, 다음 코드와 같이 HTML 코드에 이벤트 핸들러를 직접 추가합니다.
<input id="btn" value="Button" type="button" onclick="showmsg();"> <script> function showmsg(){ Alert("HTML 추가 이벤트 처리") } </script>위의 코드에서 이벤트 처리가 요소에 직접 중첩되어 있음을 알 수 있습니다. 이는 HTML 코드와 js 간의 결합이 너무 강하다는 점입니다. 언젠가 js에서 showmsg를 변경하려는 경우에만 해당됩니다. js에서 수정하면 html에서도 수정해야 하는데 한두번 수정은 가능하지만 코드가 10,000라인 수준에 도달하면 수정에 많은 시간과 비용이 소요됩니다. , 이 방법은 권장되지 않습니다.
2. DOM 레벨 0 이벤트 핸들러
즉, 지정된 개체에 대한 이벤트 처리를 추가하려면 다음 코드를 살펴보세요.
<input id="btn" value="Button" type="button"> <script> var btn= document.getElementById("btn"); btn.onclick=function(){ Alert("DOM 수준 추가 이벤트 처리" ); } btn.onclick=null;//btn의 클릭 이벤트를 삭제하려면 null로 설정하면 됩니다.</script>위 코드에서 HTML 이벤트 핸들러인 DOM 레벨 0 이벤트와 비교하여 HTML 코드와 js 코드 간의 결합이 크게 감소했음을 알 수 있습니다. 그러나 똑똑한 프로그래머들은 여전히 만족하지 않고 이를 처리할 수 있는 더 간단한 방법을 찾기를 희망합니다. 이제 세 번째 처리 방법을 살펴보겠습니다.
3. DOM2 레벨 이벤트 핸들러
DOM2는 또한 특정 객체에 이벤트 핸들러를 추가하지만 주로 이벤트 핸들러를 지정하고 제거하는 작업을 처리하기 위한 두 가지 메서드인 addEventListener() 및 RemoveEventListener()를 포함합니다. 이들은 모두 처리할 이벤트 이름, 이벤트 핸들러로서의 함수, 부울 값(캡처 단계에서 이벤트를 처리할지 여부) 등 세 가지 매개변수를 받습니다. 다음 코드 부분을 살펴보세요.
<input id="btn" value="Button" type="button"> <script> var btn=document.getElementById("btn"); btn.addEventListener("click",showmsg,false);//여기서 마지막 값을 false로 설정합니다. 즉, 캡처 단계에서 처리되지 않습니다. 일반적으로 버블링 처리는 다양한 브라우저에서 더 나은 호환성을 갖습니다. function showmsg(){ Alert("DOM level added event handler"); btn.removeEventListener("click",showmsg,false);//이 이벤트를 삭제하려면 동일한 매개변수를 전달하면 됩니다.</script>여기에서 이벤트 처리를 추가하고 삭제할 때 마지막 방법이 더 직접적이고 간단하다는 것을 알 수 있습니다. 그러나 Ma Haixiang은 삭제 이벤트를 처리할 때 전달된 매개변수가 이전 매개변수와 일치해야 하며 그렇지 않으면 삭제가 무효화된다는 점을 모든 사람에게 상기시킵니다!
지식을 넓히세요:
이벤트 흐름은 브라우저 개발 초기에 두 주요 브라우저 제조사인 IE와 넷스케이프가 서로 충돌하여 당황스러운 상황을 초래한 것입니다. 이벤트 흐름은 반대 정의였습니다. 이것이 바로 우리에게 익숙한 IE의 이벤트 버블링, Netscape의 이벤트 캡처입니다. 먼저 사진을 찍어 구조를 간단히 살펴보겠습니다.
1. 이벤트 버블링
이벤트 버블링은 이벤트가 처음에 가장 구체적인 요소(문서에서 가장 깊은 중첩 수준을 가진 노드)에 의해 수신된 다음 가장 덜 구체적인 노드(문서)로 전파되는 것을 의미합니다. 위의 그림을 보면 텍스트 부분을 클릭하면 먼저 텍스트의 요소에 의해 수신된 다음 단계별로 창에 전파됩니다. 즉, 6-7-8-9-10의 프로세스입니다. 실행됩니다.
2. 이벤트 캡처
이벤트 캡처는 덜 구체적인 노드에서 이벤트를 먼저 수신하고 가장 구체적인 노드가 이벤트를 마지막으로 수신함을 의미합니다. 마찬가지로, 위 모델에서는 텍스트 부분을 클릭하면 먼저 창에 수신된 후 단계별로 텍스트 요소에 전파됩니다. 즉, 1-2-3-4-5의 프로세스가 실행됩니다.