이벤트 핸들러
이벤트 이름 click; load; mouseover ; 이벤트 핸들러는 **'on**'으로 시작하므로 click 이벤트 에 대한 이벤트 핸들러는 onclick 이고 load 이벤트 에 대한 이벤트 핸들러 는 onload 입니다 .
HTML 이벤트 핸들러는 이벤트 핸들러에서 실행할 함수를 직접 추가할 수 있으며 다른 곳에 정의된 스크립트를 호출할 수도 있습니다.
<button oncilck="alert('hello world!')"></button>//执行代码直接添加到事件中
<button onclick='hello()'></button>//调用其他脚本
<script>
function hello(){
alert('hello,world!')
}
</script>
이벤트 객체
HTML 이벤트 핸들러는 요소의 속성 값을 캡슐화하는 함수를 생성합니다. 이 함수에는 이벤트 객체인 지역 변수 event가 있습니다.
사용자가 이벤트를 트리거하고 요소가 이벤트 처리 기능을 실행하면 기본적으로 이벤트 객체가 이벤트 처리 기능에 전달되어 이벤트의 상태와 동작을 기록합니다.
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3" onclick="log3(this)">box3</div>
<script>
document.getElementById("box1").addEventListener("click", function () {
console.log(event);//PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
console.log(event.target);//<div id="box1">box1</div>
})
document.getElementById("box2").onclick = function () {
console.log(event);//PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
console.log(event.target);//<div id="box2">box2</div>
}
function log3(self) {
console.log(self);//<div id="box3" οnclick="log3(this)">box3</div>
console.log(event);
console.log(event.currentTarget);//与console.log(self);输出一致
}
</script>
html 이벤트 속성을 사용하여 이벤트를 요소에 직접 추가하는 경우(예: 위의 예에서 #box3) 해당 이벤트 함수도 this 매개변수를 수신할 수 있으며 this는 요소 자체를 가리킵니다. event.currentTarget
이벤트 공통 속성 및 메서드
-
유형 이벤트 유형
-
대상 이벤트 발신자(이벤트를 트리거한 요소)
-
currentTarget 이벤트 리스너(이벤트가 바인딩된 요소)
<div class="parent" onclick="clickParent()"> 父元素 <div class="son">子元素</div> </div> <script> function clickParent() { console.log(event.currentTarget); console.log(event.target); } </script>부모를 클릭하면 다음과 같이 출력됩니다.
<div class="parent" onclick="clickParent()">...</div> <div class="parent" onclick="clickParent()">...</div>아들을 클릭하면 다음이 출력됩니다.
<div class="parent" onclick="clickParent()">...</div> <div class="son">子元素</div> -
stopPropagation()은 이벤트 버블링 또는 캡처를 방지합니다.
-
cancelable은 이벤트가 버블링되거나 캡처되는 것을 방지합니다.
-
preventDefault()는 브라우저 기본 동작을 방지합니다.
<a href="http://www.baidu.com" target="_blank" onclick="handleClick()">百度一下</a> <script> function handleClick() { event.preventDefault()//点击 a 元素不会跳转至链接，什么也不会发生 } </script>