JavaScript OnClick事件以及事件绑定方法

最新推荐文章于 2023-05-06 21:56:44 发布

opo77_

最新推荐文章于 2023-05-06 21:56:44 发布

阅读量1.2w

点赞数 4

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

本文链接：https://blog.csdn.net/opo77_/article/details/105791736

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

事件之鼠标点击OnClick事件

事件	说明
onclick	鼠标点击事件
onmouseover	鼠标经过事件
onmouseout	鼠标移开事件
onchange	文本框内容改变事件
onselect	文本框内容被选中事件
onfocus	光标聚集
onblur	光标离开
onload	网页导入
onunload	关闭网页

那么要怎么做的呢？

1、将HTML页面的按钮元素编写好
2、在JS页面编写一个处理程序—函数，通常我们把它称为事件处理程序或者回调函数
3、在JS页面获取HTML的按钮元素
4、为按钮元素的点击事件onclick绑定一个处理函数

实践一下：
事件绑定方法一
1.HTML

<html>

<head>
    <meta charset="UTF-8">
    <title>为什么学习JavaScript</title>
</head>

<body>
    <input type="button" id="b1" value="点击我">
    <script src="JS1.js">
    </script>
</body>

</html>

2.js（第三行：元素.属性事件=函数名）

function clickbutton1() {
    alert("按钮被点击了");
} //弹出提示框
var button1 = document.getElementById("b1");
// 在js页面获取HTML的按钮函数
button1.onclick = clickbutton1;
// 为按钮元素的属性onclick事件设置一个处理函数

在这里插入图片描述
——————————————————————————————————————————————————————
切换图片
（点击图片后，触发鼠标点击事件，调用切换图片的函数）
1、将HTML页面的图片元素编写好
2、在JS页面编写一个处理程序—函数，通常我们把它称为事件处理程序或者回调函数，用来改变图片元素的属性src
3、在JS页面获取HTML的图像元素
4、为图像元素的属性onclick事件设置一个处理函数
实践一下：
1.HTML：

<html>

<head>
    <meta charset="UTF-8">
    <title>为什么学习JavaScript</title>
</head>

<body>
    <p>大自然</p>
    <img id="m1" src="https://static1.bcjiaoyu.com/1b26c63f17c32592d4f3b258db07c54e_a.jpg-1280x800">
    <script src="JS1.js"></script>
</body>

</html>

2.JS：

function showanswer() {
    var image = document.getElementById("m1");
    image.src = "https://static1.bcjiaoyu.com/d033cd0463116e4d403164f766e8fb87_d.jpg-1024x768";
}
var image1 = document.getElementById("m1");
image1.onclick = showanswer;

鼠标点击前
在这里插入图片描述
鼠标点击后：

事件绑定方法二：
（在HTML元素中直接绑定）

效果和之前的一样，不建议用。

事件绑定方法三：
（给标签的点击事件绑定匿名函数）

var button2 = document.getElementById("b2");
button2.onclick = function() {
    alert("按钮被点击了");
}

这样的好处是：往往事件处理函数只用一次，所以常都不会为他们定名字，而是赋予它的对应事件引用一个匿名函数。不需要提前定义，也就不占用内存。
事件绑定方法四：
（绑定事件监听函数----可以同时绑定多个处理函数）
1.HTML

<html>

<head>
    <meta charset="UTF-8">
    <title>为什么学习JavaScript</title>
</head>

<body>
    <input id="b3" type="button" value="点击我">
    <script src="JS1.js"></script>
</body>

</html>

2.JavaScript

function clickone() {
    alert("按钮被点击了");
}

function clicktwo() {
    alert("成功！");
}
var button3 = document.getElementById("b3");
button3.addEventListener("click", clickone, false);
button3.addEventListener("click", clicktwo, false);
// 元素名.addEventListener（事件名称，处理函数名，布尔类型值）;