码迷,mamicode.com
首页 > Web开发 > 详细

JS结合DOM事件的使用

时间:2015-11-28 22:53:51      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:

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

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

首先新建一个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事件的使用

标签:

原文地址:http://www.cnblogs.com/hellovenus/p/5003496.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!