実用JSシリーズ——イベントタイプ

2559 ワード

JavaScript イベント

イベントとは、ユーザーがウィンドウ上の様々なコンポーネントを操作することです.JSにおけるイベントは、Webページにアクセスするユーザによって引き起こされる一連の動作である.一般的には、ブラウザとユーザ操作の対話、例えば、ユーザのクリックイベントなどに用いられる.
タイプは次の通りです
インラインモデル、スクリプトモデル、DOM 2モデル.
1、インラインモデル
先に二つのインラインモデルの例を見ます.

//  1
    <input type="button" id="button1" value="Test" onclick="alert('Hello World!')" />

または関数を利用します

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" >
        function test() {
            alert("Hello World!");
        }
    </script>
</head>
<body>
    //  2
    <input type="button" value="Test1" onclick="test()" />
</body>
</html>

これは最も伝統的な事件の処理方法です.
特徴:
上の二つの例から見れば、初心者にとっては、このような書き方はよく理解できますが、JavaScriptとはうまく分離できませんでした.
2、スクリプトモデル
スクリプトモデルは、jsにおいてイベントを処理して、インラインモデルによる問題を解決することができる.

//    
 var Obj = document.getElementById('testButton');
//    
            Obj.onclick = function () {
                alert('Hello World!');
            }

getElementByIdはIDに基づいて対象を取得します.同様にgetElementByTagName、getElements ByClass Nameなどがあります.使い方は似ていますが、idは唯一ですが、クラスは唯一ではありません.
3、DOM事件
W 3 C仕様はDOMレベル1では何のイベントも定義されておらず、DOMレベル2ではWebページのイベントを制御するより詳細な方法を提供しています.最後に、完全なイベントは2004年のDOMレベル3の規定で最終的に決定されました.
DOMイベントでは、要素にイベントの傍受を追加することができます.これを使用しないときは、それを除去することができます.
1)addEvent Listener
フォーマット:

element.addEventListener(<event-name>, <callback>, <use-capture>);

パラメータ1:event-nameイベント名またはタイプ
パラメータ2:calbackコールバック関数は、イベントのトリガ時に呼び出されます.
引数3:use-captureがキャプチャー段階でトリガされるかどうか.
コードの例:

 var Obj = document.getElementById('testButton');
            Obj.addEventListener("click", function () {
                alert("Hello World! Dom2");
            }, false);

2)removeveEvent Listener
フォーマット:

element.removeEventListener(<event-name>, <callback>, <use-capture>);

パラメータはaddEventListenerと同じで、使い方も非常に似ています.
リボン:
ある人は、事件はJavaScript応用の鼓動の心臓だと言います.イベントは通常関数と組み合わせて使用され、イベントが発生した時に関数が実行されます.私たちはブラウザのWebページと何らかの種類のインタラクションを行うと、イベントが発生します.しかし、事件を使う時には、効率と構造の両面でウィンウィンを獲得するために、合理的に選択しなければなりません.

文字列と配列の長さを操作します.