$().click()和$().on(“click“, “要选择的元素“, function(){})的区别

程序员文章站 2024-02-08 14:43:16

...

前言

jQuery的出现，大大简化了对dom的操作，但是如果不是仔细阅读api和进行操作，就不知道其中最大的优点和使用方式。就拿$().click()和$().click()和(document).on(‘click’,‘要选择的元素’,function(){})来说，都是点击事件的操作，但是也有不同的地方。

$(选择器).click(function(){})：页面中已经存在的DOM(只针对与页面已存在的选择器)。

$(ducument).on(‘click’,‘要选择的元素’,function(){})：动态创建的元素也能触发事件，且ducument在页面已经存在，而不是动态添加的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<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>
	</head>
	<body>
		<div>
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>
	</body>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	<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>
</html>

知识补充:

().on()的知识点补充：　　1.从jQuery1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、delegate()、live()等事件函数。　　　　

().bind()直接绑定在元素上，和click，blur，mouseon一样的点击事件。
　　　　().live()是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到documentDOM节点上。　

知识补充

().on()的知识点补充：　　1.从jQuery1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、delegate()、live()等事件函数。　　　　

　 ().delegate()是更精确的小范围的使用事件代理。
　　　 $().on()结合了这三个方法的优势摒弃了劣势。

2.$().on()该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
3. 阻止事件冒泡和事件委托的方法：
　　　A：return false。
　　　　　在事件的处理中，可以阻止默认事件和冒泡事件。

B：event.preventDefault()
　　　　　在事件的处理中，可以阻止默认事件但是允许冒泡事件的发生。

C：event.stopPropagation().。
　　　　　在事件的处理中，可以阻止冒泡但是允许默认事件的发生。

相关标签： js问题锦囊 on事件的不同之处 jq 事件过滤

下一篇： HTC Desire 19s发布：联发科P22+3+32 1400元

$().click()和$().on(“click“, “要选择的元素“, function(){})的区别

前言

知识补充:

知识补充

$().click()和$().on(“click“, “要选择的元素“, function(){})的区别

基于jquery的on和click的区别详解

JavaScript onclick 和 click 的区别详解

在jquery中on和click的区别有哪些？

javascript使用shift+click实现选择和反选checkbox的方法_javascript技巧

javascript使用shift+click实现选择和反选checkbox的方法_javascript技巧

基于jquery的on和click的区别详解

jQuery中onClick和click有何区别？jQuery中onClick和click的区别介绍

jQuery中的on()和click()的区别

click事件和onclick事件的区别