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

前言

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()等事件函数。    

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

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

知识补充

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

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

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

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

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

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

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

 

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页