JS(基础)利用冒泡进行事件委托

我们都知道JS的事件机制是先捕获=》后冒泡

绑定事件时简单的写法：

btn.onclick = function(){

         code...

}

 这样默认会有事件冒泡

下面的写法可操作性会更强一些

btns[1].addEventListener('click',function(){

  code...

},false)

 第一个参数 事件名 srting格式

第二个参数 执行的事件函数

第三个参数 布尔值 默认false 为冒泡机制   true 为捕获机制

事件委托可以理解为只给父元素添加事件、点击子元素冒泡的父元素通过事件对象 e.target 操作具体点击的子元素

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

	var ul = document.querySelector('ul');
	var tagg = true
	ul.addEventListener('click',function(e){
		if(tagg){
			e.target.style.background = '#ccc'
			tagg = false
		}else{
			e.target.style.background = '#fff'
			tagg = true
		}
	})

我们还可以通过事件对象进行阻止冒泡/阻止默认事件等操作

// 阻止鼠标右键
div.addEventListener('contextmenu',function(e){
	e.preventDefault()
})

// 阻止选中文本
div.addEventListener('selectstart',function(e){
	e.preventDefault()
})

// 阻止表单的提交默认跳转事件
div.addEventListener('submit',function(e){
	e.preventDefault()
})



// 阻止当前事件冒泡
div.addEventListener('事件名',function(e){
	 e.stopPropagation()
})