DOM 의 사건 대상 을 깊이 이해 하 다.
17201 단어 JavaScriptDOM이벤트
var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
alert(event.type); //"click"
}
btn.addEventListener("click", function(event) {
alert(event.type); //"click"
}, false);
이벤트. type 속성 은 이벤트 형식 을 표시 합 니 다.이벤트 의 속성 currentTarget 은 이벤트 처리 프로그램 이 현재 이 벤트 를 처리 하고 있 는 요 소 를 의미 합 니 다. target 은 이벤트 의 목 표를 의미 합 니 다.이벤트 처리 프로그램 내부 에서 대상 this 는 currentTarget 의 값 과 같 고 target 은 이벤트 의 실제 목표 만 포함 합 니 다.예 를 들 어:
var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
alert(event.currentTarget === this); //true
alert(event.target === this); //true
};
이벤트 처리 프로그램 을 대상 요소 btn 에 직접 지정 하면 this, currentTarget 과 target 은 같은 값 을 포함 합 니 다.이벤트 처리 프로그램 을 btn 의 부모 노드 에 등록 하면 (예 를 들 어 document. body):
document.body.onclick = function(envent) {
alert(event.currentTarget === document.body); //true
alert(this === document.body); //true
alert(event.target === document.getElementById("myBtn")); //true
};
target 요 소 는 btn 요소 와 같 습 니 다. click 이벤트 의 진정한 목표 이기 때문에 이벤트 처리 프로그램 을 등록 하지 않 았 기 때문에 결과적으로 click 이 document. body 에 거품 을 일 으 켜 그곳 에서 사건 이 처리 되 었 습 니 다.
하나의 함수 로 여러 이 벤트 를 처리 합 니 다:
var btn = document.getElementById("myBtn");
var handler = function(event) {
switch(event.type) {
case "click":
alert("Clicked");
break;
case "mouseover":
event.target.style.backgroundColor = "blue";
break;
case "mouseout":
event.target.style.backgroundColor = "red";
break;
}
};
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;
이벤트 에는 특정 이벤트 의 기본 행동 을 막 는 preventDefault () 방법 이 있 습 니 다.
이벤트. stopPropagation () 방법 은 이벤트 가 DOM 차원 에서 의 전 파 를 즉시 중단 하 는 데 사 용 됩 니 다. 즉, 추가 이벤트 캡 처 나 거품 을 취소 하 는 것 입 니 다.예 를 들 면:
var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
alert("Clicked");
event.stopPropagation();
};
document.body.onclick = function(event) {
alert("Body Clicked");
};
이벤트. stopPropagation () 을 호출 하지 않 으 면 두 개의 경고 상자 가 나타 납 니 다.그러나 이 방법 을 사용 하면 click 이벤트 가 document. body 에 전파 되 지 않 기 때문에 이 요소 의 onclick 이벤트 처리 프로그램 을 실행 하지 않 습 니 다.
2. IE 의 이벤트 대상 이벤트 대상 이 window 대상 으로 익숙 한 존 재 를 살 펴 보 자.예:
var btn = document.getElementById("myBtn");
btn.onclick = function() {
var event = window.event;
alert(event.type); //"click"
};
btn.attachEvent("click", function(event) {
alert(event.type); //"click"
}); // window event
IE 에서 이벤트 가 이벤트 목 표를 가 져 오 는 속성 은 srcElement 입 니 다.:
var btn = document.getElementById("myBtn");
btn.onclick = function() {
var event = window.event;
alert(event.srcElement === this); //true
};
btn.attachEvent("onclick", function(event) {
alert(event.srcElement === this); //false
});
this 대상 은 이벤트 처리 프로그램의 역할 영역 에 따라 확정 되 기 때문에 위의 두 개 는 다르다.event. returnValue 속성 은 DOM 의 preventDefault () 방법 에 해당 합 니 다. returnValue 를 false 로 설정 하면 기본 행동 을 막 을 수 있 습 니 다.
var link = document.getElementById("myLink");
link.onclick = function() {
window.event.returnValue = false;
} //
이벤트. cancelBubble 속성 은 DOM 의 stopPropagation () 방법 과 같은 역할 을 하 며 이벤트 의 거품 을 멈 추 는 데 사 용 됩 니 다.IE 는 이벤트 캡 처 를 지원 하지 않 기 때문에 이벤트 거품 을 없 앨 수 밖 에 없 지만 stopPropagation () 은 이벤트 캡 처 와 거품 을 동시에 지원 할 수 있 습 니 다.
var btn = document.getElementById("myBtn");
btn.onclick = function() {
alert("Clicked");
window.event.cancelBubble = true;
};
document.body.onclick = function() {
alert("Body Clicked");
};
cancelBubble 을 true 로 설정 하면 이벤트 가 거품 을 통 해 document. body 에 등 록 된 이벤트 처리 프로그램 을 실행 하 는 것 을 막 을 수 있 습 니 다. 경고 상자 만 나타 납 니 다.
3. 크로스 브 라 우 저의 이벤트 대상
var EventUtil = {
getEvent: function(event) {
return event ? event : window.event;
},
getTarget: function(event) {
return event.target || event.srcElement;
},
preventDefault: fuction(event) {
if(event.preventDefaule()) {
event.preventDefaule();
} else {
event.returnValue = false;
}
},
stopPropagation: function(event) {
if(event.stopPropagation()) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
btn.onclick = function(event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event); //
}
4. 이벤트 처리 프로그램 이 너무 많 으 면 메모 리 를 사용 하여 성능 이 떨 어 집 니 다.해결 방법 은 사건 으로 위탁 하 는 것 이다.하나의 사건 처리 절 차 를 만들어 특정한 유형의 모든 사건 을 관리 하 는 것 이다.예 를 들 어 click 이 벤트 는 document 단계 까지 계속 거품 을 일 으 킵 니 다. 즉, 우 리 는 전체 페이지 에 onclick 이벤트 처리 프로그램 을 만 들 수 있 습 니 다. 클릭 한 요소 마다 이벤트 처리 프로그램 을 추가 하지 않 아 도 됩 니 다.예 를 들 면:
"lists">
- "goSomewhere">Go
- "doSomething">Do
- "sayHi">Hi
var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething");
var item3 = document.getElementById("sayHi");
EventUtil.addHandler(item1, "click", function(event) {
location.href = "http://www.google.com";
});
EventUtil.addHandler(item2, "click", function(event) {
alert("Me");
});
EventUtil.addHandler(item3, "click", function(event) {
alert("Hi");
});
만약 에 복잡 한 웹 응용 프로그램 에서 이런 방식 을 사용한다 면 수많은 코드 가 이벤트 처리 프로그램 을 추가 할 수 있 습 니 다. 그러나 이벤트 위탁 기술 로 해결 할 수 있 습 니 다. 즉, DOM 트 리 의 최대한 높 은 차원 에서 이벤트 처리 프로그램 을 추가 하 는 것 입 니 다.
var list = document.getElementById("lists");
EventUtil.addHandler(list, "click", function(event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target.id) {
case "goSomewhere":
location.href = "http://www.google.com";
break;
case "doSomething":
alert("Me");
break;
case "sayHi":
alert("Hi");
break;
}
});
이 벤트 를 목표 의 부모 요소 나 조상 요소 에 의뢰 하고 l 에 onclick 이벤트 처리 프로그램 을 추가 합 니 다. 모든 목표 요 소 는 이 요소 의 하위 노드 이 고 onclick 사건 도 지나 갑 니 다. 이벤트 가 거품 이 생 길 수 있 기 때문에 이 벤트 를 클릭 하면 결국 ul 요소 의 처리 이벤트 프로그램 에 의 해 처 리 됩 니 다.이벤트 의뢰 기술 로 이벤트 처리 프로그램 만 추가 되 었 고 사용 하 는 메모리 가 더 적 습 니 다.
이벤트 처리 프로그램 을 제거 하고 필요 하지 않 을 때 제거 하 며 성능 도 향상 시 킬 수 있 습 니 다. 만약 메모리 에 시간 이 지나 도 사용 하지 않 는 빈 이벤트 처리 프로그램 이 남아 있다 면 메모리 와 성능 문 제 를 일 으 킬 수 있 습 니 다.
저 희 는 보통 removeChild () 와 replace Child () 방법 을 사용 하지만 innerHTML 로 페이지 의 일부분 을 교체 하 는 경우 가 많 습 니 다. 이벤트 처리 프로그램 이 있 는 요 소 를 innerHTML 로 원래 의 내용 을 대체 하면 원래 요소 에 추 가 된 이벤트 처리 프로그램 을 쓰레기 로 회수 할 수 없습니다.예:
<div id="myDiv">
<input type="button" value="Click me" id="myBtn">
div>
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function() {
//
document.getElementById("myDiv").innerHTML = "Changing...";
}
script>
단 추 를 누 르 면 단 추 를 제거 하고 메시지 로 바 꾸 는 것 이 개발 에서 유행 하지만 문 제 는 버튼 이 페이지 에서 제거 되 었 을 때 이벤트 처리 프로그램 을 가지 고 있다 는 것 이다.innerHTML 을 설정 하면 단 추 를 옮 길 수 있 지만 이벤트 처리 프로그램 은 단추 와 인용 관 계 를 유지 하고 있 습 니 다. 일부 브 라 우 저 는 이벤트 처리 프로그램 에 대한 요 소 를 메모리 에 저장 하여 빈 이벤트 처리 프로그램 을 만 들 수 있 습 니 다. 어떤 이벤트 가 곧 삭 제 될 것 이라는 것 을 알 고 있다 면 수 동 으로 처리 하 는 것 이 좋 습 니 다.
<div id="myDiv">
<input type="button" value="Click me" id="myBtn">
div>
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function() {
//
btn.onclick = null; //
document.getElementById("myDiv").innerHTML = "Changing...";
}
script>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.