JS学习（12）----events

最新推荐文章于 2023-12-25 09:18:03 发布

晨识草

最新推荐文章于 2023-12-25 09:18:03 发布

阅读量217

点赞数

分类专栏： web 文章标签： javascript events

本文链接：https://blog.csdn.net/lichen_yun/article/details/75969255

版权

web 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

1.onclick

onclick是鼠标点击，在前面的学习中已经多次用到，大多数情况下是用在图片或者是button。
（1）栗子1：

<p id="demo">This is a paragraph.</p>
<button id="test">Click Me</button>

document.getElementById("test").onclick = myFunction;
function myFunction() {
    document.getElementById("demo").innerHTML = "content changed.";
}

（2）栗子2：

    <p id="demo" onclick="myFunction(this)">This is a paragraph.</p>

function myFunction(id) {
    id.innerHTML = "content changed.";
    id.style.fontSize = "40px";
    alert(id);
    //  [object HTMLParagraphElement]
}
// 如果是在js中用document.getElementById("demo").onclick = myFunction(this);
// 则一直报错：id是undefined

显示的结果为：
这里写图片描述
（3）栗子3：

<body>
    <p>Click the button to display date.</p>
    <button id="btn">Click Me</button>
    <p id="demo"></p>
    <script src="script.js"></script>
</body>

document.getElementById("btn").onclick = showDate;
function showDate() {
    document.getElementById("demo").innerHTML = Date();
}

显示的结果为：
这里写图片描述

2.onchange

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
    Enter some Word:<input type="text" id="change">
    <p>
        When you "enter" or click on some blank area after you enter some word, then it change to uppercase.
    </p>
    <script src="script.js"></script>
</body>
</html>

document.getElementById("change").onchange = showUpper;
function showUpper() {
    var val = document.getElementById("change");
    val.value = val.value.toUpperCase();
}

在输入框中输入内容后，按enter或者是在空白处点击鼠标，输入框的内容会变为大写格式。
这里写图片描述

3.onmouseover&&onmouseout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container">
        <p id="test">mouse over me</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

#container {
    width:400px;
    height:50px;
    background-color:yellow;
    font-size:30px;
    text-align:center;
}

/* 
* @Author: Lin
* @Date:   2017-07-24 10:00:45
* @Last Modified by:   Lin
* @Last Modified time: 2017-07-24 10:08:30
*/
var x = document.getElementById("container");
x.onmouseover = change;
x.onmouseout = recover;
function change() {
    x.style.backgroundColor = "lightblue";
    document.getElementById("test").innerHTML = "Thank you!";
}
function recover() {
    x.style.backgroundColor = "yellow";
    document.getElementById("test").innerHTML = "mouse over me";
}

显示的结果为：
这里写图片描述

4.onmousedown&&onmouseup

onmousedown是表示鼠标点击某个地方并且不松开，onmouseup表示鼠标点击某个地方后松开，注意与onmouseover和onmouseout区分开。
index.html和style.css与3相同，在js中稍加改动即可。

var x = document.getElementById("container");
// x.onmouseover = change;
// x.onmouseout = recover;
x.onmousedown = change;
x.onmouseup = recover;
function change() {
    x.style.backgroundColor = "lightblue";
    document.getElementById("test").innerHTML = "Thank you!";
}
function recover() {
    x.style.backgroundColor = "yellow";
    document.getElementById("test").innerHTML = "mouse over me";
}

5.onfocus

当input区域点击要填入内容时，可以改变input的背景颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
    Text: <input type="text" id="txt"></body>
    <script src="script.js"></script>
</body>
</html>

document.getElementById("txt").onfocus = changeColor;
function changeColor() {
    document.getElementById("txt").style.backgroundColor = "lightBlue";
}

这里写图片描述

晨识草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习（12）----events

1.onclickonclick是鼠标点击，在前面的学习中已经多次用到，大多数情况下是用在图片或者是button。（1）栗子1：<p id="demo">This is a paragraph.</p><button id="test">Click Me</button>document.getElementById("test").onclick = myFunction;function
复制链接

扫一扫

专栏目录