<html>
<head>
<title>DOM对象</title>
<style type="text/css">
table#tab {
border:1px solid green;
border-collapse:collapse;
400px;
}
#tab td {
text-align:center;
border:1px solid green;
padding:5px;
}
#menu {
80px;
font-size:14px;
border:1px solid green;
background-color:#ccffff;
text-align:center;
display:none;
position:absolute;
margin:0px;
}
</style>
</head>
<body><!--onmousemove="alert('您的鼠标刚才经过了图片！')" -->
<div id="menu" >
<p><a href="">新建</a></p>
<p><a href="">打开</a></p>
<p><a href="">保存</a></p>
<p><a href="">退出</a></p>
</div>
<div >事件</div>
1.鼠标事件<br/>
<div id="opt">
<img src="p11.jpg" onmouseover="this.src='p2.jpg'" onmouseout="this.src='p1.jpg'" /><br/><br/>
<table id="tab">
<tr onmouseover="this.bgColor='white'" onmouseout="this.bgColor='#bfa'">
<td>aaaa</td>
<td>bbbb</td>
<td>cccc</td>
<td>dddd</td>
</tr>
<tr onmouseover="this.bgColor='white'" onmouseout="this.bgColor='#bfa'">
<td>aaaa</td>
<td>bbbb</td>
<td>cccc</td>
<td>dddd</td>
</tr>
<tr onmouseover="this.bgColor='white'" onmouseout="this.bgColor='#bfa'">
<td>aaaa</td>
<td>bbbb</td>
<td>cccc</td>
<td>dddd</td>
</tr>
<tr onmouseover="this.bgColor='white'" onmouseout="this.bgColor='#bfa'">
<td>aaaa</td>
<td>bbbb</td>
<td>cccc</td>
<td>dddd</td>
</tr>
</table>
<br/>
<input type="button" value="鼠标按下" onmousedown="showMsg(event)"/><!--事件对象传入-->
<input type="button" value="双击" ondblclick="this.parentNode.removeChild(this)"/>
<input type="button" value="单击" onclick="alert('Hello')"/>
<div style="80px;height:30px; background-color:yellow;" onmouseover="showMenu(event)" onmouseout="$('menu').style.display='none'"
<a href="http://www.baidu.com">百度</a>
</div>
</div>
2.键盘事件<br/>
<input type="text" id="keyvalue" onkeydown="$('showKey').innerHTML=event.keyCode"/>
keyCode : <span id="showKey" ></span><!--按钮编码--></br>
3.html事件<br/>
<input type="text" value="张三" onfocus="alert('文本框获取焦点')"/>
<input type="text" value="李四" onclick="alert('文本框单击')"/>
<input type="text" value="李四" onchange="alert('文本修改')"/>
<img src="p11.jpg" onerror="this.src='p22.jpg'" /><br/><br/>
<input type="text" value="李四" onselect="alert('文本被选中')"/></br>
4.事件源<br/>
<input type="button" value="看看事件对象" onclick="showEvent(event)"/>
<!--javascript 代码 -->
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function showMsg() {
//事件对象
//var oEvent = window.event;//IE 事件对象
var oEvent = arguments[0];//firefox 事件对象
//alert(oEvent.button);
if(oEvent.button == "0") {
alert("这是左键单击");
} else if(oEvent.button == "2"){
alert("自定义的右键");
}
}
function showMenu() {
var oEvent = arguments[0];
$("menu").style.display="block";
//alert( oEvent.clientX);
//alert( oEvent.clientY);
$("menu").style.left = oEvent.clientX ;//事件对象坐标
$("menu").style.top = oEvent.clientY ;
}
function showEvent(oEvent) {
var msg = "";
for( var name in oEvent) {
msg += name + " : " + oEvent[name] + "
";
}
alert(msg);
//事件源 srcElement target
// alert(oEvent.srcElement.tagName + " : " + oEvent.srcElement.type); IE
alert(oEvent.target.tagName + " : " + oEvent.target.type); //firefox
alert(oEvent.target.value);
}
</script>
</body>
</html>
rs:
