DOM 이벤트: DOM 이벤트 수준, DOM 이벤트 흐름, DOM 이벤트 모델, DOM 이벤트 캡처 프로세스, 사용자 정의 이벤트

전단 면접에서 사건만 물어보면 DOM 사건이 있을 것이다.만약 대답이 나오면 계속 아래로 연신할 것이다. 사실 이런 것들은 모두 간단하지만 내가 처음 물었을 때도 멍했다.
DOM 이벤트 수준: DOM0 요소.onclick = function () {} DOM1은 일반적으로 디자인 규범만 있고 사건과 관련된 디자인은 없습니다.그래서 바로 DOM2 엘리먼트를 건너뛰세요.addEventListener(‘click’, function() { }, false) DOM3 element.addEventLIstener(‘keyup’, function() { }, false)
DOM3는 DOM2를 바탕으로 많은 이벤트 유형에 참가했다.
DOM2, DOM3의 세 번째 매개 변수는 이 이벤트가 포획 단계에서 촉발(true), 거품 단계에서 촉발(false)
DOM 이벤트 모델: 정상적인 이벤트 거품 및 캡처 위로 거품 아래로 캡처
DOM 이벤트 흐름: 이벤트 흐름은 브라우저가 이 페이지를 사용자와 상호작용하는 과정에서 (예를 들어 내가 마우스 왼쪽 단추를 눌렀을 때) 이 왼쪽 단추를 어떻게 페이지에 전달하고 어떻게 응답하는지입니다.
모두 세 단계로 나뉜다. 포획->목표단계->거품사건은 포획을 통해 목표원소에 도달하고 이 단계는 목표단계이다.대상 요소에서 윈도우 대상에 업로드하면 거품이 생기는 단계
DOM 이벤트 포획 프로세스: 하나의 이벤트가 먼저 윈도우에 포획됩니다. 포획 프로세스: 윈도우->document->html->body->...->목표 요소

 1   
10   

11      
12   
13   
<span style="color: #008080;">14</span>     <span style="color: #0000ff;">var</span> ev = document.getElementById('ev'<span style="color: #000000;">);
</span><span style="color: #008080;">15</span>     <span style="color: #008000;">//</span><span style="color: #008000;">  ， </span>
<span style="color: #008080;">16</span>     window.addEventListener('click', <span style="color: #0000ff;">function</span><span style="color: #000000;">() {
</span><span style="color: #008080;">17</span>       console.log('window capture'<span style="color: #000000;">);
</span><span style="color: #008080;">18</span>     }, <span style="color: #0000ff;">true</span><span style="color: #000000;">)
</span><span style="color: #008080;">19</span> 
<span style="color: #008080;">20</span>     document.addEventListener('click', <span style="color: #0000ff;">function</span><span style="color: #000000;">() {
</span><span style="color: #008080;">21</span>       console.log('document capture'<span style="color: #000000;">);
</span><span style="color: #008080;">22</span>     }, <span style="color: #0000ff;">true</span><span style="color: #000000;">)
</span><span style="color: #008080;">23</span> 
<span style="color: #008080;">24</span>     document.body.addEventListener('click', <span style="color: #0000ff;">function</span><span style="color: #000000;">() {
</span><span style="color: #008080;">25</span>       console.log('body capture'<span style="color: #000000;">);
</span><span style="color: #008080;">26</span>     }, <span style="color: #0000ff;">true</span><span style="color: #000000;">)
</span><span style="color: #008080;">27</span> 
<span style="color: #008080;">28</span>     ev.addEventListener('click', <span style="color: #0000ff;">function</span><span style="color: #000000;">() {
</span><span style="color: #008080;">29</span>       console.log('ev capture'<span style="color: #000000;">);
</span><span style="color: #008080;">30</span>     }, <span style="color: #0000ff;">true</span><span style="color: #000000;">)
</span><span style="color: #008080;">31</span>   

 
 
 
이벤트 대상의 흔한 응용: 이벤트.preventDefault () 는 요소의 기본 동작을 차단합니다(예: 링크의 이동).
event.stopPropagation()은 포획과 거품 발생 단계에서 현재 이벤트의 진일보한 전파를 막습니다.
event.stoplmmediatePropagation () 은 이벤트의 거품을 막고 같은 이벤트를 막는 다른 탐지기가 호출됩니다.비고: 같은 유형의 이벤트가 여러 개 있는 이벤트 감청 함수가 같은 요소에 연결되면 이 유형의 이벤트가 촉발될 때 추가된 순서에 따라 실행됩니다.만약 그 중 어떤 감청 함수가 이벤트를 실행했다면.stopImmediatePropagation() 메서드는 현재 요소의 나머지 감청 함수가 실행되지 않습니다.
event.currentTarget(현재 연결된 이벤트 요소) 이벤트.target(현재 클릭된 요소) 이 두 가지는 일반적으로 함께 묻는다. 비고: 이벤트 에이전트: 하위 요소의 같은 이벤트를 부모 요소에 놓으면 한 번만 귀속하면 여러 요소의 사용을 실현할 수 있다.이런 상황에서 어떤 하위 요소가 클릭되었는지 판단해야 한다.여기는 이벤트에 쓰일 거예요.target .
사용자 정의 이벤트: 이것은 진급에 속합니다. 일반적인 상황에서 여기를 물어보면 당신은 안정됩니다.실제 개발에서도 자주 쓰인다.
 

    var eve = new Event('custome');
    ev.addEventListener('custome', function() {
      console.log('custome capture');
    })
    ev.dispatchEvent(eve);