jQuery中dom元素上绑定的事件详解
什么是DOM元素上的事件?
在网页中,DOM元素上的事件指的是用户在网页上进行交互时,浏览器会在特定的时间点触发某些函数。这些函数可以通过jquery在DOM元素上进行绑定。比如点击按钮、输入文本框等等。
如何在DOM元素上绑定事件?
使用jQuery给DOM元素绑定事件,可以通过以下方式:
// 给ID为button的DOM元素添加点击事件
$("#button").click(function(){
// 处理点击事件的代码
});
// 给类名为button的所有DOM元素添加点击事件
$(".button").click(function(){
// 处理点击事件的代码
});
// 给所有button标签添加点击事件
$("button").click(function(){
// 处理点击事件的代码
});
在上面的代码中,click
是一个jQuery事件方法。您可以使用它来绑定click事件。可以在函数内部实现单击按钮时要执行的代码。
事件绑定的几种方式
直接绑定
$("#button").click(function(){
alert("绑定成功!");
});
间接绑定
$(document).on("click","#button",function(){
alert("绑定成功!");
});
通常,我们应该使用直接绑定,因为效率更高。只有在动态添加元素时,可用使用间接绑定。
如何解除DOM元素上的事件绑定?
使用jquery,可以通过以下方式取消绑定:
// 解除绑定
$("#button").off("click");
示例1:实现点击按钮弹出提示框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
$("#button").click(function(){
alert("按钮被点击了!");
});
});
</script>
</head>
<body>
<button id="button">点击我</button>
</body>
</html>
示例2:使用间接绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
$(document).on("click","#button",function(){
alert("按钮被点击了!");
});
});
</script>
</head>
<body>
<button id="button">点击我</button>
</body>
</html>
在这个例子中,我们使用间接绑定来处理单击按钮事件。由于这个按钮在页面加载时就已经存在了,所以你也可以使用直接绑定。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQuery中dom元素上绑定的事件详解 - Python技术站