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

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

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

效果图：

代码：

<!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.jb51.net/table/javascript_event

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

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

赞 (0)

相关推荐

  • 详解Javascript中DOM的范围

    详解Javascript中DOM的范围

    前言 为了让开发人员更方便地控制页面,DOM定义了"范围"(range)接口.通过范围可以选择文档中的一个区域,而不必考虑节点的界限(选择在后台完成,对用户是不可见的).在常规的DOM操作不能更有效地修改文挡时,使用范围往往可以达到目的.本文将详细介绍DOM范围,下面来一起看看吧. 创建范围 Document类型中定义了createRange()方法.在兼容DOM的浏览器中,这个方法属于document对象.使用hasFeature()或者直接检测该方法,都可以确定浏览器是否支持范围

  • 如何用js判断dom是否有存在某class的值

    例如: <html class="no-js"> <head> </head> <body> </body> </html> 判断html节点的class是否有no-js. 1.jquery的实现方式 $("html").hasClass('no-js'); jquery源码的实现方式: var rclass = /[\t\r\n\f]/g; jQuery.fn.extend({ hasClas

  • 原生JS和jQuery操作DOM对比总结

    一.创建元素节点 1.1 原生JS创建元素节点 document.createElement("p"); 1.2 jQuery创建元素节点 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 `document.createTextNode("Text Content"); 通常创建文本节点和创建元素节点配合使用,比如: var textEl = document.createTextNode("He

  • js 数据存储和DOM编程

    数据存储 ·在javascript中,数据存储的位置会对代码整体性能产生重大的影响. ·数据存储共有4种方式:字面量.变量.数组.对象成员. ·要理解变量的访问速度,就要理解作用域.由于局部变量处于作用域的起始位置,因此访问速度比访问跨域作用域变量(即除起始位置之外的外层作用域变量)更快.即变量处在作用域的位置越深,访问速度越慢.这也就说明,访问全局变量的速度是最慢的. 总的来说,字面量和局部变量的访问速度快于数组和对象成员的访问速度. 因此,常见的一些提高数据访问速度的方法有: ①避免使用wi

  • javascript DOM的详解及实例代码

    javascript DOM 总结 一直以为DOM(文档对象模型)是JS中最简单的一部分.不可否认,它确实很简单,因为DOM的思维模式有点固定,只需要简单地记住一些固定的方法,所以DOM可以说是所有js(这里指的是客户端的js)入门的起手点. 最近我在做一些有用到DOM的练习时,发现自己的DOM知识非常零散(一直以为掌握的很好),可能有很多朋友都觉得,DOM嘛,也就调用调用几个方法,或者我直接使用jQuery,根本不用考虑DOM的细节.是,这也没错,jQuery对DOM的封装可谓前无古人,但是正

  • 原生JS实现几个常用DOM操作API实例

    原生实现jQuery的sibling方法 <body> <span>我是span标签</span> <div>我是一个div</div> <h1 id="h1">我是标题</h1> <p>我是一个段落</p> <script type="text/javascript"> //获取元素的兄弟节点 function siblings(o){//参数o

  • js常用DOM方法详解

    js常用DOM方法详解

    介绍几个js DOM的常用方法 获取元素节点 getElementById    getElementsByTagName    getElementsByClassName 先写一个简单的网页做测试: /* test.html */ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <

  • javascript事件捕获机制【深入分析IE和DOM中的事件模型】

    本文实例分析了javascript事件捕获机制.分享给大家供大家参考,具体如下: 1.什么是事件冒泡? 在排序算法中,我们学过冒泡排序法,所谓冒泡就是让底层的东西浮出水面,对于事件冒泡也同样是如此, 下面我们来看一个例子来说明什么是事件冒泡. <div> <button>测试</button> </div> <script> $("div").bind("click",function(){alert(&q

  • JS访问DOM节点方法详解

    本文实例讲述了JS访问DOM节点方法.分享给大家供大家参考,具体如下: 查找并访问节点 你可通过若干种方法来查找您希望操作的元素: 通过使用 getElementById() 和 getElementsByTagName() 方法 通过使用一个元素节点的 parentNode.firstChild 以及 lastChild 属性 getElementById() 和 getElementsByTagName() getElementById() 和 getElementsByTagName()

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

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

    本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

  • JavaScript为事件句柄绑定监听函数实例详解

    本文实例讲述了JavaScript为事件句柄绑定监听函数的方法.分享给大家供大家参考,具体如下: 在JavaScript中为Dom元素绑定事件监听函数是一件非常常见的事情,但这里也有许多的Bug.各种浏览器对于事件绑定都提供了很多方法,但可靠的只有3中: 1.传统的绑定方法: elem.onclick = function( event ){ alert(event.type + 'this.innerHTML'); }; a.传统的绑定方法,非常简单稳定,函数体内的this指向的也是指向正在处

  • JavaScript实现为事件句柄绑定监听函数的方法分析

    本文实例讲述了JavaScript实现为事件句柄绑定监听函数的方法.分享给大家供大家参考,具体如下: 在JavaScript中为Dom元素绑定事件监听函数是一件非常常见的事情,但这里也有许多的Bug.各种浏览器对于事件绑定都提供了很多方法,但可靠的只有3中: 1.传统的绑定方法: elem.onclick = function( event ){ alert(event.type + 'this.innerHTML'); }; a.传统的绑定方法,非常简单稳定,函数体内的this指向的也是指向正

  • 谈谈我对JavaScript DOM事件的理解

    谈谈我对JavaScript DOM事件的理解

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键.事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小. 通过使用 JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应. DOM与事件是JavaScript最核

  • js监听鼠标点击和键盘点击事件并自动跳转页面

    js监听鼠标点击(onmousedown)和键盘点击(onkeydown)事件并自动跳转页面,在学习的朋友可以参考下 $(function(){ var i = 0; document.onmousedown=function(event){ if(i==1){ window.open('http://www.njxblog.com'); } //setTimeout(function (){window.open('http://www.jb51.net')},2000); //定时不太好使,

  • JavaScript 字符串常用操作小结(非常实用)

    字符串截取 1. substring() xString.substring(start,end) substring()是最常用到的字符串截取方法,它可以接收两个参数(参数不能为负值),分别是要截取的开始位置和结束位置,它将返回一个新的字符串,其内容是从start处到end-1处的所有字符.若结束参数(end)省略,则表示从start位置一直截取到最后. let str = 'www.jeffjade.com' console.log(str.substring(0,3)) // www co

  • 解析Spring事件发布与监听机制

    解析Spring事件发布与监听机制

    前言 Spring 提供了 ApplicationContext 事件机制,可以发布和监听事件,这个特性非常有用. Spring 内置了一些事件和监听器,例如在 Spring 容器启动前,Spring 容器启动后,应用启动失败后等事件发生后,监听在这些事件上的监听器会做出相应的响应处理. 当然,我们也可以自定义监听器,监听 Spring 原有的事件.或者自定义我们自己的事件和监听器,在必要的时间点发布事件,然后监听器监听到事件就做出响应处理. ApplicationContext 事件机制 Ap

  • 详解Spring事件发布与监听机制

    详解Spring事件发布与监听机制

    目录 一.ApplicationContext 事件机制 二.ApplicationListener 监听器 三.ApplicationEvent 事件 四.自定义事件和监听器 五.注解式监听器 一.ApplicationContext 事件机制 ApplicationContext 事件机制采用观察者设计模式来实现,通过 ApplicationEvent 事件类和 ApplicationListener 监听器接口,可以实现 ApplicationContext 事件发布与处理. 每当 App

  • Android开发之Button事件实现与监听方法总结

    本文实例总结了Android开发之Button事件实现与监听方法.分享给大家供大家参考,具体如下: 先来介绍Button事件实现的两种方法 main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="

  • SpringBoot事件发布和监听详解

    SpringBoot事件发布和监听详解

    目录 概述 事件监听的结构 Publisher,Event和Listener的关系 事件 发布者 监听者 总结 概述 ApplicationEvent以及Listener是Spring为我们提供的一个事件监听.订阅的实现,内部实现原理是观察者设计模式,设计初衷也是为了系统业务逻辑之间的解耦,提高可扩展性以及可维护性.事件发布者并不需要考虑谁去监听,监听具体的实现内容是什么,发布者的工作只是为了发布事件而已.事件监听的作用与消息队列有一点类似. 事件监听的结构 主要有三个部分组成: 发布者Publ

随机推荐