JS结合DOM事件的例子
//
这是初始文字
右边是一个测试文本框：
鼠标划过、点击、松开上面的文字都会有不同的效果，鼠标光标移到、离开文本框也会有不同的效果。
首先新建一个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事件的例子的更多相关文章
- js中DOM事件探究
事件 纲要 理解事件流 使用事件处理程序 不同的事件类型 javascript和html的交互是通过事件实现的.事件就是文档或浏览器窗口发生的一些特定交互瞬间.可以使用侦听器(事件处理程序)预定事件, ...
- 常用的JS HTML DOM 事件
HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮). 提示: 在 ...
- JS HTML DOM 事件对象(onclick、onmouseenter)
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮). HTML DOM 事件 DOM: ...
- 通过原生js对DOM事件的绑定的几种方式总汇
在网页开发中经常会有交互操作,比如点击一个dom元素,需要让js对该操作做出相应的响应,这就需要对Dom元素进行事件绑定来进行处理,js通常有三种常用的方法进行事件绑定:在DOM元素中直接绑定:在Ja ...
- javascript中0级DOM和2级DOM事件模型浅析 分类： C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读 评论(0) 收藏
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
- DOM 以及JS中的事件
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
- 从零开始的JS生活（二）——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- JS中的事件以及DOM 操作
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
- JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前 言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
随机推荐
- 软件工程（c编码实践） 学习笔记（一）
vim 有三种模式:一般模式,编辑模式,命令模式. -------------------------------------------------------------------------- ...
- IT技术很好的视频网址
1.华为工程师 带你实战C++ 2.vimoe,国外的,需要FQ哦.https://vimeo.com/85831438
- 小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
最终的效果: <1>第一个场景: 1.本地化 界面简体中文化 Supporting Files - info.plist Localization native development r ...
- gerrit添加新用户
默认gerrit的web服务端口为8080,通过apache的反向代理就可以使用标准的80(HTTP)来访问gerrit的web界面,在apache的配置文件httpd.conf添加如下反向代理和HT ...
- Spring-2-H Array Diversity（SPOJ AMR11H）解题报告及测试数据
Array Diversity Time Limit:404MS Memory Limit:0KB 64bit IO Format:%lld & %llu Descript ...
- XMLHttpRequest的跨域请求
缘起 由于浏览器的同源策略,非同源不可请求. 但是,在实践当中,经常会出现需要跨域请求资源的情况,比较典型的例如某个子域名向负责进行用户验证的子域名请求用户信息等应用. 以前要实现跨域访问,可以通过J ...
- 使用dbms_logmnr查看日志文件
大多为了寻找被意外修改的数据或者那条sql修改了哪些数据 如果是在线重做日志的话需要该日志是inactive模式下的 查询v$log和v$logfile获取相关信息 执行exec dbms_logmn ...
- Python Memcached Script
介绍 利用 python 书写了 memcached 的启动等一类操作 尽量的实现脚本的复用性,以及脚本的可扩展性,已达到一劳永逸的效果, 并且添加了 memcached 监控搭建 memcached ...
- zookeeper适用场景：分布式锁实现
问题导读:1.zookeeper如何实现分布式锁?2.什么是羊群效应?3.zookeeper如何释放锁? 在zookeeper应用场景有关于分布式集群配置文件同步问题的描述,设想一下如果有100台机器 ...
- Virtual Box上安装CentOS7
问题1:安装完没有桌面系统(Gnome或KDE)解答:安装的时候,软件选择为最小安装",更改该选择 问题2:开机提示Initial setup of CentOS Linux 7 (core ...