//

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

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

首先新建一个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. 安装VVDocumenter-Xcode-master (Xcode 7.1)的过程

    下载地址: http://pan.baidu.com/s/1boxvewB 1.首先下载解压压缩包打开VVDocumenter工程,编译一遍(快捷键com+B) 2.在finder里面的应用程序,找到 ...

  2. XCode中#pragma的使用

    为了能够快速定位到代码的目标位置,可以使用#pragma:  

  3. 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 ...

  4. XML学习总结(一)——XML介绍

    一.XML概念 Extensible Markup Language,翻译过来为可扩展标记语言.Xml技术是w3c组织发布的,目前推荐遵循的是W3C组织于2000发布的XML1.0规范. 二.学习XM ...

  5. 【MySQL】MySQL忘记root密码解决方案

    转眼间从实习到现在已经快两年了.两年的工作做遇到过很多很多的拦路虎,大部分也通过搜索引擎找到了解决的方案.奈何大脑不是硬盘,偶尔有的问题第二次遇到还是有点抓蒙...所以决定把这些东西记录在博客上.这样 ...

  6. C#程序调用cmd执行命令

    对于C#通过程序来调用cmd命令的操作,网上有很多类似的文章,但很多都不行,竟是漫天的拷贝.我自己测试整理了一下. 代码: string str = Console.ReadLine(); Syste ...

  7. 本人常用的Linux bash快捷键(持续更新)

    按使用频率由高到低排列: Ctrl + a :移到命令行首Ctrl + e :移到命令行尾 Ctrl + u :从光标处删除至命令行首Ctrl + k :从光标处删除至命令行尾 Ctrl + d :删 ...

  8. window10系统安装oracle11g时遇到INS-13001环境不满足最低要求

    机器安装了window10系统,之前有次安装oracle11g是成功了.但是机器后来固态硬盘坏了,又坏了个后,还是win10系统安装oracle11g时,出现INS-13001环境不满足最低要求,郁闷 ...

  9. hibernate基本类型映射

    model包: Book.java: package model; import java.sql.Blob;import java.util.Date; public class Book {   ...

  10. Spring学习笔记之 Spring IOC容器(二) 之注入参数值，自动组件扫描方式，控制Bean实例化方式，使用注解方式

     本节主要内容:    1. 给MessageBean注入参数值    2. 测试Spring自动组件扫描方式    3. 如何控制ExampleBean实例化方式    4. 使用注解方式重构Jdb ...