1.添加事件:
bind(type,[data],fn) :为每个匹配元素的特定事件绑定对应的事件处理函数,各参数含义如下:
type 表示事件类型,多个事件类型使用空格分隔;
data 表示传递给绑定函数的额外数据对象,函数中使用 event.data 接收 ;
fn 表示绑定的函数;
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
</head>
<body>
<input type="button" value="按钮"/>
<script>
$("[type='button']").bind("click",function(){
console.log("按钮");
})
</script>
</body>
</html>
2.撤销事件:
unbind(type,[data|fn]]):删除每个匹配的元素上已绑定的事件,如果没有参数,则删除该元素上绑定的所有事件。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" 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>
3.添加一次事件:(防止表单重复提交,提升用户体验)
one(type,[data],fn):该方法可以为元素绑定处理函数,当处理函数触发一次后, 立即被删除,即在每个对象上, 事件处理函数只会被执行一次。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
</head>
<body>
<input type="button" value="按钮"/>
<script>
$("input").one("click",function (){
console.log("11111");//防止表单重复提交
});
</script>
</body>
</html>
4.触发事件:
4.1keydown([[data],fn]) :当键盘或按钮被按下时触发keydown事件
trigger(type,[data]):触发每一个匹配元素上某类事件,type表示一个或多个事件类型, data表示传入函数的数据
submit([[data],fn]):提交表单时触发submit 事件,该事件只适用于表单元素
代码如下:结合(功能:按下键盘Enter按钮即可触发)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
</head>
<body>
<form id="search" action="https://www.baidu.com/s">
<input type="hidden" name="wd" value="触发事件" />
</form>
<script>
//$("#search").trigger("submit");等价下
//$("#search").submit();等价上
$(window).keydown(function(){
if(event.keyCode==13){
$("#search").submit();
}
});
</script>
</body>
</html>
4.2change([[data],fn]) :文本框、密码框和文本域的值发生改变时或下拉列表选项发生变化时触发change 事件;
代码如下:(文本框内容改变即触发跳转页面)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>change([[data],fn])</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<body>
<form id="search" action="https://www.baidu.com/s">
<input type="hidden" name="wd" value="中国"/>
<input type="text" id="search_btn" value="百度一下" />
</form>
<script>
$("#search_btn").click(function(){
$("#search").submit();
})
</script>
</body>
</body>
</html>
4.3click([[data],fn]) :鼠标点击匹配元素时触发click事件
代码如下:(点击按钮即跳转)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>click([[data],fn])</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<form id="search" action="https://www.baidu.com/s">
<input type="hidden" name="wd" value="中国"/>
<input type="button" id="search_btn" value="百度一下" />
</form>
<script>
$("#search_btn").click(function(){
$("#search").submit();
})
</script>
</body>
</html>
5.事件冒泡:事件会按照 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" target="_blank" onclick="return test();">百度一下</a>
<form onsubmit="return false"></form>
<script>
function test(){
console.log("aaa");
return false;
}
</script>
</body>
</html>
页面显示:(点击仅增加console次数,并不跳转)
说明先执行test方法判断为false再触发事件
执行οnclick="return test()":超链接跳转失败,点击无法跳转
超链接失效,点击无法跳转!
超链接失效,点击无法跳转超链接失效,点击无法跳转!!超链接失效,点击无法跳转!
超链接失效,点击无法跳转!