一、使用bind()方法绑定事件
作用:为每个匹配元素的特定事件绑定对应的事件处理函数
格式:bind(type,[data],fn)
其中type表示事件类型,data表示传递给绑定函数的额外数据对象,fn表示绑定的函数
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bind(type,[data],fn)</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function() {
$(window).bind('keydown', function(event) {
var key = event.which;
if(key == 13) {
console.log("Enter键");//按enter键输出“Enter键”
}
});
});
</script>
</head>
<body>
</body>
</html>
*使用unbind()方法解除绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bind(type,[data],fn)</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input type="button" value="按钮" />
<script>
$("[type='button']").bind("click",function(){
console.log("点击了按钮")
})
$("[type='button']").unbind("click");//解除了绑定,不会在控制台输出文本内容
</script>
</body>
</html>
二、使用one()方法绑定只能触发一次的事件
作用:one()方法可以为元素绑定处理函数,当处理函数触发一次后, 立即被删除,即在每个对象上, 事件处理函数只会被执行一次。
格式:one(type,[data],fn)
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input type="button" value="注册" />
<script>
$("[type='button']").one("click",function(){
console.log("数据已提交")
})
</script>
</body>
</html>
使用one()方法绑定事件,则只能触发一次,防止某些情景下用户重复提交数据或表单,常用于注册。
三、使用trigger()/submit()方法实现提交表单
1、trigger()方法
作用:自动触发每一个匹配元素上某类事件,type表示一个或多个事件类型, data表示传入函数的数据。
格式:trigger(type,[data])
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<form id="search" >
<input />
</form>
<script>
$("#search").trigger("submit");
</script>
</body>
</html>
2、submit()方法
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<form id="search" >
<input />
</form>
<script>
$("#search").submit();
</script>
</body>
</html>
四、总结四种常用事件
1、change()
作用:文本框、密码框和文本域的值发生改变时或下拉列表选项发生变化时触发change 事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<form id="search" >
<input type="text" />
</form>
<script>
$("#search").onchange(function(){
console.log("检测到文本输入!");
});
</script>
</body>
</html>
2、click()
作用:鼠标点击匹配元素时触发click事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<form id="search" >
<input id="search_btn" type="button" value="搜索一下" />
</form>
<script>
$("#search").click(function(){
$("#search").submit();
});
</script>
</body>
</html>
3、keydown()
作用:当键盘或按钮被按下时触发keydown事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<form id="search" action="http://www.baidu.com/s" >
<input type="hidden" name="wd" value="天气" />
</form>
<script>
$(window).keydown(function(){//检测到enter键就提交表单
if(event.keyCode==13){
$("#search").trigger("submit");//触发器
}
});
</script>
</body>
</html>
4、submit()
在上面“三、使用trigger()/submit()方法实现提交表单”已经介绍过,此处不再赘述。
五、事件冒泡
介绍:事件会按照 DOM 层次结构像水泡一样不断向上直至顶端;事件处理函数中返回 false, 会对事件停止冒泡,还可以停止元素的默认行为。
用法举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<!--超链接失效,点击无法跳转-->
<a href="http://www.baidu.com" onclick="return test();">百度</a>
<script>
function test(){
console.log("点击了...");
return false;
}
</script>
</body>
</html>
在上面这个例子中,通过向onclick事件返回“false”值可以实现“停止冒泡”,停止元素默认行为(a标签跳转页面)。
这个例子证明了DOM结构是像水泡一样逐个执行。