键盘事件,鼠标事件,表单事件,绑定多个事件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>event</title>
</head>
<body>
<h2>鼠标事件</h2>
<div style="width:100%;background-color:#dcdcdc">
<div style="width: 200px;height: 100px;background-color: green;" id="div01" οnmοusedοwn="mDown(this)" οnmοuseup="mUp(this)" οnmοuseοut="mOut(this)" οnmοuseοver="mOver(this)">
<font color="white">hello world</font>
</div>
<script type="text/javascript">
function mDown(obj){
obj.innerHTML="HELLO WORLD";
obj.style="width:200px;height: 100px;background-color: green;color:red;";
}
function mUp(obj){
obj.innerHTML="hello world";
obj.style="width: 200px;height: 100px;background-color: green;color:white;";
}
function mOut(obj){
obj.innerHTML="mOut";
obj.style="width: 200px;height: 100px;background-color: green;color:white;";
}
function mOver(obj){
obj.innerHTML="mOver";
obj.style="width: 200px;height: 100px;background-color: green;color:red;";
}
function mMove(obj){
alert("mMove");
obj.style="width: 200px;height: 100px;background-color: green;color:red;";
}
</script>
</div>
<h2>键盘事件</h2>
<div style="width:100%;background-color:#dcdcdc">
<input type="text" name="n01" οnkeyup="kUp(this)" />
<script type="text/javascript">
function kDown(obj){
alert("键盘按下了");
}
function kPress(obj){
alert("键盘按住");
}
function kUp(obj){
obj.value=obj.value.toUpperCase();
}
</script>
</div>
<h2>表单事件</h2>
<div style="width:100%;background-color:#dcdcdc">
<form action="" method="post" οnsubmit="return oSubmit(this)">
<input type="text" value="test" οnfοcus="oFocus(this)" οnblur="oBlur(this)" οnchange="oChange(this)" />
<input type="submit" value="submit" />
</form>
<script type="text/javascript">
// window.οnlοad=function(){
// alert("onload is work");
// }
// window.onunload = function(){
// alert("unload is work");
// }
// window.onbeforeunload = function(){
// alert("onbeforeunload is work");
// }
function oSubmit(obj){
alert("表单提交了");
}
function oFocus(obj){
obj.style="border-color:#ff0000 #0000ff;";
}
function oBlur(obj){
obj.style="";
}
function oChange(obj){
alert("change");
}
</script>
</div>
<h2>页面事件</h2>
<div style="width:100%;background-color:#dcdcdc">
<div id="name1" style="border:1px solid red;padding:10px 10px 10px 10px;" style="border:1px solid red;padding:10px 10px 10px 10px;">
<div id="name2" style="border:1px solid green;padding:10px 10px 10px 10px;" style="border:1px solid green;padding:10px 10px 10px 10px;">点击</div>
</div>
<div id="info"></div>
<script type="text/javascript"><!--
var name1=document.getElementById('name1'); //要注意
var name2=document.getElementById('name2'); //要注意
var info=document.getElementById('info');
// 对象.attachEvent("事件(on)","处理程序") 添加
// 对象.dettachEvent("事件(on)","处理程序") 删除
// FF:
// 对象.addEventListener("事件","处理程序",布尔值) 添加
// 对象.removeEventListener("事件","处理程序",布尔值) 删除
// IE:
// 事件对象.cancelBubble=true;
// FF:
// 事件对象.stopPropagation();
// IE11以下为attachEvent
if(name1.attachEvent){ //对于attachEvent前面的target我们一定要保证不为空
name1.attachEvent('onclick',function () { info.innerHTML += "红色" + "<br>"; });
name2.attachEvent('onclick',function () { info.innerHTML += "绿色" + "<br>"; });
}else{
name1.addEventListener('click',function () { info.innerHTML += "红色" + "<br>"; },false);
name2.addEventListener('click',function () { info.innerHTML += "绿色" + "<br>"; },false);
}
</script>
</div>
</body>
</html>