javaScript 를 이용 하여 상용 이벤트 에 대한 상세 한 설명 을 처리 합 니 다.
1.창 이벤트
예 를 들 어 onload 이벤트:페이지 가 완전히 불 러 오 면(이미지,js 파일,css 파일 등 포함)이 이벤트 가 실 행 됩 니 다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<script>
window.onload=function(){
var mydiv = document.getElementById("mydiv");
alert(" ，mydiv ："+mydiv.innerText);
}
</script>
</head>
<body>
<div id='mydiv'> ， ， 。</div>
</body>
</html>
이에 대해 서 는 다음 과 같다.
resize 이벤트:브 라 우 저의 창 을 새로운 너비 나 높이 로 조정 하면 resize 이벤트 가 실 행 됩 니 다.
스크롤 이벤트:문서 나 브 라 우 저 창 이 스크롤 되 는 동안 스크롤 이벤트 가 발생 합 니 다.
초점 이벤트:텍스트 상자 에서 선택 하거나 선택 을 취소 하 는 등 요소 가 초점 을 얻 고 잃 는 것 을 말 합 니 다.
2.마우스 이벤트
예 를 들 어 왼쪽 단 추 를 누 르 면 onclick 이벤트 가 발생 합 니 다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<style>
html,body{
width: 100%;
height: 100%;
}
</style>
<script>
function mouseclick(){
alert(' ');
}
</script>
</head>
<body onclick="mouseclick()">
<div id='mydiv'> ， ， 。</div>
</body>
</html>
： html body width: 100%，height: 100%， onclick 。
3.키보드 이벤트
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<style>
html,body{
background-color: aquamarine;
width: 100%;
height: 100%;
}
</style>
<script>
function keydown(event){
if(event.keyCode==37){
alert(event.keyCode +' ');
}
if(event.keyCode==38){
alert(event.keyCode +' ');
}
if(event.keyCode==39){
alert(event.keyCode +' ');
}
if(event.keyCode==40){
alert(event.keyCode +' ');
}
}
</script>
</head>
<body onkeydown="keydown(event)">
</body>
</html>
4.상용 이벤트 방법(창 이벤트,마우스 이벤트,키보드 이벤트,텍스트 이벤트 포함)
방법.
묘사 하 다.
onabort
그림 불 러 오기 가 중단 되 었 습 니 다.
onblur
원소 초점 잃 음
onchange
사용자 변경 도 메 인 내용
onclick
대상
ondblclick
대상 을 더 블 클릭
onerror
문서 나 그림 을 불 러 오 는 중 오류 가 발생 했 습 니 다.
onfocus
원소 초점 획득
onkeydown
어떤 키보드 의 키 가 눌 렸 다.
onkeypress
어떤 키보드 의 키 가 눌 리 거나 눌 렸 다.
onkeyup
어떤 키보드 의 키 가 풀 렸 다.
onload
어떤 페이지 나 그림 이 불 러 오기 가 완료 되 었 습 니 다.
onmousedown
어떤 마우스 버튼 이 눌 렸 다.
onmousemove
마우스 가 이동 됨
onmouseout
마우스 가 원소 에서 이동 합 니 다
onmouseover
마우스 가 원소 위로 이동 되 었 습 니 다.
onmouseup
어떤 마우스 버튼 이 풀 렸 다.
onreset
리 셋 단추 가 눌 렸 습 니 다.
onresize
창 이나 프레임 크기 조정
onselect
텍스트 가 선택 되 었 습 니 다.
onsubmit
제출 버튼 이 눌 렸 습 니 다.
onunload
사용자 페이지 종료
5.사건 의 거품 과 사건 포착
사건 이 발생 하면 사건 흐름 이 발생 합 니 다.HTML 요소 가 사건 이 발생 할 때 이 사건 은 요소 노드 와 루트 노드 사이 에 특정한 순서 로 중계 되 고 전달 과 귀 환 과 유사 합 니 다.이벤트 트리거 방식 은 다음 과 같 습 니 다.addEventListener("click","doSomething","ture");세 번 째 매개 변수 일 때 ture 는 이벤트 캡 처 이 고 false 일 경우 이벤트 거품 이 발생 합 니 다.기본 값 은 거품 입 니 다.
캡 처 형 이벤트 전파:
거품 형 사건 전파
자 바스 크 립 트 를 이용 한 상용 이벤트 처리 에 대한 상세 한 설명 은 여기까지 입 니 다.더 많은 관련 js 처리 상용 이벤트 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
