一.bind()方法绑定事件
首先使用属性选择器获取input标签，然后调用bind方法，传入的第一个参数是要绑定的事件名，第二个参数是事件所调用的函数，这里使用匿名函数作为第二个参数，代码和运行结果如下：
<!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>
这里还有一个取消事件绑定的方法unbind()，调用后之前绑定的事件将不再生效。
二.one()方法绑定事件
one()方法的使用代码与bind()差不多，但是作用上是有差别的，使用one()方法绑定的事件，只能执行一次，也就是说在如下代码中，无论点击按钮多少次，控制台上只会打印一次内容：
<!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']").one("click",function(){
console.log("按钮");
})
</script>
</body>
</html>
三.trigger()方法绑定事件
该方法可以触发匹配元素上某类事件，下面的例子以submit举例：
首先使用id选择器获取form标签，再调用trigger()方法为其绑定一个submit事件，这时运行代码就会发现表单直接被提交到百度页面了。
<!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="http://www.baidu.com/s">
<input type="hidden" name="wd" value="中国"/>
</form>
<script>
$("#search").trigger("submit");
</script>
</body>
</html>
四.jQuery自带的事件
就像JavaScript中绑定事件一样，jQuery对象也可以和DOM对象一样调用一些自带的事件来绑定，下面举几个常用的事件示例
1.click()方法
先用标签选择器获取input标签，然后调用click()方法绑定事件，函数体作为参数传入方法，示例如下：
<!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").click(function(){
console.log("111");
});
</script>
</body>
</html>
2.change()方法
先用标签选择器获取select标签，然后调用change方法绑定change事件，该事件的触发条件是当下拉列表中发生内容改变时，文本框、密码框和文本域同样也适用，代码和运行结果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
</head>
<body>
<select>
<option>--请选择--</option>
<option>--一年级--</option>
<option>--二年级--</option>
</select>
<script>
$("select").change(function(){
console.log("111");
});
</script>
</body>
</html>
3.submit()方法
提交表单时触发submit 事件，该事件只适用于表单元素，示例如下，运行后直接跳转到百度页面。
<!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="http://www.baidu.com/s">
<input type="hidden" name="wd" value="中国"/>
</form>
<script>
$("#search").submit();
</script>
</body>
</html>
五.keydown()方法
在如下代码中：
第13行，获取window的jQuery对象，然后调用keydown方法绑定事件，该事件是在键盘按键按下时触发，然后在该事件中传入的函数
第14行，该函数内容为判断按下的键是否为回车event.keyCode就是用来获取按下的键，13就代表回车键的代码
第15行，如果按下的是回车键则触发提交表单事件。
运行结果如下：
<!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="http://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>
按下回车键后：
六.事件冒泡
事件冒泡就是说事件会按照 DOM 层次结构像水泡一样不断向上直至顶端，事件处理函数中返回 false, 会对事件停止冒泡，还可以停止元素的默认行为，就像如下示例：
在a标签上添加onclick事件，但是该事件返回值为false，这时运行后即使点击a标签中的内容，还是不会跳转到百度页面。
这也恰恰说明了事件的绑定是优先于a标签的跳转执行的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
</head>
<body>
<a id="search" href="http://www.baidu.com" οnclick="return test()">跳转</a>
<script>
function test(){
return false;
}
</script>
</body>
</html>
