<html>
<head lang="zh-CN">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
$("p").click(function () {
$(this).hide();
});
});
</script>
</head>
<body>
<p>click</p>
</body>
</html>
像<p onclick='xx'>
,以及<script>p.click=xx
或p.addEventListener</script>
这三种方式给元素绑定事件,点击之后,调用对应的函数,能理解
但是,使用jquery,点击click之后,jquery是如何随时随地监听到这个事件的呢?
这里并没有显式的代码,监听和绑定事件
监听到一个事件后,是如何将事件绑定到特定的函数呢?
// 请把代码文本粘贴到下方(请勿用图片代替代码)
jQuery事件监听和绑定可以简单地理解为在特定事件发生时,对页面上相应元素的执行操作。在jQuery中,可以使用事件监听器来处理特定类型的事件,如点击、鼠标悬停等,并在事件发生时执行相应的操作。
以下是一个简单的例子:
```javascript // 声明一个事件监听器 $("#myElement").on("click", function() { alert("元素被点击了"); });
// 在元素上绑定一个点击事件监听器 $("#myElement").on("click", function(event) { event.preventDefault(); // 阻止事件默认行为 alert("元素被点击了"); }); ```
在这个例子中,我们首先声明了一个事件监听器,当用户点击id为"myElement"的元素时,会弹出一个警告框。然后,我们在该元素上绑定了一个点击事件监听器,当用户点击该元素时,会阻止默认的点击行为(即跳转到页面顶部),同时弹出一个警告框。
在实际的项目中,我们可以根据需要添加更多的事件监听器,处理各种类型的事件,如键盘事件、鼠标事件等。也可以使用事件委托,将特定事件的监听器绑定到父元素上,从而减少事件监听器的数量,提高代码的可维护性和复用性。