A .bind () method binding events
First, using the property selectors get input tab, and then call the bind method, the first argument is to bind the event name, the second parameter is a function called by the event, where the use of anonymous functions as the second parameter, code and the results are as follows:
<!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>
There is also a canceled event binding methods unbind (), before the event will no longer be bound to take effect after the call.
Two .one () method binding events
Using the code one () method of the bind () the same, but the effect is there is a difference, using one () event method bindings, can only be performed once, that is to say in the following code, regardless of how many times the click of a button, print content only once on the console:
<!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>
Three .trigger () method binding events
The method may trigger certain events matching elements, to submit the following examples Examples:
First get form using the id selector tab, then call the trigger () method for binding a submit event, then run the code you will find a form to be submitted directly to the Baidu page.
<!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>
Four .jQuery own event
Like the JavaScript binding events, jQuery objects and DOM objects can also call some event comes as to bind Here are a few examples of common events
1.click () method
Obtaining first input selector label tab, and then calls the click () method binding events, the body functions as a parameter method, for example:
<!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 () method
First obtain select tag tag selector, and then call the method binding change change event triggers the event occurred when the drop-down list to change the content, text boxes, password boxes and text fields are also applicable codes and operating results are as follows :
<!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 () method
Fires when submitting the form submit event, which only applies to form elements, the following example, after running jump directly to the Baidu page.
<!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>
Five .keydown () method
In the following code:
Line 13, get jQuery object window, and then call the method to bind keydown event, which is triggered when the keyboard button, and then passed in the event function
Line 14, the function of determining whether the content of the pressed key is used to obtain event.keyCode Enter key pressed the enter key 13 on behalf of the code
Line 15, if the Enter key is pressed the trigger event to submit the form.
Results are as follows:
<!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>
