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技术站
微信扫一扫 
支付宝扫一扫 