极客教程如何在jQuery中为元素附加一个以上的事件处理程序
在事件处理程序的帮助下，我们可以在HTML元素上设置jQuery中可用的特定事件。在jQuery中，有许多可用的事件，如click(), mouseover(), dblclick()等。在这篇文章中，我们将学习如何在元素上附加一个以上的事件处理器。在jQuery中，我们可以轻松地在任何元素上添加一个或多个事件处理器。
例子：在这个例子中，我们将在一个div上添加三种不同的事件处理程序，并分别检查所有的事件。第一个事件是click()，当我们点击div时，它将缩小；第二个事件是dblclick()，当我们双击div元素时，它将变大；第三个事件是mouseover，当我们将指针移到div时，它将改变颜色。所以这就是我们如何在一个div元素上实现三个不同的事件处理程序。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
/* Required css code */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: rgb(32, 32, 32);
}
.main {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#shape {
height: 200px;
width: 200px;
background-color: green;
border-radius: 100%;
margin: 100px;
}
</style>
</head>
<body>
<!-- Shape is inscribed in main container -->
<div class="main">
<div id="shape"></div>
</div>
<script>
// Required jQuery code
(document).ready(function() {
("#shape").click(function() {
(this).animate({
height: "50px",
width: "50px"
});
});
("#shape").dblclick(function() {
(this).animate({
height: "300px",
width: "300px"
});
});
("#shape").mouseover(function() {
$(this).css("background-color", "white");
});
});
</script>
</body>
</html>
输出:
