JavaScript--イベント入門(24)

//JavaScriptイベントは、Webページにアクセスするユーザによる一連の動作である.
//例えば、ユーザがクリックします.ユーザーがいくつかの操作を実行する時、コードの一連を実行します.
一事件の紹介

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;                                          //         ;

四事件処理関数

 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');

    }