<!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" οncοntextmenu="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' οnkeypress="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 οnclick="RunEvent()">
Run Event</button>
<button οnclick="FireEvent()">
Fire Event</button>
<br/>
<br/>
<button οnclick="document.location.href=document.location.href">
Refresh</button>
</BODY>
</HTML>鼠標靠近input 輸入框，會在下面的div中顯示一系列事件
比如：點擊事件，會觸發哪些事件