单击事件(click),我们在之前已经接触过非常多次了,例如点击某个按钮弹出一个提示框。这里要特别注意一点,单击事件不只是按钮才有,我们可以为任何元素添加单击事件。
举例:为 div 元素添加单击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div
{
display: inline-block;
width: 80px;
height: 24px;
line-height: 24px;
font-family:"微软雅黑";
font-size:15px;
text-align: center;
border-radius: 3px;
background-color: deepskyblue;
color: white;
cursor: pointer;
}
div:hover {background-color: dodgerblue;}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function() {
$("div").click(function(){
alert("开玩笑吗?")
})
})
</script>
</head>
<body>
<div>调试代码</div>
</body>
</html>
预览效果如图 1 所示。
这里我们使用 div 元素模拟出一个按钮,并且为它添加了单击事件。我们点击【调试代码】按钮之后,就会弹出提示框。之所以举这个例子,也是给小伙伴们说明一点:我们可以为任何元素添加单击事件。
在实际开发中,为了获得更好的用户体验,我们一般不会使用表单按钮,而更倾向于使用其他元素结合 CSS 模拟出来的按钮,因为表单按钮的外观实在不敢恭维。
举例:自动触发点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("#btn").click(function () {
alert("欢迎来到城东书院!");
}).click();
})
</script>
</head>
<body>
<input id="btn" type="button" value="按钮">
</body>
</html>
预览效果如图 2 所示。
在这个例子中,我们使用 click() 方法自动触发鼠标点击事件。在实际开发中,自动触发事件这个小技巧非常有用,像我们常见的图片轮播效果中就用到了。