<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script src="event_utils.js"> </script> </HEAD> <!-- onmousedown onmouseup 不会触发click mousemove --mouseover --(mousemove ...) --mousedown--focus--mouseup--click --keydown --keyup --mousemove --mouseout --change -blur --> <BODY> <div id="divEvent" oncontextmenu="return false;" style="border: dotted 1px blue; width: 170px; height: 100px; padding: 10px" > </div> Right click the above rectangle. <br/> <div id="divc"> <input type="text" name = 'test' id='testevent' /> </div> <a class="a02" target="_blank" id='testlink' href="http://50813.blog.kangq.com/messagebox.php?action=center">[查看]</a> <br/> <textarea name = 'test' id='textareaId' rows = "15" cols="150" > </textarea> <input type="text" name = 'test' id='testinput2' onkeypress="doClick('testinput2', event)"/> <script> var divObj = document.getElementById('divEvent'); var intObj = document.getElementById('testevent'); divObj.onmousedown = function (){ ShowContextMenu(divObj); } ; function log( ){ var evt = window.event; textareaId.value=textareaId.value+"\r\n"+"type:"+evt.type+" x:"+evt.offsetX+" y:"+evt.offsetY +" srcElement:"+evt.srcElement.id+" evt.button:"+evt.button+" evt.keyCode:"+evt.keyCode; } intObj.onmousedown = function (){ log(); } var divobj = document.getElementById('divc'); divobj.onclick = function(){ textareaId.value=textareaId.value+"\r\n"+"divobj.onclick"; } divobj.onkeyup = function(){ textareaId.value=textareaId.value+"\r\n"+"divobj.onkeyup"; } divobj.onmousedown = function(){ textareaId.value=textareaId.value+"\r\n"+"divobj.onmousedown"; } intObj.onmousemove = log; intObj.onmouseover = log; intObj.onmousemove = log; intObj.onmousemove = log; intObj.onmousedown = function (){ //window.event.cancelBubble = true; log(); } intObj.onfocus = function (){ log(); } intObj.onmousemove = log; intObj.onmouseup = function(){ log(); } intObj.onclick = function (){ //alert(window.event.cancelBubble); //alert(window.event.fuyou); //window.event.cancelBubble = true; //alert(window.event.cancelBubble); log(); }; intObj.onkeydown = log; //intObj.value = 'sjeoise'; intObj.onkeyup = function (){ //window.event.cancelBubble = true; log(); } intObj.onmousemove = log; intObj.onmousemove = log; intObj.onmouseout = log; intObj.onchange = log; intObj.onblur = log; function ShowContextMenu(elmt) { var evt = elmt.document.parentWindow.event; if ( evt.button == 2 ) { var popup = window.createPopup(); var menuHTML = "<div style='width:100%;height:100%;border: solid 1px red'>Context Menu</div>"; popup.document.body.innerHTML = menuHTML; popup.show(evt.offsetX, evt.offsetY, 100, 24, elmt); } divEvent.innerText = '"onmousedown" event fired in this divsion element.'; } </script> <script Language="javascript"> function test(){ return; } //alert(test()); function RunEvent() { // divEvent.onmousedown(); divEvent.fireEvent('onmousedown'); } function FireEvent() { // var rect = divEvent.getBoundingClientRect(); // evt.offsetX = (rect.right+rect.left)/2; // evt.offsetY = (rect.bottom-rect.top)/2; var evt = document.createEventObject(); evt.button = 2; evt.type = 'onmousedown'; var rect = divEvent.getBoundingClientRect(); evt.offsetX = 700; evt.offsetY = 700; divEvent.fireEvent('onmousedown', evt); } </script> <script type="text/javascript"> function SimEvents2 (srcElement,lrMouse,eventname,keyCode){ var obj = document.getElementById(srcElement); if(obj){ var rect = obj.getBoundingClientRect(); var x1 = Math.ceil(Math.random()*(rect.right-rect.left)); var y1 = Math.ceil(Math.random()*(rect.bottom-rect.top)); var evt = document.createEventObject(); evt.button = lrMouse; evt.type = eventname; alert(typeof keyCode); if(typeof keyCode!=undefined){ evt.keyCode = keyCode; } evt.offsetX = x1; evt.offsetY = y1; evt.cancelBubble = true; //alert(window.event) //cancelBubble = true; evt.fuyou='fuyou001'; //alert(evt.cancelBubble); obj.fireEvent(eventname, evt);//与window.event是同一对象,但却不设置取消冒泡 } } function clickByEvent(id){ var obj = document.getElementById(id); if(obj){ SimEvents2(id,0,'onmousemove'); SimEvents2(id,0,'onmouseover'); SimEvents2(id,0,'onmousedown'); SimEvents2(id,0,'onfocus'); SimEvents2(id,0,'onmouseup'); SimEvents2(id,0,'onclick'); SimEvents2(id,0,'onmouseout'); } } function setValueByEvent(name,value){ var obj = document.getElementById(name); if(obj&&value){ SimEvents2(name,0,'onmousemove'); SimEvents2(name,0,'onmouseover'); // SimEvents2(name,0,'onmousemove'); // SimEvents2(name,0,'onmouseover'); SimEvents2(name,0,'onmousedown'); SimEvents2('testevent',0,'onfocus'); SimEvents2('testevent',0,'onmouseup'); SimEvents2('testevent',0,'onclick'); SimEvents2('testevent',0,'onkeydown'); for(var i=0;i<value.length;i++){ var tempChar = value.substring(i,i+1); SimEvents2('testevent',0,'onkeydown',tempChar.charCodeAt()); obj.value=obj.value+tempChar; SimEvents2('testevent',0,'onkeyup',tempChar.charCodeAt()); } //obj.value = value; //alert(value.substring(0,1).charCodeAt()) SimEvents2('testevent',0,'onkeyup'); SimEvents2('testevent',0,'onmousemove'); SimEvents2('testevent',0,'onmouseout'); SimEvents2('testevent',0,'onchange'); SimEvents2('testevent',0,'onblur'); } } //setValueByEvent('testevent','123456abcdef'); /* * 测试冒泡 var divObj = document.getElementById('divc'); var intObj = document.getElementById('testevent'); intObj.onclick = function (){ window.event.cancelBubble = true; alert('intObj click'); } divObj.onclick = function (){ alert('divObj click'); } */ var obj = document.getElementById('testlink'); ev_SimEvents2(obj,0,'onclick'); </script> <br /> <button onclick="RunEvent()"> Run Event</button> <button onclick="FireEvent()"> Fire Event</button> <br/> <br/> <button onclick="document.location.href=document.location.href"> Refresh</button> </BODY> </HTML>
鼠标靠近input 输入框,会在下面的div中显示一系列事件
比如:点击事件,会触发哪些事件