<script type=
"text/javascript"
>
var
oDiv=document.getElementById(
"div1"
);
oDiv.onclick=
function
(){
alert(
"i was clicked"
);
};
<div onclick=
"alert('i am clicked')"
></div>
var
fnclick1=
function
(){alert(
"clicked"
)};
vr fnclick2=
function
(){alert(
"also clicked"
)};
var
oDiv=document.getElementById(
"div"
);
oDiv.attachEvent(
"onclick"
,fnClick1);
oDiv.attachEvent(
"onclick"
,fnClick2);
oDiv.addEventListener(
"onclick"
,fnclick1,
false
);
oDiv.addEventListener(
"onclick"
,fnclick2,
false
);
oDiv.onclick=
function
(){
var
oEvent=window.event;
}
oDiv.onclick=
function
(oEvent){}
var
sType=oEvent.type;
function
handleEvent(oEvent){
if
(oEvent.type==
"click"
)
{
alert(
"clicked!"
);
}
else
if
(oEvent.type==
"mouseover"
){
alert(
"mouse over"
);
}
}
oDiv.onclick=handleEvent;
oDiv.onmouseover=handleEvent;
var
iKeyCode=oEvent.keyCode();
var
bshift=oEvent.shiftKey;
var
bAlt=oEvent.altKey;
var
bCtrl=oEvent.ctrlKey;
var
iClientX=oEvent.clientX;
var
iClientY=oEvent.clientY;
var
iScreenX=oEvent.screenX;
var
iScreenY=oEvent.screenY;
var
oTarget=oEvent.srcElement;
var
oTarget=oEvent.target;
var
iCharCode=oEvent.keyCode;
var
iCharCode=oEvent.charCode;
var
sChar=string.fromCharCode(oEvent.charCode);
if
(oEvent.isChar){
var
iCharcode=oEvent.charCode;
}
document.body.oncontextmenu=
function
(oEvent){
if
(isIE){
oEvent=window.event;
oEvent.returnValue=
false
;
}
else
{
oEvent.preventDefault();
}
}
oEvent.cancelBubble=
true
;
oEvent.stopPropagation();
<html>
<head>
<script type=
"text/javascript"
>
function
handleEvent(oEvent){
var
oTextbox=document.getElementById(
"txt1"
);
oTextbox.value+=
"\n"
+oEvent.type;
}
</script>
</head>
<body>
<p>your mouse to click and double click the red square.</p>
<div style=
"width:100px;height:100px;background-color:red"
onmouseover=
"handleEvent(event)"
onmouseout=
"handleEvent(event) onmousedown="
handleEvent(event)
" onmouseup="
handleEvent(event)
"
onclick="
handleEvent(event)
" ondbclick="
handleEvent(event)
" id="
div1
"></div>
<p><textarea id="
txt1
" rows="
15
" cols="
50
"></textarea></p>
</body>
</html>
//一个很流行的改变图片的.
<img src="
image1.jpg
" onmouseover="
this
.src=
'image2.jpg'
" onmouseout="
this
.src=
'image1.jpg'
">
//事件的属性:坐标属性(clientX,clientY),type属性,target或srcElement属性,shiftKey,ctrlKey,altKey,button属性
function handleEvent(oEvent){
var oTextbox=document.getElementById("
txt1
");
oTextbox.value+="
\n
"+oEvent.type;
oTextbox.value+="
\n target is
"+(oEvent.target||oEvent.srcElement).id;
oTextbox.value+="
\n at(
"+oEvent.clientX+"
,
"+oEvent.clientY+"
) on the client
";
oTextbox.value+="
\n at(
"+oEvent.screenX+"
,
"+oEvent.screenY+"
) on the screen
";
oTextbox.value+="
\n button down is
"+oEvent.button;
var arrKeys=[];
if(oEvent.shiftKey)
arrKeys.push("
shift
");
if(oEvent.ctrlKey)
arrKeys.push("
ctrl
");
if(oEvent.altKey)
arrKeys.push("
alt
");
oTextbox.value+="
\n keys down are
"+arrKeys;
}
//要触发dbclick事件,在同一个目标上要顺序发生以下事件:
//mousedown,mouseup,click,mousedown,mouseup.click,dbclick.
//
//键盘事件:keydown,keypress,keyup
//事件属性:keyCode属性,charCode属性(DOM),target或srcElement,shiftKey,ctrlKey,altKey,
<html>
<head>
<script type="
text/javascript
">
//打印出键盘标鼠事件的各个类型
function handleEvent(oEvent){
var oTextbox=document.getElementById("
txt1
");
oTextbox.value+="
\n
"+oEvent.type;
oTextbox.value+="
\n target is
"+(oEvent.target||oEvent.srcElement).id;
oTextbox.value+="
\n keycode is
"+oEvent.keyCode;
oTextbox.value+="
\n charcode is
"+oEvent.charCode;
var arrKeys=[];
if(oEvent.shiftKey)
arrKeys.push("
shift
");
if(oEvent.ctrlKey)
arrKeys.push("
ctrl
");
if(oEvent.altKey)
arrKeys.push("
alt
");
oTextbox.value+="
\n keys down are
"+arrKeys;
}
</script>
</head>
<body>
<p>your mouse to click and double click the red square.</p>
<p><textarea id="
txtInput
" rows="
15
" cols="
50
" onkeydown="
handleEvent(event)
" onkeyup="
handleEvent(event)
"
onkeypress="
handleEvent(event)
"></textarea></p>
<p><textarea id="
txt1
" rows="
15
" cols="
50
" ></textarea></p>
</body>
</html>
//用户按一次字符按键时,会按以下顺序发生:keydown,keypress,keyup
//HTML事件
//load事件,页面完全载入后,在window对象上触发。img完全载入后在其上触发.
//unload事件,页面完全卸载后,在window对象上触发.
//error事件,javascript脚本出错时,在window对象上触发。img指定图像无法载入时,在其上触发.
//resize事件,scroll事件,focus事件,blur事件。
window.onload=function(){
alert(loaded);
}
//与load和unload事件类似,resize事件的处理函数必须使用javascript代码分配给window对象或者HTML中分配给body元素.
<body onresize="
alert(
'resizing'
)
">
//scroll事件,希望用户在卷动窗口时,确保某些内容一直在屏幕上可见.
//可与body元素的属性协用,scrollLeft,保存窗口在水平方向上卷动的距离,以及scrollTop,保存窗口在垂直方向上卷动的距离
window.onscroll=function(){
var oWatermark=document.getElementById("
divWatermark");
oWatermark.style.top=document.body.scrollTop;
}
</script>