Javascript处理最基本的Button点击事件

最新推荐文章于 2024-06-20 23:18:02 发布

Gorzing

最新推荐文章于 2024-06-20 23:18:02 发布

阅读量4k

点赞数 3

分类专栏：笔记文章标签： javascript js

本文链接：https://blog.csdn.net/qq_46358639/article/details/104402358

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天学到的新知识：如何用JavaScript处理一个最基本的Button点击事件

总结：

用document.getElementById()得以通过元素ID访问元素
使用.onclick属性处理点击事件

过程：
1.先建立一个最基本的HTML页面：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Button</title>
    <script></script>
</head>
<body>
    <form>
        <input type="button" id="addButton" value="ClickMe!">
        <!--设置一个按钮，元素id = "addButton"-->
    </form>
</body>
</html>

2.在script元素中添加如下代码：

window.onload = init;
//设置js代码在DOM模型完全加载之后才开始运行；否则会无法访问元素.
function handleButtonClick() {
    alert("按钮被点击了！");
}
//创建按钮点击函数；函数体中为按钮被点击时发生的事件.
function init() {
    var button = document.getElementById("addButton");
    button.onclick = handleButtonClick;
}
/*使用getElementById访问元素得到元素句柄，使用.onclick属性
	使handleButtonClick函数在按钮被点击时运行*/

实现效果：
在这里插入图片描述
当我们点击时：
大功告成！
萌新第一次发文章，希望大佬们多多指教。

Gorzing

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
Javascript处理最基本的Button点击事件

今天学到的新知识：如何用JavaScript处理一个最基本的Button点击事件总结：用document.getElementById()得以通过元素ID访问元素使用.onclick属性处理点击事件过程：1.先建立一个最基本的HTML页面：<html lang="en"><head> <meta charset="UTF-8">...
复制链接

扫一扫