버블링의 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.target event.srcElement 가져오기문자 코드 가져오기 event.charCode event.keyCode
기본 동작 event.prevetDefault() 이벤트 방지. 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(); } }
Mouse events
<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 파일은 다음과 같습니다.
function handleEvent(event) { var oText=document.getElementById('txt1'); oText.value+= "\n"+event.type; oText.value+= "\n target is "+(event.srcElement||event.target).id; oText.value+="\n at ("+event.clientX+","+event.clientY+")in the client"; oText.value+="\n at ("+event.screenX+","+event.screenY+")in the client"; oText.value+="\n button down is"+event.button; var arrKeys=[]; oText.value+="\n relatedTarget is"+event.relatedTarget.tagName; //event.relatedTarget.tagName可以判断鼠标的来源和出处 } function handle(event) { var oText2=document.getElementById('txt2'); oText2.value+="\n"+event.type; var arrKeys=[]; if(event.shiftKey){arrKeys.push("Shift");} if(event.ctrlKey){arrKeys.push("Ctrl");} if(event.altKey){arrKeys.push("Alt");} oText2.value+="\n keydown is "+arrKeys; }
위 내용은 자바스크립트 버블링 이벤트, 마우스 이벤트 및 DOM 인스턴스에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!