jquery事件委托

jquery事件委托

1.什么是事件委托？

    事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。

2.为什么要用事件委托？

    1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能。因为每个事件处理函数都是对象，对象会占用内存，内存中的对象越多，性能就越差。此外，必须事先指定所有的事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。

    2.对很长的列表逐个添加事件，简直就是噩梦。所以事件委托，能极大地提高页面的运行性能，减少开发人员的工作量。

简单点说就是为了减少dom访问次数，减少内存，提高页面的运行性能

例如：点击ul下面的li，添加active

css

.active {
			background: red;
			color: white;
		}

html

<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>

js

$(function() {
			//遍历li的click事件达到目的
			$("ul li").each(function() {
				$(this).click(function() {
					$(this).addClass("active").siblings().removeClass("active");
				});
			});
			//利用事件委托
			$("ul").on("click","li",function(){
				$(this).addClass("active").siblings().removeClass("active");
			});
		});

效果：

两种方法虽然都能达到目的，但是推荐使用事件委托！