事件之鼠标点击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事件设置一个处理函数

javascript 高频点击 js触发点击事件onclick_javascript 高频点击


——————————————————————————————————————————————————————

切换图片

（点击图片后，触发鼠标点击事件，调用切换图片的函数）

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;

鼠标点击前

javascript 高频点击 js触发点击事件onclick_事件绑定_02


鼠标点击后：

javascript 高频点击 js触发点击事件onclick_javascript 高频点击_03


事件绑定方法二：

（在HTML元素中直接绑定）

javascript 高频点击 js触发点击事件onclick_html_04


javascript 高频点击 js触发点击事件onclick_HTML_05


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

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

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（事件名称，处理函数名，布尔类型值）;

结果就是连续弹出两个提示框。