js 버블링 이벤트 및 이벤트 청취 사용 분석_javascript 기술

버블 이벤트
js의 "버블 이벤트(bubble)"는 실제로 사용할 수 있는 화려한 트릭이 아닙니다. js 이벤트의 순서를 실행하는 메커니즘입니다. "버블 알고리즘"은 프로그래밍의 고전적인 문제입니다. 버블 알고리즘의 "버블"은 더 정확하게 교환한다고 말해야 합니다. js의 "버블 이벤트"는 "버블"의 진정한 의미입니다. DOM의 가장 낮은 수준에서 레이어별로 트리를 통과한 다음 연결됩니다. 해당 이벤트. 다음 코드를 예로 들어 보겠습니다.

<title>버블 이벤트</title> <div onclick="Add('div事件触发 ')"> <p onclick="Add('p事件触发 ')" style="background:#c00;"> </p>클릭</div> <div id="Console" style="border:solid 1px #ee0; background:#ffc;"> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

보기 실행 효과
이벤트 모니터링
정확히 말하면 이벤트 모니터링은 js 엔진이 사용자의 마우스, 키보드, 윈도우 이벤트 및 기타 동작을 모니터링하는 작업, 즉 이벤트를 첨부하는 작업이라고 할 수 있습니다. 일반적으로 사용되는 작업은 btnAdd.onclick=" Alert('51obj.cn')" 과 유사하지만 단순 첨부 이벤트이지만 이 방법은 여러 이벤트 첨부 및 이벤트 삭제를 지원하지 않습니다. 다음 코드는 IE에서 이벤트를 첨부한 후 이벤트 삭제를 구현합니다.

<p id="pContent" style="border:solid 1px #d00; background:#cff;"> </p> 클릭
[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

보기 실행 결과

IE는 표준 DOM 브라우저라고 할 수 없습니다. 심지어 최신 IE8도 Firefox, Opera 등과 같은 표준 DOM에 비해 "이기종"입니다. 실제로 Firefox에만 이벤트 수신 기능이라는 기능이 존재합니다. addEventListener(다음 예 참조)<button id="btn"></button>
클릭

[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

보기 실행 효과 위의 두 예를 보면 Firefox에서는 AttachEvent가 지원되지 않고, IE에서는 addEventListener가 지원되지 않는 것을 알 수 있습니다. 따라서 호환성 메서드를 사용해야 합니다. <button id="btn"> </button>
www.jb51.net»»

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]