事件的冒泡及委托介绍

1.事件冒泡
事件冒泡指在js中,被包含的子标签一单触发了某种事件,那么父类元素的同名事件也会被逐层触发一直到没有父标签的html标签中,即当点击子类的事件时,也把父类的事件给触发了,

		$('.box').on('click',function (event) {
        alert('box被点击了')
        });
        $('.last').on('click',function (event) {
            alert('最后一个被点击了')

2.如何解决这个问题呢,如果事件冒泡,在执行完子元素的事件后,不希望父类的也被触发,那么可以采用阻止冒泡来实现

        阻止冒泡事件
            // event.stopPropagation();
            //也可用return false表示,当执行这个方法的时候,阻止事件的冒泡
            return false;
       		 })

2.事件委托
1.也称事件委派,即指把目标事件的绑定委托给父级元素
2.书写方式:
$(‘委托元素的选择器’).on(‘事件类型’,事件目标元素的选择器),function(){
这里即是操作目标元素的代码,this指的是目标元素
}

	          $('#list').on('click','li',function () {
	            console.log($(this))
	            //这里的this指被点击的目标元素
	        })