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


Posted in Javascript onJanuary 20, 2017

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

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

效果图:

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

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>Javascript 事件</title>
<head>
 <style type="text/css">
  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;
  }
 </style>
</head>
<body onload="checkCookies()"> <!--页面加载时检测浏览器cookies是否启用-->
 <h3>(一)点击时改变HTML元素内容</h3>
 <h4>1.直接改变</h4>
 <p onclick="this.innerHTML = '谢谢'">请点击文字</p>
 <h4>2.通过函数改变</h4>
 <p onclick="changeText(this)">请点击文字</p>
 <script>
  function changeText(ele){
   ele.innerHTML = "谢谢";
  }
 </script>
 <script>
 function checkCookies(){
  if (navigator.cookieEnabled){
   // alert("已启用 cookie")
  }else{
   // alert("未启用 cookie")
  }
 }
 </script>
 <h3>(二)onload 和 onunload 事件</h3>
 <p>
  onload 和 onunload 事件会在用户进入或离开页面时被触发。<br>
  onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。<br>
  onload 和 onunload 事件可用于处理 cookie
 </p>
 <h3>(三)onchange事件</h3>
 <p>请输入英文字符:<input type="text" onchange="toUpper(this)">
 <p>当您离开输入字段时,会触发将输入文本转换为大写的函数。</p>
 <script>
  function toUpper(ele){
   ele.value = ele.value.toUpperCase();
  }
 </script>
 <h3>(四)onmouseover 和 onmouseout 事件</h3>
 <div class="greenBtn" onmouseover="mOver(this)" onmouseout="mOut(this)">
  把鼠标放在上面
 </div>
 <script>
  function mOver(ele){
   ele.innerHTML = "谢谢"
  }
  function mOut(ele){
   ele.innerHTML = "把鼠标放在上面"
  }
 </script>
 <h3>(五)onmousedown、onmouseup 以及 onclick 事件</h3>
 <button class = "greenBtn" onmousedown="mDown(this)" onmouseup="mUp(this)">鼠标抬起</button>
 <script>
  function mDown(ele){
   ele.innerHTML = "鼠标已按下"
   ele.style.backgroundColor = "blue"
  }
  function mUp(ele){
   ele.innerHTML = "鼠标抬起"
   ele.style.backgroundColor = "green"
  }
 </script>
 <h3>(六)onfocus 事件</h3>
 <p>当输入框获取焦点时,改变其背景色
  <input type="text"
  onfocus = "changeBgColor(this,true)"
  onblur="changeBgColor(this,false)">
 </p>
 <script>
  function changeBgColor(ele,hasFocus){
   if(hasFocus){
    ele.style.backgroundColor = "yellow"
   }else{
    ele.style.backgroundColor = "gray"
   }
  }
 </script>
</body>

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

javascript事件与功能说明大全:
http://tools.3water.com/table/javascript_event

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

Javascript 相关文章推荐
javascript操作JSON的要领总结
Dec 09 Javascript
javascript实现动态标签云
Oct 16 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
JS中from 表单序列化提交的代码
Jan 20 #Javascript
jquery表单验证插件validation使用方法详解
Jan 20 #Javascript
jquery表单插件form使用方法详解
Jan 20 #Javascript
AngularJs上传前预览图片的实例代码
Jan 20 #Javascript
详解JavaScript中this的指向问题
Jan 20 #Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 #Javascript
浅谈JavaScript异步编程
Jan 20 #Javascript
You might like
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
JS 作用域与作用域链详解
2015/04/07 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
vue生命周期实例小结
2018/08/15 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
六行python代码的爱心曲线详解
2019/05/17 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
电子商务专业学生职业生涯规划
2014/03/07 职场文书
户籍证明格式
2014/09/15 职场文书
农村文化建设标语
2014/10/07 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
个人总结与自我评价
2015/02/14 职场文书
逃课检讨书范文
2015/05/06 职场文书
毕业欢送会致辞
2015/07/29 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python