최근에 웹 사이트에 특수 효과를 발휘하기 위해 매일 웹 사이트를 수정해야하기 때문에 많은 JS 연락처 사건을 보았습니다. 나는 그것의 작은 부분을 사용하는 방법 만 알고 있습니다. 때로는 내가 그것을 사용할 때도 매우 혼란 스럽습니다. 이제 나는 그것을 분류했습니다. 참조를 위해 Wulin 네트워크 플랫폼과 공유하겠습니다!
1. JavaScript 이벤트 란 무엇입니까?
이벤트는 JavaScript 응용 분야의 핵심과 모든 것을 결합시키는 접착제입니다. 브라우저에서 웹 페이지와 특정 유형의 상호 작용이 있으면 이벤트가 발생합니다.
이벤트는 특정 컨텐츠를 클릭하거나 특정 요소를 통과하거나 키보드의 특정 키를 누르고 있으며 이벤트는 특정 웹 페이지로드 또는 창을 스크롤하거나 창 크기를 변경하는 사용자가 웹 브라우저에서 발생하는 것일 수도 있습니다. 무뚝뚝하게 말하면, 이벤트는 문서 나 브라우저에서 발생하는 특정 상호 작용 순간입니다!
JavaScript를 사용하면 특정 이벤트를 듣고 특정 이벤트가 응답하여 발생하도록 지정할 수 있습니다.
2. 이벤트 흐름
이벤트 흐름은 페이지에 허용되는 이벤트 순서를 설명합니다. 브라우저 개발의 초기 단계에서, 두 개의 주요 브라우저 제조업체, 즉 Netscape는 서로 싸웠으며 부정 행위 상황이 발생했습니다. 즉, 사건 흐름에 대한 해석은 완전히 반대되는 두 가지 정의를 보여주었습니다. 그것이 우리가 익숙한 것입니다 : 즉 이벤트 버블, 네트 스케이프 이벤트 캡처. 먼저 사진을 찍고 구조를 간단히 살펴 보겠습니다.
1. 이벤트 거품
이벤트 버블은 이벤트가 가장 구체적인 요소 (문서에서 가장 깊은 중첩 레벨을 가진 노드)에 의해 먼저 수신 된 다음, 가장 특정 노드 (문서)로 단계적으로 전파 함을 의미합니다. 위의 다이어그램을 사용하여 텍스트 부분을 클릭 할 때 텍스트의 요소에 의해 먼저 수신 된 다음 단계별로 창으로 전파됩니다. 즉, 6-7-8-9-10의 프로세스가 실행됩니다.
2. 이벤트 캡처
이벤트 캡처는 이벤트가 먼저 덜 구체적인 노드로 수신되었으며 가장 구체적인 노드는 마침내 이벤트를 수신합니다. 마찬가지로 위의 모델에서 텍스트 부분을 클릭하면 먼저 창으로 수신 된 다음 단계별로 텍스트 요소로 전파됩니다. 즉, 1-2-3-4-5의 프로세스가 실행됩니다.
코드에서 어떻게 수행됩니까? 나중에 주어진!
3. JavaScript 이벤트를 처리하는 세 가지 방법
이벤트가 발생하면 이벤트를 처리해야합니다. JavaScript 이벤트 처리기를 처리하는 세 가지 주요 방법이 있습니다.
1. HTML 이벤트 핸들러
즉, 다음 코드와 같은 HTML 코드에 이벤트 핸들러를 직접 추가합니다.
<입력 id = "btn"value = "button"type = "button"onclick = "showmsg ();"> <cript> function showmsg () {alert ( "html 추가 이벤트 처리"); } </스크립트>위의 코드에서 이벤트 처리가 요소에 직접 중첩되어 있음을 알 수 있습니다. 이것에 문제가 있습니다 : HTML 코드와 JS의 커플 링은 너무 강합니다. 언젠가 JS에서 showmsg를 변경하려면 JS에서 수정해야 할뿐만 아니라 HTML에서 수정해야합니다. 우리는 하나 또는 두 개의 수정을 수락 할 수 있지만 코드가 10,000 줄 수준에 도달하면이를 수정하는 데 사람과 돈이들 것입니다. 따라서이 방법을 권장하지 않습니다.
2. DOM0 레벨 이벤트 핸들러
즉, 지정된 객체에 이벤트 처리를 추가하고 다음 코드를 참조하십시오.
<입력 id = "btn"value = "button"type = "button"> <cript> var btn = document.getElementById ( "btn"); btn.onclick = function () {alert ( "dom-level addect event processing"); } btn.onclick = null; // btn의 클릭 이벤트를 삭제하려면 null로 설정하십시오 </script>위의 코드에서 HTML 이벤트 핸들러에 비해 DOM0- 레벨 이벤트, HTML 코드 및 JS 코드 간의 커플 링이 크게 줄어들 었음을 알 수 있습니다. 그러나 스마트 프로그래머는 여전히 만족스럽지 않으며 더 간단한 방법을 찾기를 희망합니다. 세 번째 방법을 살펴 보겠습니다.
3. DOM2 레벨 이벤트 핸들러
DOM2는 또한 특정 객체에 이벤트 핸들러를 추가하고 있지만 주로 이벤트 핸들러를 지정하고 삭제하는 작업을 처리하는 데 사용되는 두 가지 방법이 포함됩니다 : addeventListener () 및 removeEventListener (). 처리 할 이벤트 이름, 이벤트 핸들러 기능 및 부울 값 (이벤트가 캡처 단계에서 처리되는지 여부)의 세 가지 매개 변수를 모두받습니다. 다음 코드를 참조하십시오.
<입력 id = "btn"value = "button"type = "button"> <cript> var btn = document.getElementById ( "btn"); btn.adeventListener ( "클릭", showmsg, false); // 여기서 마지막 값을 False로 설정합니다. 즉, 캡처 스테이지에서 처리되지 않습니다. 일반적으로, 버블 처리는 각 브라우저 함수 showmsg () {alert ( "dom-level add event handler")에서 더 호환됩니다. } btn.removeEventListener ( "클릭", showmsg, false); //이 이벤트를 삭제하려면 동일한 매개 변수 만 전달하면 </script>입니다.여기서 우리는 이벤트를 추가하고 제거 할 때 마지막 방법이 더 직접적이고 간단하다는 것을 알 수 있습니다. 그러나 Ma Haixiang은 모든 사람들에게 삭제 이벤트를 처리 할 때 전달 된 매개 변수가 이전 매개 변수와 일치해야한다는 것을 모든 사람에게 상기시켜줍니다. 그렇지 않으면 삭제가 유효하지 않다는 것을 상기시킵니다!
4. 이벤트 버블과 이벤트 캡처의 과정과 차이
이벤트 거품과 이벤트 캡처 과정을 설명하기위한 코드를 제공하겠습니다. 동시에 두 가지의 차이점을 볼 수 있습니다.
<! docType html> <html lang = "en"> <head> <meta charset = "utf-"> <title> 문서 </title> <style> #p {width : px; height : px; px solid black;} #c {width : px; px; px solid red;} </style> </style> </style> </style> </style> www.mahaixiang.cn <div id = "c"> 나는 www.mahaixiang.cn을 좋아한다. var c = document.getElementById ( 'c'); c.addeventListener ( 'click', function () {alert ( 'child node capture')}, true); c.addeventListener ( 'click', function () {alert ( 'child node bubbles')}, false); p.addeventListener ( 'click', function () {alert ( 'child node bubbles')}, false); </script> </body> </html>위의 코드를 실행하고 하위 요소를 클릭 할 때 실행 순서는 다음과 같습니다. 부모 노드 캡처 자식 노드 캡처 자식 노드 버블 패렌트 노드 버블. 이 예에서, 우리는 또한 DOM2 레벨 이벤트에는 이벤트가 세 단계가 포함된다는 점을 규정하고 있음을 이해할 수 있습니다.
1. 이벤트 캡처 스테이지;
2. 목표 단계에서;
3. 이벤트 버블 스테이지.
먼저, 대상 단계에서 (즉, 이벤트가 발행되는 위치)에 캡처되며 마지막으로 거품이납니다. 비과학적인 것은 DOM1 레벨 이벤트 처리 프로그램이 없다는 것입니다. 주의를 기울이고 농담을 중단하십시오!
5. 보충
1. IE 이벤트 핸들러에는 두 가지 방법이 있습니다. autdevent ()는 이벤트를 추가하고 detachevent () 이벤트를 삭제합니다. 이 두 가지 방법은 이벤트 핸들러 이름과 트랜잭션 처리 기능의 동일한 두 매개 변수를받습니다. 여기에 부울 가치가없는 이유는 무엇입니까? IE8 및 이전 버전은 이벤트 버블 만 지원하기 때문에 마지막 매개 변수는 기본적으로 False와 동일합니다. (IE 이벤트 핸들러를 지원하는 브라우저에는 IE, Opera가 포함됩니다).
2. 이벤트 객체는 일부 이벤트가 발생할 때 관련 정보를 녹화하는 데 사용되는 객체이지만 이벤트 객체는 이벤트가 발생할 때만 생성되며 이벤트 핸들러 기능에 의해서만 내부적으로 액세스 할 수 있습니다. 모든 이벤트 핸들러 기능이 실행되면 이벤트 객체가 파괴됩니다!
위는 편집자가 소개 한 JavaScript 이벤트 (세 가지 유형)를 처리하는 방법입니다. 나는 그것이 당신에게 도움이되기를 바랍니다!