JavaScript_事件传播&&事件委托

事件传播

事件传播的机制:
事件冒泡
事件捕获

事件冒泡:
事件会从触发这个事件的元素开始,往父元素一级一级冒泡触发.
事件捕获:
事件会从传播路径中最顶层的window开始,往下捕获,知道捕获到真正触发这个事件的元素就停止传播

	事件监听:addEventListener('事件类型',事件处理函数,设置事件的传播机制布尔值)
	第三个参数为true的时候,这个事件的传播方式为事件捕获
	false则为事件冒泡

阻止事件传播

1. e.cancelBubble = true
2. e.stopPropagation()

事件委托

事件委托 : 子元素把一些本应该自己操作的事件委托给事件传播路径中的其中一个父元素
利用事件对象中的target,来判断是否是委托需要的那个元素
优点:

1. 提高性能:每一个函数都会占用内存空间,只需添加一个事件处理程序代理所有时间,所占用的内存空间会更少.
2. 动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以具有和其他元素一样的事件

    <div class="box">
        <button class="btn">按钮1</button>
        <button class="btn">按钮2</button>
        <button class="btn">按钮3</button>
        <button class="btn">按钮4</button>
    </div>
    <script>
	var btn = document.querySelectorAll('button');
	var box = document.querySelector('.box');
	box.onclick = function(){
            var e = window.event;
            //判断当前点击的是否是需要委托的元素
            if(e.target.className == 'btn' ){
            //e.target 鼠标真正点击的这个元素
            var newBtn = e.target.cloneNode(true);
            box.appendChild(newBtn);
           	}
        }
	</script>