ホームページ > 記事 > ウェブフロントエンド > JavaScriptのバブリングイベント、マウスイベント、domインスタンスの詳細説明
バブリングの target と currentTarget について
Target はイベント フローのターゲット ステージにあり、currentTarget はイベント フローのキャプチャ、ターゲット、およびバブリングのステージにあります。イベント フローがターゲット ステージにある場合のみ、キャプチャ ステージとバブリング ステージにある場合、ターゲットはクリックされたオブジェクトを指し、currentTarget は現在のイベントの親を指します。
<p id="outer" style="background:#099"> <p>我是目标p</p> ----点击这部分,输出:e.target.tagName : P || e.currentTarget.tagName : p <p id="inner" style="background:#9C0">我是目标p</p> ----点击这部分,输出:e.target.tagName : P || e.currentTarget.tagName : p <br> ----点击这部分,输出:e.target.tagName : p || e.currentTarget.tagName : p </p> //看下第二个变列: <p id="outer" style="background:#099"> <p>我是目标p</p> ----点击这部分,输出:e.target.tagName : p || e.currentTarget.tagName : p <p id="inner" style="background:#9C0">我是目标p</p> ----点击这部分,输出:e.target.tagName : P || e.currentTarget.tagName : p <br> ----点击这部分,输出:e.target.tagName : p || e.currentTarget.tagName : p </p>
function getObj(id) { return document.getElementById(id); } function addEvent(obj, event, fn) { if(window.attachEvent) { obj.attachEvent("on" + event, fn); } else if(window.addEventListener) { obj.addEventListener(event, fn, false); } } function test(e) { alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName); } var outer = getObj("outer"); var inner = getObj("inner"); //addEvent(inner, "click", test); addEvent(outer, "click", test);
IEとDOMの違い
ターゲットevent.targetevent.srcElementを取得文字コードを取得event.charCodeevent.keyCode
デフォルト動作を防ぐevent.prevetDefault()event。 returnValue = FALSE
Bubble Event.stoppropagation () Event.cancelbubble = True
document.body.oncontextmenu=function(event) { if(isIE) { var oEvent=window.event; oEvent.returnValue=false; //也可以直接是return false;阻止默认行为 } else { oEvent.preventDefault(); } }
マウスイベント
<p>use your mouse to click and double click the red square</p> <p style="width:100px;height:100px;background:red" onmouseover="handleEvent(event)" onmouseout="handleEvent(event)" onmousedown="handleEvent(event)" onmouseup="handleEvent(event)" onclick="handleEvent(event)" ondblclick="handleEvent(event)" id="p1" > </p> <p><textarea id="txt1" rows="5" cols="45"></textarea></p> <!--检测键盘事件--> <p><input type="text" id="textbox" onkeydown="handle(event)" onkeypress="handle(event)" onkeyup="handle(event)" ></p> <p><textarea id="txt2" rows="10" cols="45"></textarea></p>js ファイルは次のとおりです:
rrree
以上がJavaScriptのバブリングイベント、マウスイベント、domインスタンスの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。