JavaScript의 이벤트 모델에 대한 자세한 설명(코드 예)
- 不言앞으로
- 2018-11-21 11:47:411647검색
이 글은 JavaScript의 이벤트 모델에 대한 자세한 설명(코드 예제)을 제공합니다. 필요한 친구가 참고할 수 있기를 바랍니다.
이벤트
사용자와 웹페이지 간의 상호작용은 이벤트를 통해 실현됩니다. 이벤트는 처음에는 서버 부하를 공유하는 수단으로 사용되었습니다. 처음에는 Netscape와 IE가 통일된 사양이 없었습니다. 자체 API 사양이 있습니다.
이벤트 트리거 메커니즘과 관련하여 두 회사는 페이지의 트리거 메커니즘이 특정 요소를 클릭할 때 현재 대상 요소의 이벤트를 트리거하는 것만이 아니라고 믿습니다.
예: 페이지에 여러 개의 동심원이 있습니다. 가장 안쪽 원을 클릭하면 실제로는 이 원의 외부를 포함하는 원을 클릭하게 됩니다. 두 회사는 이 점에 동의하지만 이벤트 스트림의 전파 순서는 이벤트 버블링과 이벤트 캡처라는 두 가지 솔루션을 사용하여 구현됩니다.
1. 이벤트 버블링
IE 브라우저는 이전 버전부터 항상 이벤트 버블링 메커니즘을 지원해 왔습니다. 소위 이벤트 버블링은 이벤트 흐름이 보다 구체적인 것에서 시작된다는 것을 의미합니다. 요소는 지정되지 않은 요소로 수신되고 전파됩니다.
은 대상 요소에서 상위 요소로 전파됩니다.
<div>
<div></div>
</div>
<script>
function childEventHandler(event) {
console.log(this);
console.log("child 被点击了");
}
function parentEventHandler(event) {
console.log(this);
console.log("parent 被点击了");
}
function bodyEventHandler(event) {
console.log(this);
console.log("body 被点击了");
}
function htmlEventHandler(event) {
console.log(this);
console.log("html 被点击了");
}
function documentEventHandler(event) {
console.log(this);
console.log("document 被点击了");
}
function windowEventHandler(event) {
console.log(this);
console.log("window 被点击了");
}
var bodyEl = document.getElementsByTagName("body")[0];
var htmlEl = document.getElementsByTagName("html")[0];
var win = window;
var parentEl = document.getElementById("parent");
var childEl = document.getElementById("child");
childEl.onclick = childEventHandler;
parentEl.onclick = parentEventHandler;
bodyEl.onclick = bodyEventHandler;
htmlEl.onclick = htmlEventHandler;
document.onclick = documentEventHandler;
win.onclick = windowEventHandler;
</script>
아래 그림과 같이 id가 child인 요소를 클릭하면 이벤트 흐름이 child에서 window 객체로 전파됩니다.
1.
<div></div>
2.
var childEl = document.getElementById("child");
childEl.onclick = function() {
console.log('hello');
}
3.
var childEl = document.getElementById("child");
childEl.addEventListener('click', function() {
console.log('hello');
}, false);JavaScript는 단일 스레드 언어입니다. 이벤트가 요소에 의해 트리거되면 이벤트 큐에서 이 이벤트에 바인딩된 함수가 있는지 확인합니다. 그렇다면 함수를 이벤트 큐 앞에 두고 메인 스레드 이벤트가 실행될 때까지 기다립니다. 위 코드의 첫 번째 바인딩은 이벤트를 html로 작성하며, 성능과 동작이 분리되지 않습니다. 이런 방식으로 코드를 작성하는 것은 권장되지 않습니다. 두 번째 유형의 바인딩은 이벤트를 요소 개체에 바인딩합니다. 이 작성 방법은 주로 이벤트를 덮어쓰기 쉽습니다. 세 번째 바인딩, 우선 세 번째 매개변수는 Boolean 값이고, 기본값은 false인데, 이벤트 버블링 단계에서 이벤트 핸들러가 호출된다는 뜻이고, true이면 그 뜻이다. 이벤트 캡처 단계 이벤트 핸들러 함수에서 호출됩니다. 이벤트를 처리하고 싶지만 요소의 이벤트 바인딩을 처리하고 싶지 않은 경우 메모리 누수가 발생하기 쉬운 경우 요소의 이벤트 바인딩을 빈 것으로 설정해야 합니다.
第一种写法：
childEl.onclick = null;
第三种写法：
function eventHandler() {
console.log('hello');
}
childEl.addEventListener('click', eventHandler, false);
childEl.removeEventListener('click', eventHandler, false);5. 이벤트 위임(이벤트 프록시) 이벤트 위임은 이벤트 버블링의 특성을 사용하여 보다 구체적인 요소에서 시작하여 특정 요소로 계속 확산됩니다. . 우선, 목록 ul이 있는 경우 목록 요소를 클릭할 때마다 이벤트 핸들러가 실행됩니다. 분명히 이벤트를 요소에 하나씩 바인딩하면 효율성이 좋지 않습니다. 동시에 새로운 요소가 추가되면 이벤트가 성공적으로 바인딩되지 않을 수 있습니다. 살펴보겠습니다:
- menu-1
- menu-2
- menu-3
- menu-4
我们通过事件委托的思路来想，事件流的传播，目标元素本身依然会有事件，但同时，冒泡出去后，更高层次的 dom 也能处理事件程序。那么，我们只需要给高层次节点绑定事件，通过判断具体是触发的哪个子节点，再做相应的事件处理。
- menu-1
- menu-2
- menu-3
- menu-4
menu 列表的每个子菜单元素的事件都能正确响应，新增的 menu-new 同样也能正确响应事件。
事件委托的好处在于，我们不用给每个元素都一一地手动添加绑定事件，避免重复低效的工作。
其次，事件委托更少得获取 dom, 初始化元素对象和事件函数，能有效减少内存占用。
每当将事件程序指定给元素时，html 代码和 js 代码之间就建立了一个连接，这种连接越多，网页就执行起来越慢，所以事件委托能有效减少连接树，提高网页性能。
总结
用户与网页的交互是通过事件进行的，事件模型分为事件冒泡和事件捕获，事件冒泡的兼容性更好，应用更广，同时通过事件冒泡，可以建立事件委托，提升网页性能。
위 내용은 JavaScript의 이벤트 모델에 대한 자세한 설명(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제