//

这是初始文字
右边是一个测试文本框：

鼠标划过、点击、松开上面的文字都会有不同的效果，鼠标光标移到、离开文本框也会有不同的效果。

首先新建一个html文件

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script type="text/javascript" src="me.js"></script>
  7. </head>
  8. <body>
  9.     <h1 id="mytext"
  10.         onmouseover="OnMouseOver(this)"
  11.         onmouseout="OnMouseOut(this)"
  12.         onmousedown="OnMouseDown(this)"
  13.         onmouseup="OnMouseUp(this)"
  14.         style="width:300px;border:1px solid red;">这是初始文字</h1>
  15.     <br/>
  16.     右边是一个测试文本框：<input type="text" onfocus="OnFocus(this)" onblur="OnBlur(this)">
  17. </body>
  18. </html>

其中引入了一个js文件，所以接下来新建一个js文件，名为me.js

  1. function OnMouseOver(id)
  2. {
  3.     id.innerHTML = "鼠标划过";
  4. }
  5. function OnMouseOut(id) {
  6.     //鼠标离开回到初始状态
  7.     id.innerHTML = "这是初始文字";
  8. }
  9. function OnMouseDown(id)
  10. {
  11.     id.innerHTML = "鼠标已按下";
  12. }
  13. function OnMouseUp(id)
  14. {
  15.     id.innerHTML = "鼠标已松开";
  16. }
  17.  
  18. function OnFocus(x)
  19. {
  20.     x.style.background = "yellow";
  21. }
  22. function OnBlur(x) {
  23.     x.style.background = "white";
  24. }

更多用法参考http://www.w3school.com.cn/jsref/index.asp

JS结合DOM事件的例子的更多相关文章

  1. js中DOM事件探究

    事件 纲要 理解事件流 使用事件处理程序 不同的事件类型 javascript和html的交互是通过事件实现的.事件就是文档或浏览器窗口发生的一些特定交互瞬间.可以使用侦听器(事件处理程序)预定事件, ...

  2. 常用的JS HTML DOM 事件

    HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮). 提示: 在 ...

  3. JS HTML DOM 事件对象(onclick、onmouseenter)

    HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮). HTML DOM 事件 DOM:  ...

  4. 通过原生js对DOM事件的绑定的几种方式总汇

    在网页开发中经常会有交互操作,比如点击一个dom元素,需要让js对该操作做出相应的响应,这就需要对Dom元素进行事件绑定来进行处理,js通常有三种常用的方法进行事件绑定:在DOM元素中直接绑定:在Ja ...

  5. javascript中0级DOM和2级DOM事件模型浅析 分类： C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读 评论(0) 收藏

    Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...

  6. DOM 以及JS中的事件

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  7. 从零开始的JS生活（二）——BOM、DOM与JS中的事件

    上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...

  8. JS中的事件以及DOM 操作

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  9. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

随机推荐

  1. iOS 架构模式-MVVM

    iOS 架构模式-MVVM MVVM Model-View-ViewModelMVVM 其实是MVC的进化版,他将业务逻辑从VC中解耦到ViewModel,实现VC的瘦身. 做一个简单的登录判断: 创 ...

  2. GCD中的dispatch_set_target_queue的用法及作用

    (一),使用dispatch_set_target_queue更改Dispatch Queue的执行优先级 dispatch_queue_create函数生成的DisPatch Queue不管是Ser ...

  3. URL最大长度限制

    在开发调试支付宝接口时,突然发现支付宝接口的URL很长,远远大于之前自己印象中的255个字符.赶紧搜索查证了一番,理解如下: URL不能大于255bytes的说法确实存在,在RFC2616中提到: T ...

  4. 如何解决"应用程序无法启动,因为应用程序的并行配置不正确"问题

    应用程序事件日志中: "C:\windows\system32\test.exe"的激活上下文生成失败.找不到从属程序集 Microsoft.VC80.MFC,processorA ...

  5. Java 读取大文件方法

    需求:实际开发中读取文本文件的需求还是很多,如读取两个系统之间FTP发送文件,读取后保存到数据库中或日志文件的数据库中保存等. 为了测试首先利用数据库SQL生成大数据文件. 规则是 编号|姓名|手机号 ...

  6. sql server中游标

    参考:http://blog.csdn.net/luminji/article/details/5130004 利用SQL Server游标修改数据库中的数据 SQL Server中的UPDATE语句 ...

  7. Azure 上为Liunx VM 挂载File类型的存储。

    1. Create a storage account in Azure, copy the storage account endpoint URL (with postfix of "f ...

  8. DirectX API 编程起步 #02 窗口的诞生

    在这篇文章里我们先用 windows API 制作一个窗口出来,以后再用 DirectX API 渲染的东西就会显示在这里,控制台那黑白的画面肯定是没法用的. 每次的代码都会更新到Github 首先贴 ...

  9. 【Ext.Net学习笔记】01：在ASP.NET WebForm中使用Ext.Net

    Ext.NET是基于跨浏览器的ExtJS库和.NET Framework的一套支持ASP.NET AJAX的开源Web控件,包含有丰富的Ajax运用,其前身是Coolite. 下载地址:http:// ...

  10. 有限状态机HDL模板

    逻辑设计, 顾名思义, 只要理清了逻辑和时序, 剩下的设计只是做填空题而已. 下面给出了有限状态机的标准设计,分别为 VHDL 和 Verilog 代码 1  有限状态机 2  VHDL模板之一 li ...