3_Event

最新推荐文章于 2023-06-21 16:48:46 发布

月上柳梢头&

最新推荐文章于 2023-06-21 16:48:46 发布

阅读量93

点赞数

分类专栏： TrySky 文章标签： js

本文链接：https://blog.csdn.net/weixin_45726854/article/details/112770543

版权

TrySky 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JS Tutorial For TrySky IT Center (Operation and Maintenance Center)

Written by Zhang Zhihong in 2021

Event

Event mean somethings happen in html, such as click, rolling, The HTML page is loaded, Input fields in HTML change, etc…

Usually, there are things you can do when the event happens.You have saw the event before.Well…when I talked about function.

Here, onclick is a event in fact.

<button onclick="buttonFunction('Zhang','poet')">
        I am a button.
</button>

So, let me show you how to use event now.

<!DOCTYPE html>
<html lang="en">
<head>...
</head>
<body>
    <button onclick="getElementById('demo').innerHTML=Date() ">现在的时间是：</button>
    <p id="demo"></p>
</body>
</html>

In the code above, I define a event “onclick”, when a click on the button, it will find the id “demo”, and change the contents of the label where the ID is located.

The results：
在这里插入图片描述

Obviously, it is a good practice to write functions in JS files.

<!DOCTYPE html>
<html lang="en">
<head>...
</head>
<body>
    <button onclick="myDate()">现在的时间是：</button>
    <p id="demo"></p>
</body>
<script src="poem4.js"></script>
</html>

Here, I declare a function “myDate”, and use it in HTML.

function myDate() {
    document.getElementById("demo").innerHTML = Date()
}

The result is the same as above.

In these example, we can change the content by ID. We also can use “this” to change the content of itself.

Here mean when I click on the button, the text inside the button will be “I am not a button”

<!DOCTYPE html>
<html lang="en">
<head>...
</head>
<body>
    <button onclick="this.innerHTML='I am not a button'">
    I am a button
    </button>
</body>
</html>

Result

在这里插入图片描述

Here is a list of some common events:

在这里插入图片描述

2021.1.18.by zhang

月上柳梢头&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3_Event

JS Tutorial For TrySky IT Center (Operation and Maintenance Center)Written by Zhang Zhihong in 2021EventEvent mean somethings happen in html, such as click, rolling, The HTML page is loaded, Input fields in HTML change, etc…Usually, there are things y
复制链接

扫一扫