极客教程在jQuery中用on()代替live()
以下的jQuery事件处理函数基本上都是用于将事件附加到元素或选择器上，但彼此之间有很大的不同。在把jQuery live()变成on()函数之前，让我们先了解一下事件处理程序以及它们的区别。
jQuery live() :
这个jQuery函数为所有符合当前元素的选择器的元素附加一个函数处理程序，以及在未来或每当一些内容被动态添加到页面。这个函数将函数处理程序与给定的选择器和数据一起附加到根文档中。它是在jQuery 1.3及以上版本中引入的。
在jQuery-version 1.4之后，它提供了对所有事件的支持。
早些时候，它只支持一些事件，如点击、双击、鼠标下移、鼠标上移、鼠标上移、鼠标下移、按键上移、按键下移、按键按下。
语法:
$( selector ).live( events, data, function handler);
- events:一个或多个用空格分隔的事件，附在选择器上。
- data :传递给函数处理程序的可选数据参数。
- function handler：只要事件发生就会执行的函数。
注：它使用了事件委托和事件冒泡的概念。
代码片段：
$( "#container a" ).live( "click", function() {
// some response code to the event
alert( "GeeksforGeeks" );
});
该函数处理程序与选择器和点击事件一起被绑定到文档的根部。
当用户点击锚点元素时，事件被触发到文档的根部，并与#container a相匹配，然后执行点击事件函数。
在一个动态网站中使用jQuery live()，程序员不需要担心更新事件处理程序。
它既适用于现有元素，也适用于未来元素。
代码片段：
$('a').live('click', function() {
alert("GeeksforGeeks")
});
警报函数与点击事件和a作为参数一起被附加到文档上。
每当有任何事件涌向根文档时，jQuery都会检查点击事件，也会检查CSS选择器a。
如果这两个条件都满足，那么处理程序中的代码就会被执行，有效地使该函数变得非常不灵活。
$( "a" ).live( "click", function( event ) {
// It cancels the default action by this method.
event.preventDefault();
});
示例 1:
在下面的例子中，”点击 “事件是用这个方法与给定的 “p “连接的。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>
<script>
(document).ready(function() {
("button").live("click", function() {
("p").slideToggle();
});
});
('body').append(
'
<p>Adding dynamic items to test live function</p>
');
</script>
</head>
<body>
<p>Geeks for Geeks</p>
<button>Press</button>
<br>
<br>
<div><b><h4>Clicking on the 'Press'
button will execute the live method().
</h4></b> </div>
</body>
</html>
输出:
点击 “按 “按钮后，显示如下。
输出:
示例 2:
在下面的例子中，”点击 “事件与给定的 “p “和另一个按钮相连，使用这种方法。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>
<script>
(document).ready(function() {
("#pressbutton").live("click", function() {
("p").slideToggle();
});
("#insertbutton").click(function() {
$("
<p>Inserted Element</p>
").insertAfter(
"#insertbutton");
});
});
</script>
</head>
<body>
<p>Geeks for Geeks</p>
<button id="pressbutton">Press to toggle</button>
<br>
<br>
<button id="insertbutton">Click to insert an element</button>
</body>
</html>
输出 :
例子3 :
在下面的例子中，”点击 “事件被附在 “div “类上，使用这个方法。
<!DOCTYPE html>
<html>
<head>
<title>jQuery live() method</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
(document).ready(function() {
('div').live('click', function( event ){
alert('GeeksforGeeks');
});
});
</script>
<style>
.div{
width: 50px;
height: 50px;
margin: 10px;
float: left;
border: 2px solid black;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<p>Click on any square to see the output:</p>
<div class="div" style="background-color:#99f;"></div>
<div class="div" style="background-color:#8f8;"></div>
<div class="div" style="background-color:orange;"></div>
</body>
</html>
输出:
注意：这个函数在jQuery 1.7中被弃用，最后在jQuery 1.9中因为一些漏洞而被删除。这个函数被重写，通常被称为jQuery on()，是实现的首选。
使用jQuery live()的缺点：
让我们看看jQuery .live()函数的一些缺点，因为它已被废弃并删除。
- 由于事件触发器被委托到文档的根部，使用event.stopPropagation()
毫无意义。 - 在执行函数处理程序之前，该函数必须一直遍历到根的
文件。 - 因此，在大型DOM的情况下，性能和灵活性受到影响，而且时间也受到影响。
消耗。 - 使用jQuery live()不支持链式。
jQuery .on() 。
这个jQuery函数附加了一个或多个函数处理程序，这些处理程序与当前选择器以及所有的子元素相匹配。在调用jQuery on()的代码时，当前选择器必须存在于页面上。这个函数在jQuery 1.7及以上版本中被引入，以简化和合并所有以前的事件处理程序，即live()，bind()，delegate()到一个一致的函数。
语法 :
$(selector).on(events, childSelector, data, function handler);
或者
$( document ).on( events, selector, data, function handler );
- events。一个或多个事件，用空格分隔。
- selector : 触发事件的选择器或子选择器。
- data :要传递给函数处理程序的数据。
- function handler：一个在该事件触发时执行的函数。
代码片段:
$('#parentId').on('click', '#childId', function() {
// Code to be written
});
注意：每当选定的元素上发生事件时，函数处理程序就会被调用。
事件可以发生在来自内部子元素的元素上。
使用jQuery on()的优势：
让我们来看看jQuery .on的一些优势，因为它是用在jQuery live()上面的。
- jQuery .on()函数是所有事件绑定函数的实际替代，如live()、bind()和
委托()，使代码变得非常简单和一致。 - jQuery.on()函数可以将事件处理程序附加到父对象上，这更接近于实际对象。
这有效地提高了性能。 - 这个功能对当前和未来的元素都很适用。
- 即使对于简单的静态元素，使用jQuery on()也是一个好的做法。
- 事件处理程序从最内层到最外层的元素执行。
代码片段：
$("#container a").on("click", function () {
// some response code to the event
alert("GeeksforGeeks.");
});
$(document).on('click', '.selector', function() {
/* some response code to the event */
alert("GeeksforGeeks");
});
$("#dataTable tbody").on("click", "tr", function(event){
alert("GeeksforGeeks");
})
在上面的例子中，jQuery将 “点击 “事件绑定到dataTable的tbody上。
如果子元素被点击，事件将到达tbody，因为事件是向上冒泡的。
事件处理程序的代码片段：
function print_message() {
alert( "GeeksforGeeks" );
}
$( "button" ).on( "click", print_message );
注：简而言之，jQuery on()代表了一种将事件处理程序附加到元素的精简方式。
例子1 :
这个例子显示，”点击 “事件使用on()方法附加到 “div “方块。
<html>
<head>
<title>jQuery on() method</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
(document).ready(function() {
('div').on('click', function( event ){
alert('GeeksforGeeks!');
});
});
</script>
<style>
.div {
width: 50px;
height: 50px;
margin: 10px;
float: left;
border: 2px solid black;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<p>Click on any square to see the output:</p>
<div class = "div" style = "background-color:#99f;"></div>
<div class = "div" style = "background-color:#8f8;"></div>
<div class = "div" style = "background-color:orange;"></div>
</body>
</html>
输出 :
示例 2:
这个例子显示，”点击 “事件使用on()方法附加到 “li”。
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>on demo</title>
<style>
li {
width:200px;
background: yellow;
cursor: pointer;
padding: 5px;
}
li.hover {
background: #ccc;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<ul>
<li class="active">Click me!</li>
</ul>
<span></span>
<script>
var count = 0;
( "body" ).on( "click", "li", function() {
( this ).after( "<li>Paragraph number : " + (++count) + "</li>" );
});
</script>
</body>
</html>
输出:
jQuery live()被废弃的原因：
- 在整个文档对象上应用所有的.live()事件处理程序是一种不好的编程实践。
- 在非常大的文件上，它的性能和内存利用率都很差，响应时间也很慢。
- 由于事件处理程序被附加到文档元素上，它被抛出了意外的结果，降低了效率。
将live()变成on()：
把live()变成on()需要事件授权。
jQuery on()的表现更好，因为它直接将事件处理程序绑定到元素上，而不是绑定到文档根部。
jQuery将事件处理程序附加到最接近的祖先元素，然后允许它从子元素中冒出来。最初jQuery live()是用来将功能处理程序附加到目前不在文档中的元素，并可以动态生成。
以下是一些代表团的情况。
$('#container a').live('click', function(e) {
e.preventDefault();
alert('Anchor element is clicked');
});
将live()变成on()后，代码写成如下。
$('#container').on('click', 'a', function(e) {
e.preventDefault();
alert('Anchor element is clicked');
});
$('button').live('click', execute);
function execute() {
// code for execution
}
将live()变成on()后，上述代码写成如下。
$(document).on('click', 'button', execute);
function execute() {
// code for execution
}
在上面的例子中，jQuery on()被调用到文档上。
但如果选择一些离选择器较近的元素而不是文档，性能会更好。
$( "#id" ).live( "click", function() {
alert("GeeksforGeeks live event .");
});
将live()变成on()后，上述代码写成如下。
$( "#id" ).on( "click", function() {
alert("GeeksforGeeks on event.");
});