JavaScript -- 이벤트 입문 (24)
18487 단어 JavaScript
/ / 예 를 들 어 사용자 클릭;사용자 가 어떤 조작 을 실행 할 때 일련의 코드 를 실행 합 니 다.
이벤트 소개
1 // ; IE Netscape Navigator , ;
2 // DOM2 DOM ;
3 // IE9/Firefox/Opera/Safari Chrome "DOM2 " ;
4 // IE8 ;
5 // JavaScript : / DOM2 ;내 연 모델 (HTML 이벤트 처리 프로그램)
1 // ;
2 // , HTML , ;
3 // , HTML , HTML ;
4
5 // HTML JS ;
6 <input type="button" value=" " onclick="alert('Lee');" /> // ;
7 // HTML JS ;
8 <input type="button" value=" " onclick="box();" /> // JS ;
9 // PS: window.onload , ;스 크 립 트 모형 (DOM 0 급 이벤트 처리 프로그램)
1 // HTML JavaScript ;
2 // JavaScript , ;
3 var input = document.getElementsByTagName('input')[0]; // input ;
4 input.onclick = function(){ // ;
5 alert('Lee');
6 }
7 // PS: , ;
8 // ( );
9 input.onclick = box; // ;
10 input.onclick = null; // ;4 이벤트 처리 함수
1 // JavaScript : / /HTML ;
2 JavaScript
3
4 onabort ;
5 onblur / / ;
6 onchange / / ;
7 onclick / / / ;
8 ondblclick / / ;
9 ondragdrop ;
10 onError / / ; 11 onfocus / / ; 12 onkeydown / / / ;
13 onkeypress / / / ;
14 onkeyup / / / ;
15 onload / / ; 16 onunload / ;
17 onmouseout ;
18 onmouseover ;
19 onmove ;
20 onreset reset ;
21 onresize ; 22 onselect ;
23 onsubmit ;
24 // PS: , , ;1. 마우스 이벤트, 페이지 의 모든 요소 가 실 행 됩 니 다.
1 (1).click: ;
2 input.onclick = function(){
3 alert('Lee');
4 };
5
6 (2).dblclick: ;
7 input.ondblclick = function(){
8 alert('Lee');
9 }
10
11 (3).mousedown: ;
12 input.onmousedown = function(){
13 alert('Lee');
14 }
15
16 (4)mouseup: ;
17 input.onmouseup = function(){
18 alert('Lee');
19 }
20
21 (5).mouseover: ;
22 input.onmouseover = function(){
23 alert('Lee');
24 }
25
26 (6).mouseout: ;
27 input.onmouseout = function(){
28 alert('Lee');
29 }
30
31 (7).mousemove: ;
32 input.onmousemove = function(){
33 alert('Lee');
34 }2. 키보드 이벤트
1 (1).keydown: , , ;
2 onkeydown = function(){
3 alert('Lee');
4 }
5
6 (2).keypress: , , ;
7 onkeypress = function(){
8 alert('Lee');
9 }
10
11 (3).keyup: ;
12 onkeyup = function(){
13 alert('Lee');
14 }3. HTML 이벤트
1 (1).load: ( /JavaScript /CSS ), window load ;
2 window.onload = function(){
3 alert('Lee');
4 }
5
6 // load , DOM HTML ;
7 // HTML onload ;
8 <img src='smile.client.gif' onload="alert('Image loaded.')" >
9 // PS: , src ;
10
11 // <script> load , JavaScript ;
12 // , <script> src , JavaScript ;1 (2).unload: ;
2 // , unload ;
3 // , ;
4 window.onunload = function(){
5 alert('Lee');
6 }1 (3).select: (input textarea) ;
2 input.onselect = function(){
3 alert('Lee');
4 }1 (4).change: (input textarea) ;
2 input.onchange = function(){
3 alert('Lee');
4 }1 (5).focus: window ; ;
2 input.onfocus = function(){
3 alert('Lee');
4 }1 (6).blur: window ; ;
2 input.onblur = function(){
3 alert('Lee');
4 }1 (7).submit: <form> ;
2 form.onsubmit = function(){
3 alert('Lee');
4 }(8).reset: <form> ;
form.onreset = function(){
alert('Lee');
}1 (9).resize: , resize ;
2 // window( ) ; resize ;
3 // IE/Safari/Chrome Opera resize ;
4 // Firefox resize ;
5 window.onresize = function(){
6 alert('Lee');
7 }(10).scroll: ;
window.onscroll = function(){
alert('Lee');
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
