JavaScript でのイベントの簡単な詳細説明

1.イベント処理関数

イベントとは、自動またはユーザーによって手動でトリガーされるオブジェクトの状態の変化を指します。

イベント処理関数: イベントがトリガーされると、は自動的に関数を実行します

イベント処理関数は本質的にオブジェクトの特別な属性であり、この属性は関数を指します。

各要素オブジェクトはさまざまなイベントをトリガーすることができ、各イベントはイベント ハンドラーに対応します。

イベント処理関数がバインドされていない場合でもイベントをトリガーできますが、この時点ではイベントバインディング関数は空であるため、操作は実行されません。

プログラムが実行されると、対応する関数またはステートメントがオブジェクトのイベント処理関数にバインドされ、オブジェクトの指定されたイベントがトリガーされると、ブラウザーはそのイベント処理関数の操作を自動的に実行します。オブジェクト。 。

バインドイベントハンドラ関数＝onイベント名に値を代入する（この関数）

2. 基本的なイベント分類

onclick onbdclick onmousedownオンマウスアップ

onmouseover

(境界に入ると一度トリガーされます) onmouseout onmusemove 2. キーボード イベント

onkeydown onkeyup onkeypress

3. ステータス イベント

onfocus (form) onblur (フォーム）サイズ変更時onsubmit onreset onerror

3. イベント定義について

特定の時間のリスニング関数を定義するには、

1. HTML要素のイベント関連の属性を直接定義する

<p style="margin-bottom: 7px;"><标签 on事件名="fun()/js语句">按钮</标签</p>

rreerreee

この方法は「コンテンツと動作の分離」の原則に違反しているため、できるだけ使用しないようにしてください。

2. JavaScript で要素のイベント関連属性に値を割り当てる:

<span style="color: #0000ff"><</span><span style="color: #800000">标签 class</span><span style="color: #0000ff">="d1"</span><span style="color: #ff0000"> onclick</span><span style="color: #0000ff">="fun()"</span><span style="color: #0000ff">></span><span style="color: #000000"><span style="color: #ff0000">相当于</span>d1.onclick=function(){
    console.log(this.className);    //d1
    eval("fun()");//[window.]fun
}<br/><strong><span style="color: #ff0000">结论：fun()中this指向window</span></strong></span>

このメソッドは「コンテンツと動作の分離」を実現しますが、要素は 1 つの listen 関数にのみバインドできます。

3. 高度なイベント処理メソッド、1つのイベントを複数のリスニング関数にバインド可能:

DOM標準: elem.addEventListener (「イベント名」、イベントオブジェクト、キャプチャフェーズでトリガーするかどうか) IE8標準: elem .attachEvent("on イベント名", イベントオブジェクト)

//若要获得当前目标元素对象html:
    onxxx="fun(this)"
js中定义函数时:
    fun(elem);

このメソッドは複数のリスニング関数を要素にバインドできますが、ブラウザの互換性の問題に注意する必要があります。

小さな例: イベント処理関数の逆実行

html:

css:

js:

結果: オリジナル

中をクリックレイヤーブロックの結果:

3.

イベントサイクル

DOM

入れる工程 HTML 要素間の伝播:

第 1 段階: イベント キャプチャ、イベント オブジェクトが DOM ツリーに伝播されます (IE のイベント モデルにはそのような段階はありません)

第 2 段階: ターゲットがトリガーされ、イベントリスニング関数が実行されます

第3段階：イベントバブリング、イベントはDOMツリーに沿って上向きに伝播します

1.イベントバブリング処理メカニズム：

DHTMLの下部にあるオブジェクトに対してイベントが発生したときオブジェクトモデルでは、上記のオブジェクトで定義された同じクラスが順番にアクティブ化されます

結果:

　　

 IE

　　只有两个阶段，没有捕获

 4.event对象

　　任何事件触发之后都会产生一个event对象

　　当事件发生时，自动创建，封装了事件信息（keyCode/screenX/screenY...）

　　event对象记录事件发生时的鼠标位置，键盘按键状态和触发对象等信息，事件对象的常用属性：

- secElement（IE） / target（DOM）　　:    事件源对象
- eventPhase　　 :    事件传播的阶段
- clientX/offsetX/pageX/screenX/x    :    事件发生时的X坐标
- clientY/offsetY/pageY/screenY/y    :    事件发生时的Y坐标
- which/keyCode/charCode              :    键盘事件中按下的按键
- button    ：    鼠标哪个按键被按下
- cancelBubble    :    是否取消事件冒泡
- returnValue     :    是否阻止事件的默认行为

　　1.目标元素对象(从一而终)

　　　　1.HTML绑定事件方式

html:
onclick="fun(event)"　　//event必须这样写，不能变

　　　　//实际调用时，event会自动获得当前事件的对象
js:
fun(e){
    //e中获取到的就是当前的事件对象
　　　 }

　　　　2.js绑定方式

//DOM标准：自动创建event对象，默认以第一个参数传入自定义的事件处理函数对象
//IE标准：window全局的event属性，当事件发生时，自动创建event对象，保存在window.event中

var e=window.event||arguments[0];
var src=e.srcElement||e.target;

5.取消冒泡和利用冒泡

　　1.取消冒泡

DOM标准：e.stopPropagation()

IE标准：e.cancelBubble=true;

用在当前的事件处理函数的末尾

if(e.stopPropagation)
{
    e.stopPropagation();
}else{
    e.cancelBubble=true;
}

　　2.利用冒泡

　　优化：若多个子元素中定义了相同的事件处理函数，只需要在共同的父元素上定义一次即可

　　原理：事件的捕获和冒泡不会受到程序的干扰，当触发子元素时，会捕获到该元素，然后在父元素触发事件。

6.取消事件

if(e.preventDefault){
    e.preventDefault();    //DOM
}else{
    e.returnValue=false;    //IE
}

　　何时取消：eg：表单提交之前，若验证未通过，就取消之后的自动提交。

以上がJavaScript でのイベントの簡単な詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。