사건의 개념
이벤트 : 문서 나 브라우저 창에서 발생하는 특정 상호 작용 모멘트를 나타냅니다. 이벤트가 발생하면 해당 코드가 실행되도록 청취자 (또는 핸들러)를 통해 이벤트를 예약 할 수 있습니다.
1. 이벤트 흐름
1. 이벤트 흐름 : 페이지에서 이벤트가 수락 된 순서를 설명합니다.
2. 이벤트 버블 : 가장 구체적인 요소로 수신 한 다음 가장 구체적인 요소의 노드로 단계별로 상향 전파됩니다 (문서)
3. 이벤트 캡처 : 가장 특정 노드는 먼저 이벤트를 수신하는 반면 가장 구체적인 노드는 이벤트를 마지막으로 수신해야합니다.
2. 이벤트 처리
1.HTML 이벤트 처리 : HTML 구조에 직접 추가합니다
2. DOM0 레벨 이벤트 처리 : 이벤트 핸들러 속성에 함수 할당
3. DOM2 레벨 이벤트 처리 :
addeventListener ( "이벤트 이름", "이벤트 핸들러 함수", 부울 값)
사실 : 이벤트 캡처
거짓 : 이벤트 거품
RemoveEventListener ();
4. 이벤트 핸들러
ATTADEVENT
Detachevent
<! docType html> <html> <head> <meta charset = "utf-8"> <title> </title> </head> <bod> <div id = "div"> <button id = "btn1"> 버튼 </button> </div> </div> </div> </div> {alert ( "hello html 이벤트 ");}} </script>-> <!-<cript> var btn1 = document.getElementById ("btn1 "); btn1.onclick = function () {alert ("hello dom0 수준 이벤트 핸들러 ")}; // 오버레이드 btn1.onclick = function () {"hello dom0 수준 핸들러 2 ")}; function () {alert ( "hello dom0 수준 이벤트 핸들러 3")}; </script>-> <!-<cript> var btn1 = document.getElementById ( "btn1"); btn1.addeventListener ( "click", demo1); btn1.addeventListener ( "click", demo2); btn1.addeventListener ( "click", function demo1 () {Alert ( "dom2 수준 핸들러 1"); demo2 () {alert ( "dom2 레벨 이벤트 핸들러 2");} 함수 demo3 () {alert ( "dom2 레벨 이벤트 핸들러 3");} btn1.removeeventListener ( "click", demo2) </script>-> <cript> var btn1 = document.getElementById ( "btn1"); if (btn1.addeventListener) {btn1.addeventListener ( "click", demo);} else if (btn1.attachevent) {btn1.attachevent ( "on click", demo) {demo (demo); demo () {alert ( "hello");} </script> </body> </html>III. 이벤트 객체
1. 이벤트 객체 : DOM 이벤트가 트리거되면 개체가 생성됩니다.
2. 이벤트 객체 이벤트 :
유형 : 이벤트 유형을 가져옵니다
대상 : 이벤트 대상을 얻으십시오
stoppropagation () : 거품으로 인한 사건을 방지합니다
PreventDefault () : 블록 이벤트 기본 동작
<! docType html> <html> <head> <meta charset = "utf-8"> <title> </title> </head> <hod> <div id = "div"> <button id = "btn1"> 버튼 </button> <a href = "http://www.baidu.com" id = "AID"> baidu </a> </div> <cript> docum showtype (event) {// alert (event.type); alert (event.target); event.stopPropagation (); // event bubbles} function showdiv () {alert ( "div")} function showa (event) {// event.stopPropagation (// event.preventDefault ();} </script> </body> </html>