JavaScript--イベント対象(25)
31813 ワード
//JavaScriptイベントの重要な点は、それらがいくつかの比較的一致した特徴を持っていて、開発に強力な機能を提供できます.
//最も便利で強力なのは、イベントの対象です.マウスのイベントやキーボードのパッティングなどを処理してくれます.
//さらに、一般的なイベントの獲得／発泡流の関数を変更することができる.
イベントの対象
//マウスイベントはWeb上で最もよく使われているイベントです.やはりマウスは最も主要な位置決めデバイスです.
//イベントオブジェクトからマウスボタン情報や画面座標取得などを取得できます.
//ユーザーはキーボードを使う時キーボードイベントをトリガします.
//「DOM 2級事件」は最初にキーボードイベントが規定されていましたが、その後に該当内容が削除されました.
//最終的には最初のキーボードイベントを使っていますが、IE 9は先に「DOM 3」レベルのキーボードイベントをサポートしています.
//標準的なDOMイベントにおいて、イベントオブジェクトは、その特定のイベントを作成することに関連する属性と方法を含む.
//トリガするイベントの種類が違っています.利用可能な属性と方法も違います.
//最も便利で強力なのは、イベントの対象です.マウスのイベントやキーボードのパッティングなどを処理してくれます.
//さらに、一般的なイベントの獲得／発泡流の関数を変更することができる.
イベントの対象
1 // : ;
2 // : . = ;
3 document.onclick = function(){
4 alert('Lee');
5 }
6 // PS: :click , ;
7 // onclick: ( );
8 // document: , ;
9 // function(): , ;
10
11 // , ;
12 document.onclick = box; // , ;
13 function box(){
14 alert('Lee');
15 }
16
17 // this
18 // に ける : , ,this ;
19 var input = document.getElementsByTagName('input')[0];
20 input.onclick = function(){
21 alert(this.value); // HTMLInputElement,this input ;
22 } 1 // , , ;
2 // / / ;
3 // , event , ;
4 // , , , ;
5 function box(){ // ;
6 alert(arguments.length); // 0; ;
7 }
8 input.onclick = function(){ // ;
9 alert(arguments.length); // 1; ;
10 }
11 // PS: , , ;
12 // , , event ;
13 input.onclick = function(){
14 alert(arguments[0]); // MouseEvent, ;
15 }
16
17 // , , ;
18 input.onclick = function(evt){ // event ,
19 alert(evt); // MouseEvent, ;
20 }
21
22 // event , W3C ,IE ,IE event , window.event ;
23 input.onclick = function(evt){
24 var e = evt || window.event; 25 alert(e); // event ;
26 }//マウスイベントはWeb上で最もよく使われているイベントです.やはりマウスは最も主要な位置決めデバイスです.
//イベントオブジェクトからマウスボタン情報や画面座標取得などを取得できます.
1 1.
2 // ( ) click , ;
3 // mousedown mouseup , event button , ;
4 IE(W3C) button
5
6 0 ( );
7 1 ( );
8 2 ( );
9 IE button
10 1 ( );
11 2 ( );
12 4 ;
13 // ;
14 function getButton(evt){
15 var e = evt || window.event;
16 if(evt){ // Chrome W3C IE ;
17 return e.button; // ;
18 }else if(window.event){
19 switch(e.button){
20 case 1:
21 return 0;
22 case 4:
23 return 1;
24 case 2:
25 return 2;
26 }
27 }
28 }
29 document.onmouseup = function(evt){
30 if(getButton(evt) == 0){
31 alert(' !');
32 }else if(getButton(evt) == 1){
33 alert(' ');
34 }else if(getButton(evt) == 2){
35 alert(' !');
36 }
37 } 1 2.
2 // :
3 // ;
4 // ;
5
6
7 clientX X , ;
8 clientY Y , ;
9 screenX X , ;
10 screenY Y , ;
11 pageX X , ;
12 pageY Y , ;
13
14 // ;
15 document.onclick = function(evt){
16 var e = evt || window.event;
17 alert(e.clientX+','+e.clientY);
18 alert(e.screenX+','+e.screenY);
19 alert(e.pageX+','+e.pageY);
20 }
21 // PS: ,pageX pageY clientX clientY ;
22 // IE8 , ;
23 // document.body( ) document.documentElement( ) scrollTop scrollLeft ;
24 // pageX pageY ;
25 var div = document.getElementById('myDiv');
26 addEventListener(div,'click',function(evt){
27 var evt = event || window.event;
28 var pageX = evt.pageX,
29 pageY = evt.pageY;
30 if(pageX === undefined){
31 pageX = evt.clientX+(docuemnt.body.scrollLeft || document.documentElement.scrollLeft);
32 }
33 if(pageY === undefined){
34 pageY = evt.clientY+(document.body.scrollTop || document.documentElement.srollTop);
35 }
36 alert(pageX+pageY);
37 }); 1 3.
2 // , ;
3 // :Shift/Ctrl/Alt Meat(Window Windows , Cmd );
4 // , ;
5
6
7 shiftKey Shift ;
8 ctrlKey ctrlKey ;
9 altKey alt ;
10 metaKey windows ,IE ;
11
12 // ;
13 function getKey(evt){
14 var e = evt || window.event;
15 var keys = [];
16 if(e.shiftKey) keys.push('shift'); // shift ;
17 if(e.ctrlKey) keys.push('ctrl');
18 if(e.altKey) keys.push('alt');
19 return keys;
20 }
21 document.onclick = function(evt){
22 alert(getKey(evt)); // , shift/ctrl/alt ;
23 }//ユーザーはキーボードを使う時キーボードイベントをトリガします.
//「DOM 2級事件」は最初にキーボードイベントが規定されていましたが、その後に該当内容が削除されました.
//最終的には最初のキーボードイベントを使っていますが、IE 9は先に「DOM 3」レベルのキーボードイベントをサポートしています.
1 1.
2 // keydown keyup ,event keyCode , ;
3 // ,keyCode ASCII ; ;
4 document.onkeydown = function(evt){
5 alert(evt.keyCode);
6 } 1 2.
2 // Firefox/Chrome/Safari event charCode ;
3 // keypress , ASII ;( );
4 // keyCode 0 ;
5 // IE Opear keyCode ASCII ;
6 function getCharCode(evt){
7 var e = evt || window.event;
8 if(typeof e.charCode == 'number'){
9 return e.charCode;
10 }else{
11 return e.keyCode;
12 }
13 }
14 document.onkeypress = function(evt){
15 alert(getCharCode(evt));
16 }
17 // PS: String.fromCharCode() ASCII ;//標準的なDOMイベントにおいて、イベントオブジェクトは、その特定のイベントを作成することに関連する属性と方法を含む.
//トリガするイベントの種類が違っています.利用可能な属性と方法も違います.
1 W3C event
2 / /
3 bubbles Boolean ; 4 cancelable Boolean ;
5 currentTarget Element ;
6 detail Integer ;( ); 7 eventPhase Integer :1 ,2 ,3 ;
8 preventDefault() Function ; cancelable true, ; 9 stopPropagation() Function ; bubbles true, ; 10 target Element ;
11 type String ;
12 view AbstractView ; window ;1 IE event
2 /
3 cancelBubble Boolean false, true ; 4 returnValue Boolean true, false ; 5 srcElement Element ; 6 type String ;1 // target srcElement
2 function getTarget(evt){
3 var e = evt || window.event;
4 return e.target || e.srcElement; // DOM ;
5 }
6 document.onclick = function(evt){
7 var target = getTarget(evt);
8 alert(target);
9 }// , , ;
// , ;
// : ;
1.
// ;
2.
// ; 1 // ; Netscape ;
2 // DOM2 ;
3 document.onclick = function(){
4 alert(' document');
5 }
6 document.documentElement.onclick = function(){
7 alert(' html');
8 }
9 document.body.onclick = function(){
10 alert(' body');
11 }
12 document.getElementById('box').onclick = function(){
13 alert(' div');
14 }
15 document.getElementsByTagName('input')[0].onclick=function(){
16 alert(' input');
17 }
18 // PS: input document;1 //
2 function stopPro(evt){
3 var e = evt || window.event;
4 // cancelBubble, IE , true ;
5 // W3C stopPropagation();
6 window.event ? e.cancelBubble = true : e.stopPropagation();
7 }