JSイベント

我々は（イベント）イベントを呼び出す通常のマウスまたはホットキーアクション

JSイベントによって、私たちは、割り当てられた特殊効果のページを完了することができます。

A、JS簡単なイベント駆動型のメカニズム

警察は泥棒を捕まえます

イベントソース泥棒

イベント盗難

リスナー警察

登録/バインディングリスナー警察見つめ泥棒

イベントソース：特別に作らコンポーネントイベント。

イベント：ソースによって生成されたイベントアクションや物。

リスナー：ソースによって生成された特別な処理イベントイベント。

登録/バインディングリスナー：リッスンするリスナーの時間を聞かせてイベントソース指定されたイベントは、イベントソースが指定されたイベントを生成した場合、リスナー・プロセスを呼び出し、発生あり

第二に、一般的なJSのイベント

イベント1.クリック（onclock）

マウスまたはホットキーによる組立トリガー要素をクリックすると、

<script>
    function run1(){
        alert("弹出")
    }
</script>
<body>
    <input type="text" value = "点击“ οnclick="run1()"/>
</body>

2、イベントの焦点

、取得フォーカスイベント（ONFOCUS）

フォーカス：ページ全体を集中

1ページのデフォルトの最大通常のフォーカス

点滅するテキストボックス小さな縦線：たとえば、

元素成分がフォーカスを取得したときに火災：フォーカスイベントを取得します。

<script>
    function run1(){
        alert("获取焦点了")
    }
</script>
<body>
    <input type="text" onfocus="run1()"/>
</body>

B、失われたフォーカスイベント（貴）

トリガされたときにフォーカスを失います

<script>
    function run1(){
        alert("失去焦点了")
    }
</script>
<body>
    <input type="text" onblur="run1()"/>
</body>

図3に示すように、フィールドの内容変更イベント（のonchange）

エレメントアセンブリ値の変更トリガー

<select onchange="run1()">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="gz">广州</option>
</select>

図4に示すように、ロードされたイベント（オンロード）

アセンブリがロードされたトリガ素子である場合には

<body onload="run1()">
    
</body>

5、フォームは（提出の）提出されました

フォーム[送信]ボタンをクリックしますトリガー

フォーム送信制御 - フォームの確認

真のフォームの送信を許可します

偽防止フォームの送信


<script>
	function run1(){
        ....;
        return true;
    }
</script>
<form onsubmit="return run1()">		
    <input type="text" name="uname" /></form><br />
    
    <input type="submit" value="提交" />
</form>

図6に示すように、キーアップイベント（onkeyupの）

ときに入力アセンブリで何か、キーボードのキーときにバウンス火災

<input type="text" onkeyup="run1()"/>

7、一般的なマウスイベント

、移動マウスイベント（onmouseover属性）

マウスイベントを移動する次の場合、トリガー要素にマウスアセンブリ

<input type="text" onmouseover="run1()"/>

イベントアウトB、マウス（れるonmouseout）

イベントアウトマウス：マウス要素トリガーアセンブリのうち

<input type="text" onmouseout="run1()"/>

第三に、二つの結合方法JSイベント

図1に示すように、結合要素イベントハンドラ

イベントは、タグ内の要素属性の様式で書かれた、および、対応する機能と結合されています

<input type="text" onmouseout="run1()"/>
//传这个文本框对象
<input type="text" onmouseout="run1(this)"/>
//绑定多个事件,绑定顺序就是执行顺序
<input type="text" onmouseout="run1(),run2(),run3()"/>

利点：

高速の開発

便利なパラメータの受け渡し

あなたは、複数の機能をバインドすることができます

短所：

JSとHTMLの高ブレンド一緒に、多部門のプロジェクトを開発し、維持するために助長されていません

2、DOMバインディング方法

結合特性を利用DOM属性の方法

<script>
	window.onload=run1;		//一次绑定一个函数，不能传参
    window.onload=function(){	//匿名函数，可以绑定多个参数，可以传递参数
        run1();
        run2();
        run3();
    };
</script>

<script>
	function run1(){
        
    }
    function run2(){
        
    }
    window.onload=function(){
        //使用DOM方式获取到元素对象
        var t1 = document.getElementById("t1");
        //改变这个元素的属性
        ti.onclick=function(){
            run1();
            run2();
        }
    }
</script>

<input type="text" id="t1"/>