常见的几种事件类型

最新推荐文章于 2022-10-20 18:45:37 发布

潇潇雨歇_

最新推荐文章于 2022-10-20 18:45:37 发布

阅读量9k

点赞数 2

文章标签： javascript 对象 html

本文链接：https://blog.csdn.net/linhaiyun_ytdx/article/details/52717351

版权

JavaScript 学习笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

代码：

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.οnlοad=function(){
    var oImg=document.getElementsByTagName("img")[0];
	oImg.οnmοusedοwn=handle;//将事件除了mousemove外都监听
    oImg.οnmοuseup=handle;
	oImg.οnmοuseοver=handle;
	oImg.οnmοuseοut=handle;
	oImg.οnclick=handle;
	oImg.οndblclick=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.οnlοad=function(){
    var oTextArea=document.getElementsByTagName("textarea")[0];
	oTextArea.οnkeydοwn=handle;//监听所有的键盘事件
	oTextArea.οnkeyup=handle;
	oTextArea.οnkeypress=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 οnlοad="alert('hello')" οnunlοad="alert('byebye')">
   <form action="http://blog.csdn.net/zhangzeyuaaa/article/details/32696721" οnsubmit="alert('提交啦')">
   <input type="text" value="a"οnfοcus="alert('获取焦点')" οnblur="alert('失去焦点')"/>
   <input type="text" value="b" οnchange="alert('内容改变啦')"/>
   <select name="city"οnchange="alert('选项 改变啦')">
    <option>上海</option>
    <option>北京</option>
   </select><br/>
   <input type="submit" value="提交按钮">
   </form>
 </body>
</html>

知识点总结：