$().click()と$().on(「click」,「選択する要素」,function(){})の違い
前言
jQueryの出現はdomの操作を大幅に簡略化したが,apiをよく読んで操作しなければ,その最大の利点と使い方が分からない.$().click()と$().click()と(document).on(‘click’,‘選択する要素’,function(){})では,いずれもイベントをクリックする操作であるが,異なる点もある.
$(セレクタ).click(function(){}):ページにすでに存在するDOM(ページに存在するセレクタのみ).
$(ducument).on(‘click’,‘選択する要素’,function(){}):動的に作成された要素もイベントをトリガーすることができ、ducumentは動的に追加されるのではなくページにすでに存在する.
jQueryの出現はdomの操作を大幅に簡略化したが,apiをよく読んで操作しなければ,その最大の利点と使い方が分からない.$().click()と$().click()と(document).on(‘click’,‘選択する要素’,function(){})では,いずれもイベントをクリックする操作であるが,異なる点もある.
$(セレクタ).click(function(){}):ページにすでに存在するDOM(ページに存在するセレクタのみ).
$(ducument).on(‘click’,‘選択する要素’,function(){}):動的に作成された要素もイベントをトリガーすることができ、ducumentは動的に追加されるのではなくページにすでに存在する.
<style>
ul {
list-style: none;
display: flex;
}
ul li {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: pink;
font-weight: bold;
border: 1px solid #eee;
}
ul li:hover {
cursor: pointer;
}
</style>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"/>
<script type="text/javascript">
$(function() {
/**
$('li').on('click', function() { // on() ， 6 li
alert($(this).text())
});
// li
$('ul').append('<li>6</li>')
// js ， 6 li ， click
*/
//ul li
$('ul').on('click', 'li', function() { // on() ， 6 li
alert($(this).text())
});
// li
$('ul').append('<li>6</li>')
})
</script>
</code></pre>
<p> </p>
<h3> :</h3>
<p>().on() ： 1. jQuery1.7 ，on() ， bind()、delegate()、live() 。 </p>
<p>().on() ： 1. jQuery1.7 ，on() ， bind()、delegate()、live() 。</p>
<p> ().bind() ， click，blur，mouseon 。<br/> ().live() 。 ， documentDOM 。 </p>
<h2> </h2>
<p>().on() ： 1. jQuery1.7 ，on() ， bind()、delegate()、live() 。 </p>
<p>().on() ： 1. jQuery1.7 ，on() ， bind()、delegate()、live() 。 </p>
<p> ().bind() ， click，blur，mouseon 。<br/> ().live() 。 ， documentDOM 。 </p>
<p> ().delegate() 。<br/> $().on() 。</p>
<p>2.$().on() 、 。 ，jQuery 。<br/> 3. ：<br/> A：return false。<br/> ， 。</p>
<p> B：event.preventDefault()<br/> ， 。</p>
<p> C：event.stopPropagation().。<br/> ， 。</p>
<p> </p>
</div>
</div>
</div>
</div>