JavaScript事件のまとめ

js事件まとめ整理
1、キーボードイベント

一般的なキーボードイベント

キーボードイベント
トリガ条件onkeyupキーボードのボタンが解除されたのはトリガーです.onkeydownキーが押された時にトリガします.onkeypressあるキーが押された時にトリガします. ctrl shift矢印などです.

<script>
        //        
        //1. keyup           
        document.addEventListener('keyup', function() {
     
            console.log('    ');
        })
        
        //3. keypress                       ctrl shift      
        document.addEventListener('keypress', function() {
     
                console.log('    press');
        })
        //2. keydown                      ctrl shift      
        document.addEventListener('keydown', function() {
     
                console.log('    down');
        })
        // 4.            keydown -- keypress -- keyup
    </script>

キーボードイベントオブジェクト

キーボードイベントオブジェクトのプロパティ
説明
keyCode
このキーのASCLL値を返します.

は、keyCode属性により、ユーザがどのキーを押すかを判断する

.

        //         keyCode          ASCII  
        document.addEventListener('keyup', function(e) {
            console.log('up:' + e.keyCode);
            //       keycode   ASCII             
            if (e.keyCode === 65) {
                alert('    a ');
            } else {
                alert('     a ')
            }
        })
        document.addEventListener('keypress', function(e) {
            // console.log(e);
            console.log('press:' + e.keyCode);
        })
    

2、jsマウス事件

マウスイベント

イベントの種類
説明clickマウスの左ボタンをクリックした時に発生します.右ボタンを押しても発生しません.ユーザーのフォーカスがボタンにあり、Enterキーを押した時にも同様にこのイベントが発生します.dbclickマウスの左ボタンをダブルクリックした時に発生します.右クリックしたら発生しません.mousedownシングルマシンのいずれかのマウスボタンが発生します.mouseoutマウスの指がある要素の上にあり、要素の境界を移動するときに発生します.mouseoverマウスポインタが他の要素に移動したときに発生します.mouseup任意のマウスボタンを離すと発生します.mousemoveマウスがある元素の上にいる時に連続して発生します.

    


    var p1 = document.getElementsByTagName("p")[0];  //           
    var t = document.getElementById("text");  //          
    function f () {  //      
        var event = event || window.event;  //       
        t.value = (event.type);  //        
    }
    p1.onmouseover = f;  //             
    p1.onmouseout = f;  //             
    p1.onmousedown = f;  //             
    p1.onmouseup = f;  //             
    p1.onmousemove = f;  //             
    p1.onclick = f;  //             
    p1.ondblclick = f;  //             
</code></pre> 
  <ul> 
   <li> <p>    </p> <p>      ，               </p> </li> 
  </ul> 
  <table> 
   <thead> 
    <tr> 
     <th>  </th> 
     <th>  </th> 
     <th>   </th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td><code>clientX</code></td> 
     <td>             ，   x    </td> 
     <td>     ，    Safari</td> 
    </tr> 
    <tr> 
     <td><code>clientY</code></td> 
     <td>             ，   y    </td> 
     <td>     ，    Safari</td> 
    </tr> 
    <tr> 
     <td><code>offsetX</code></td> 
     <td>                 ，   x    </td> 
     <td>     ，    Mozilla</td> 
    </tr> 
    <tr> 
     <td><code>offsetY</code></td> 
     <td>                 ，   y    </td> 
     <td>     ，    Mozilla</td> 
    </tr> 
    <tr> 
     <td><code>pageX</code></td> 
     <td>  document   （     ）       ，   x    </td> 
     <td>     ，    IE</td> 
    </tr> 
    <tr> 
     <td><code>pageY</code></td> 
     <td>  document   （     ）       ，   y    </td> 
     <td>     ，    IE</td> 
    </tr> 
    <tr> 
     <td><code>screenX</code></td> 
     <td>            ，   x    </td> 
     <td>     </td> 
    </tr> 
    <tr> 
     <td><code>screenY</code></td> 
     <td>            ，   y    </td> 
     <td>     </td> 
    </tr> 
    <tr> 
     <td><code>layerX</code></td> 
     <td>           （    ，   document   ）       ，   x    </td> 
     <td>Mozilla   Safari</td> 
    </tr> 
    <tr> 
     <td><code>layerY</code></td> 
     <td>           （    ，   document   ）       ，   y    </td> 
     <td>Mozilla   Safari</td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code>var posX = 0, posY = 0;
var event = event || window.event;
if (event.pageX || event.pageY) {
    posX = event.pageX;
    posY = event.pageY;
} else if (event.clientX || event.clientY) {
    posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
    posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}
</code></pre> 
  <p><strong>  ：</strong></p> 
  <blockquote> 
   <p>​            ，        ：<code>mousedown</code>、<code>mouseup</code>、<code>click</code>、<code>dbclick</code>         ，</p> 
   <pre><code>mousedown → mouseup → click → mousedown → mouseup → click → dblclick
</code></pre> 
  </blockquote> 
  <h3>3、js  HTML  </h3> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">  </th> 
     <th align="center">    </th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center">load</td> 
     <td align="center">        :window.οnlοad=…</td> 
    </tr> 
    <tr> 
     <td align="center">unload</td> 
     <td align="center">     ：window.οnunlοad=…</td> 
    </tr> 
    <tr> 
     <td align="center">select</td> 
     <td align="center">     </td> 
    </tr> 
    <tr> 
     <td align="center">change</td> 
     <td align="center">      </td> 
    </tr> 
    <tr> 
     <td align="center">focus</td> 
     <td align="center">       </td> 
    </tr> 
    <tr> 
     <td align="center">submit</td> 
     <td align="center">     ，form.οnsubmit=…</td> 
    </tr> 
    <tr> 
     <td align="center">reset</td> 
     <td align="center">        ，form.οnreset=…</td> 
    </tr> 
    <tr> 
     <td align="center">scroll</td> 
     <td align="center">               window.οnscrοll=…</td> 
    </tr> 
    <tr> 
     <td align="center">blur</td> 
     <td align="center">       </td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code><script>
window.onload = function(){
    var d = document.getElementById('d');
    //     （            ）
    d.onchange = function(){
        alert('       ')
    }
}