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 相关文章推荐
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
vue文件运行的方法教学
Feb 12 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
php实现mysql同步的实现方法
2009/10/21 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
简单谈谈json跨域
2016/03/13 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
浅谈scrapy 的基本命令介绍
2017/06/13 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
Python3 log10()函数简单用法
2019/02/19 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
什么是.net
2015/08/03 面试题
护士岗位职责
2014/02/16 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
2015年教研组工作总结
2015/05/04 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
新手初学Java List 接口
2021/07/07 Java/Android