JavaScript-绑定事件的三种方式（原生方式和bind方法）
程序员文章站
2022-05-07 19:34:22
...
事件绑定的三种方式
第一种
直接在标签中绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
function test() {
alert("delete");
}
</script>
<body>
<a href="#" onclick="test()">删除</a>
</body>
</html>
结果
第二种
使用JavaScript对象绑定事件
1. 原生JavaScript代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<body>
<a id="deleteA" href="#">删除</a>
</body>
<script>
document.getElementById("deleteA").onclick = function() {
alert("删除");
}
</script>
</html>
2. 使用JQuery对象转换成JavaScript对象实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<body>
<a href="#">删除</a>
</body>
<script>
//将JQuery对象转换成JavaScript对象
$("[href]")[0].onclick = function() {
alert("删除");
}
</script>
</html>
第三种
使用JQuery对象绑定事件
1.使用click方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<body>
<a href="#">删除</a>
</body>
<script>
$("[href='#']").click(function() {
alert("JQuery");
})
</script>
</html>
效果
2.使用bind方法
a.绑定一个事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<body>
<a href="#">删除</a>
</body>
<script>
$("[href='#']").bind("click",function(){
alert("JQuery bind");
})
</script>
</html>
效果
b.绑定多个事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<body>
<a href="#">删除</a>
</body>
<script>
$("[href ='#']").bind({
click:function(){
alert("事件一");
},
mouseover:function() {
alert("事件二");
}
})
</script>
</html>
鼠标移动到标签上的时候的效果
按下空格，然后点击删除的效果
取消绑定事件
使用JQuery对象的unbing方法即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<body>
<a href="#">删除</a>
</body>
<script>
$("[href='#']").bind("click",function(){
alert("JQuery bind");
$("[href ='#']").unbind();
})
</script>
</html>
第一次点击弹出窗口
再次点击就没有窗口弹出来了
上一篇： JS-正则表达式
下一篇： web前端之css初识