JavaScript 이벤트 의뢰 실현 원리 및 장점 진행
1630 단어 JavaScript이벤트의뢰 하 다.
사건 의뢰 는 거품 의 원 리 를 이용 하여 사건 을 부모 원소 나 조상 원소 에 첨가 하여 집행 효 과 를 촉발 하 는 것 이다.
예:document 에 click 이 벤트 를 연결 합 니 다.click 의 대상 이 단추 btn 일 때 탄 상자 에 단추 btn 의 값 을 표시 합 니 다.
<body>
<button id="btn" value=" "> </button>
<script>
window.onload=function () {
let btn=document.getElementById("btn")
document.onclick=function (e) {
// console.log(e.target)
if(e.target===btn){
alert(btn.value)
}
}
}
</script>
</body>
2.사건 의뢰 의 장점
(1)JS 성능 향상
예:l 에 100 개의 li 를 만 들 고 li 를 누 르 면 이 li 의 value 를 표시 합 니 다.
전통 적 인 쓰기:모든 li 에 onclick 사건 을 연결 하고 alert 사건 을 촉발 합 니 다.
이벤트 의뢰:document 에 onclick 이 벤트 를 연결 합 니 다.onclick 이 벤트 를 촉발 한 후
(2)DOM 요 소 를 동적 으로 추가 할 수 있 습 니 다.요소 의 변동 으로 인해 이벤트 바 인 딩 을 수정 할 필요 가 없습니다.
3.사건 의뢰 시 주의해 야 할 점
이벤트 의뢰 바 인 딩 요 소 는 감청 요소 의 부모 요소,예 를 들 어
- ,위의등 이 좋 습 니 다.
사건 이 거품 을 일 으 키 는 과정 도 시간 이 걸 리 기 때문에 꼭대기 층 에 가 까 울 수록 사건 의'사건 전파 체인'이 길 어 지고 시간 도 소모 된다.
4.사건 거품 과 사건 포착
그림 에서 보 듯 이 사건 의 거품 은 하위 요소 에서 부모 요소 에 사건 을 전달 하 는 것 이 고 한 층 한 층 사건 의 의뢰 는 거품 의 원 리 를 이용 한 것 이다.이벤트 캡 처 는 DOM 최고 층 대상 에서 하위 요소 로 층 층 이 전파 된다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
