Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)

本文实例总结了Javascript DOM事件操作。分享给大家供大家参考，具体如下：

使用Javascript可以对HTML页面上的各种事件进行监听，如鼠标点击/释放，鼠标悬停/离开，等等。

效果图：

代码：

 
  body {background-color:#eeeeee}
  div.greenBtn
  {
   color:white;
   background-color:green;
   width:200px;
   height:20px;
   text-align:center;
   padding-top:20px;
   padding-bottom:20px;
  }
  button.greenBtn
  {
   color:white;
   background-color:green;
   width:200px;
   height:50px;
   text-align:center;
   border:0px;
  }
 

 
 （一）点击时改变HTML元素内容
 1.直接改变
 
请点击文字
 2.通过函数改变
 
请点击文字
 
 
 （二）onload 和 onunload 事件
 

  onload 和 onunload 事件会在用户进入或离开页面时被触发。

  onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

  onload 和 onunload 事件可用于处理 cookie
 
 （三）onchange事件
 
请输入英文字符：
 
当您离开输入字段时，会触发将输入文本转换为大写的函数。
 
 （四）onmouseover 和 onmouseout 事件
 
  把鼠标放在上面
 
 
 （五）onmousedown、onmouseup 以及 onclick 事件
 鼠标抬起
 
 （六）onfocus 事件
 
当输入框获取焦点时，改变其背景色
  
 
 

PS:关于javascript常用事件及相关说明还可参考本站在线工具：

javascript事件与功能说明大全：
http://tools.jb51.net/table/javascript_event

更多关于Javascript相关内容感兴趣的读者可查看本站专题：《Javascript事件相关操作与技巧大全》、《Javascript操作DOM技巧总结》、《Javascript错误与调试技巧总结》、《Javascript数据结构与算法技巧总结》、《Javascript遍历算法与技巧总结》及《Javascript数学运算用法总结》

希望本文所述对大家Javascript程序设计有所帮助。