jQuery event binding method learning summary (recommended)-PHP开发-php.cn

jQuery event binding method learning summary (recommended)

高洛峰

Release： 2016-12-06 11:18:48

Original

1337 people have browsed it

For event binding methods in jQuery, there are mainly on(), bind(), delegate(), live(), etc. I have used it before, and I know there are several methods, but I don't know the difference between these event binding methods. The most commonly used method is the on method, and I plan to sort it out today.

bind method

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>bind事件绑定</title>
</head>
<body>
<div>
 <button id="btn">添加新的p元素</button>
 <p>第一个p元素</p>
 <p>第二个p元素</p>
 <p>第三个p元素</p>
 <p>第四个p元素</p>
 <p>第五个p元素</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//点击添加一个新的元素
$("#btn").click(function(){
 $("div").append("<p>这是一个新的p元素</p>");
});
//给所有的p元素绑定点击事件
$("div p").click(function(){
 alert($(this).text());
});
</script>
</body>
</html>

Copy after login

Disadvantages of this way of binding events:

When there are too many p elements on the page, there will be a large number of event handlers on the page, resulting in poor page performance;

There is no click event for dynamically generated new elements.

For these two shortcomings, we can solve them through the delegate method that will be introduced below.

delegate method

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>jQuery事件绑定</title>
</head>
<body>
<div>
 <button id="btn">添加新的p元素</button>
 <p>第一个p元素</p>
 <p>第二个p元素</p>
 <p>第三个p元素</p>
 <p>第四个p元素</p>
 <p>第五个p元素</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$("#btn").click(function(){
 $("div").append("<p>这是一个新的p元素</p>");
});
$("div").delegate("p", "click", function () {
 alert($(this).text());
});
</script>
</body>
</html>

Copy after login

In the above example, we use the principle of event delegation and use delegate to bind events.

Do not bind events directly to the p element, but bind events to its parent element (or ancestor element). When you click on any element within the div, the event will pop up layer by layer from the event target (target element) bubble until it reaches the element to which you have bound the event, such as the div element in this example. During the bubbling process, if the event's currentTarget matches the selector, the code will be executed.

This solves the above two problems of using the bind() method. There is no need to bind events to p elements one by one, which effectively reduces the number of event handlers on the page. It can also bind events to dynamically added p elements. determined event.

This method is also flawed: it is easier to bind in this way, but problems may also occur when calling. If the event target is very deep in the DOM tree, bubbling up layer by layer to find elements that match the selector will affect performance.

bind and delegate source code implementation

bind: function( types, data, fn ) {
  return this.on( types, null, data, fn );
 },
 unbind: function( types, fn ) {
  return this.off( types, null, fn );
 },
 
 delegate: function( selector, types, data, fn ) {
  return this.on( types, selector, data, fn );
 },
 undelegate: function( selector, types, fn ) {
  // ( namespace ) or ( selector, types [, fn] )
  return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
 }

Copy after login

It can be seen from the source code that both bind() and delegate() are actually implemented through the on() method, but the parameters are different.

on method

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>jQuery事件绑定</title>
</head>
<body>
<div>
 <button id="btn">添加新的p元素</button>
 <p>第一个p元素</p>
 <p>第二个p元素</p>
 <p>第三个p元素</p>
 <p>第四个p元素</p>
 <p>第五个p元素</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//给每一个p元素绑定点击事件
$("div").on("click","p",function(){
 alert($(this).text());
});
</script>
</body>
</html>

Copy after login

Remove event

For bind(), delegate() and on() binding methods, the methods to remove events are:

$( "div p" ).unbind( "click", handler );
$( "div" ).undelegate( "p", "click", handler );
$( "div" ).off( "click", "p", handler );

Copy after login

Summary

•When there are many elements matched by the selector, do not use bind() for iterative binding;
•When using the id selector, you can use bind();
•When you need to bind dynamically added elements, use delegate() Or on();
•Use delegate() and on() methods, and the DOM tree should not be too deep;
•Use on() as much as possible.