您的位置：首页 > 其它

常见的几种事件类型

2016-10-01 14:40 417 查看
 代码：

1.鼠标事件

<!DOCTYPE html>
<html>
<head>
<title>鼠标事件</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

<script language="javascript">
function handle(oEvent){
if(window.event) oEvent=window.event;//处理兼容性，获得事件对象
var oDiv=document.getElementById("display");
oDiv.innerHTML+=oEvent.type+"<br/>";//输出事件名称
}

window.onload=function(){
var oImg=document.getElementsByTagName("img")[0];
oImg.onmousedown=handle;//将事件除了mousemove外都监听
oImg.onmouseup=handle;
oImg.onmouseover=handle;
oImg.onmouseout=handle;
oImg.onclick=handle;
oImg.ondblclick=handle;
}
</script>
</head>
<body>
<img src="纳新3.jpg" width="120px" height="120px" border="0" style="float:left;padding:0px 8px 0px 0px;"/>
<div id="display"></div>
</body>
</html>


2.键盘事件

<!DOCTYPE html>
<html>
<head>
<title>鼠标事件</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

<script language="javascript">
function handle(oEvent){
if(window.event)oEvent=window.event;//处理兼容性，获得事件对象
var oDiv=document.getElementById("display");
oDiv.innerHTML+=oEvent.type+"  ";//输出时间名称
}

window.onload=function(){
var oTextArea=document.getElementsByTagName("textarea")[0];
oTextArea.onkeydown=handle;//监听所有的键盘事件
oTextArea.onkeyup=handle;
oTextArea.onkeypress=handle;
}
</script>
</head>
<body>
<textarea rows="4" cols="50"></textarea>
<div id="display"></div>
</body>
</html>


3.HTML事件

<!DOCTYPE html>
<html>
<head>
<title>HTML事件</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

<script language="javascript">

</script>
</head>
<body onload="alert('hello')" onunload="alert('byebye')">
<form action="http://blog.csdn.net/zhangzeyuaaa/article/details/32696721" onsubmit="alert('提交啦')">
<input type="text" value="a"onfocus="alert('获取焦点')" onblur="alert('失去焦点')"/>
<input type="text" value="b" onchange="alert('内容改变啦')"/>
<select name="city"onchange="alert('选项 改变啦')">
<option>上海</option>
<option>北京</option>
</select><br/>
<input type="submit" value="提交按钮">
</form>
</body>
</html>


知识点总结：



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航