1、bind:
•
bind(type,[data],fn)
:
为每个匹配元素的特定事件绑定对应的事件处理函数
,各参数含义如下:
1.
type
表示事件类型,多个事件类型使用空格分隔;
2.
data
表示传递给绑定函数的额外数据对象,函数中使用
event.data
接收(
了解
);
3.
fn
表示绑定的函数;
按下enter键。
<!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键");
}
});
});
</script>
</head>
<body>
</body>
</html>
2、unbind:
•
unbind(type,[
data|fn
]])
:
删除每个匹配的元素上已绑定的事件,如果没有参数,则删除该元素上绑定的所有事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>unbind(type,[data|fn]])</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<span>白日依山尽,黄河入海流。</span>
<script>
$("span").bind({
mouseover: function() {
$("span").css("color", "red");
},
mouseout: function() {
$("span").css("color", "blue");
}
});
$("span").unbind("mouseover mouseout");
</script>
</body>
</html>
<input type="button" value="按钮" />
<script>
$("input").one("click",function(){
console.log(111);
})
$("input").bind("click",function(){
console.log(222);
})
$("input").unbind("click");
</script>
3.one:
one(type,[data],fn):该方法可以为元素绑定处理函数,当处理函数触发一次后, 立即被删除,即在每个对象上, 事件处理函数只会被执行一次
<input type="button" value="按钮" />
<script>
$("input").one("click",function(){
console.log(111);
});
</script>
4.trigger:
•
trigger(type,[data])
:
触发
每一个匹配元素上某类事件,
type
表示一个或多个事件类型,
data
表示传入函数的数据,例子如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>submit([[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="中国"/>
</form>
<script>
$("#search").trigger("submit");
</script>
</body>
5.change:
change([[data],fn])
:
文本框、密码框和文本域的值
发生改变时或
下拉列表选项发生变化时触发
change
事件;
6.click:鼠标点击匹配元素时触发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>
7.keydown:
keydown([[data],fn])
:
当键盘或按钮被按下时触发keydown事件
,例子如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>click([[data],fn])</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(window).keydown(function(event) {
if(event.keyCode == 13) {
console.log("Enter键");
}
});
</script>
</head>
<body>
</body>
</html>
8.submit:提交表单时触发submit 事件,该事件只适用于表单元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>submit([[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="中国"/>
</form>
<script>
$("#search").submit();
</script>
</body>
</html>
9.事件冒泡:事件会按照 DOM 层次结构像水泡一样不断向上直至顶端;事件处理函数中返回 false, 会对事件停止冒泡,还可以停止元素的默认行为
如下面的代码是先执行onclick 然后跳转 最后到标签
<!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" οnclick="return test();">百度</a>
<script>
function test(){
console.log("点击了...");
return false;
}
</script>
</body>
</html>