//

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

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

首先新建一个html文件

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

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

function OnMouseOver(id)
{
    id.innerHTML = "鼠标划过";
}
function OnMouseOut(id) {
    //鼠标离开回到初始状态
    id.innerHTML = "这是初始文字";
}
function OnMouseDown(id)
{
    id.innerHTML = "鼠标已按下";
}
function OnMouseUp(id)
{
    id.innerHTML = "鼠标已松开";
}

function OnFocus(x)
{
    x.style.background = "yellow";
}
function OnBlur(x) {
    x.style.background = "white";
}

更多用法参考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 支付宝－五福简单框架实现－线性滚动（UICollectionView）

    猴年支付宝可算是给大家一个很好的惊喜,刺激.大家都在为敬业福而四处奔波.可是到最后也没有几个得到敬业福德,就像我.不知道大家有没有观察,五福界面的滚动是一个很好的设计.在这里,给大家带来简单的滚动实现 ...

  2. Swift Standard Library: Documented and undocumented built-in functions in the Swift standard library – the complete list with all 74 functions

    Swift has 74 built-in functions but only seven of them are documented in the Swift book (“The Swift ...

  3. Android 之 2048 的游戏逻辑分析

    继续学习了极客学院的实战路径课程,讲到了2048游戏的编写过程,我在这里作个总结分享给大家(结果会附源代码和我改写后的代码): 这里主要包括两个方面:1.2048界面的绘制   2.2048算法逻辑的 ...

  4. java注解框架

    我们经常会在java代码里面看到:“@Override”,“@Target”等等样子的东西,这些是什么? 在java里面它们是“注解”. 下面是百度百科的解释:java.lang.annotation ...

  5. eclipse 导入新项目后报错:Cannot change version of project facet Dynamic web module to 2.5

    错误原因: 我们用Eclipse创建Maven结构的web项目的时候选择了Artifact Id为maven-artchetype-webapp,由于这个catalog比较老,用的servlet还是2 ...

  6. rails开发demo（一）搭建环境

    环境 ubuntu 14.04 为了安装rails4.2 和 ruby 2.2.2,这是目前稳定的最新版本,需要先安装rvm sudo apt-get update sudo apt-get inst ...

  7. linux下使用正确的用户名密码，本地无法连接mysql

    问题现象: Linux系统为CentOS 7.0 64位,通过IP远程mysql时,可以正常访问,确定账号密码没有问题.但是本地连接mysql时,提示ERROR 1045 (28000): Acces ...

  8. Invisible or disabled control cannot be activated

    在WPF 应用程序下出现:Invisible or disabled control cannot be activated(不见的或禁用的控件不能被激活)错误. System.ArgumentExc ...

  9. MySQL 存储过程实例 与 ibatis/mybatis/hibernate/jdbc 如何调用存储过程

    虽然MySQL的存储过程,一般情况下,是不会使用到的,但是在一些特殊场景中,还是有需求的.最近遇到一个sql server向mysql迁移的项目,有一些sql server的存储过程需要向mysql迁 ...

  10. 为 Virtual Box 中的 CentOS 6.6 配置本地DVD光盘做yum软件源

    因为virtual box 中的centos配置host-only共享win7上网,配置失败,所以只能使用Centos的 DVD 光盘来配置yum软件源.不然就没得完了. 1. 首先要在virtual ...