一、总结
绑定事件:
1、bind(type,[data],fn):为每个匹配元素的特定事件绑定对应的事件处理函数,各参数含义如下:
一、type表示事件类型,多个事件类型使用空格分隔;
二、data表示传递给绑定函数的额外数据对象,函数中使用event.data接收(了解);
三、fn表示绑定的函数;
2、unbind(type,[data|fn]]):删除每个匹配的元素上已绑定的事件,如果没有参数,则删除该元素上绑定的所有事件
3、one(type,[data],fn):该方法可以为元素绑定处理函数,当处理函数触发一次后, 立即被删除,即在每个对象上, 事件处理函数只会被执行一次。
4、trigger(type,[data]):触发每一个匹配元素上某类事件,type表示一个或多个事件类型, data表示传入函数的数据
5、change([[data],fn]) :文本框、密码框和文本域的值发生改变时或下拉列表选项发生变化时触发change 事件;
6、click([[data],fn]) :鼠标点击匹配元素时触发click事件
7、keydown([[data],fn]) :当键盘或按钮被按下时触发keydown事件
8、submit([[data],fn]):提交表单时触发submit 事件,该事件只适用于表单元素
事件冒泡
二、案例
事件绑定:
一、bind 绑定
<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']").bind("click",function(){
console.log("test")
})
</script>
</body>
</html>
此时的执行结果就是点击按钮就会在控制台输出test
二、unbind()解除绑定
<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']").bind("click",function(){
console.log("test")
})
$("[type='button']").unbind("click");
</script>
</body>
</html>
紧接着这个就回把已经绑定了的事件给取消绑定
三、one()绑定一次事件
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input type="button" value="测试" />
<script>
var i=1;
$("[type='button']").one("click",function(){
console.log("点击了"+i+"次");
i++;
})
</script>
</body>
</html>
此时的按钮再点击过一次后发现不会显示在控制面板上
四、trigger()触发已知事件
如下代码是触发绑定的click对象
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input type="button" value="测试" />
<script>
var i=1;
$("[type='button']").bind("click",function(){
console.log("点击了"+i+"次");
i++;
})
$("[type='button']").trigger("click");
</script>
</body>
</html>
如下代码是触发的form表单的提交
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>trigger(type,[data])</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>
</html>
五、change()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>trigger(type,[data])</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<select>
<option><-->请选择</-->--</option>
<option>--一年级--</option>
</select>
<script>
$("select").change(function(){
console.log("ok!")
})
</script>
</body>
</html>
效果是我选择是会输出
六、keydown()和submit()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>trigger(type,[data])</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>
$(window).keydown(function(){
if(event.keyCode==13){
$("#search").trigger("submit");
}
})
</script>
</body>
</html>
event.keycode作用是获取在在页面上敲击键盘中的按键时所对应的编码(回车键是13)
注意此时的keydown绑定在window上
事件冒泡:
事件会按照 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>
此时由于click返回的是false,所以终止了a标签作用,并且控制台输出了“点击了”