js之DOM事件对象、事件流与事件委托

事件对象

• 事件对象也是个对象,包含事件触发时的相关信息

获取事件对象

• 事件绑定的回调函数的第一个参数就是事件对象

 		 let btn = document.querySelector('button')
        //e 为事件对象
        //元素.addEventListener('click',function(e){})
        btn.addEventListener('click', function(e) {
            console.log('e', e);
        })

常用属性

• type 获取当前的事件类型
• clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置
• offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置
• pageX/pageY 获取光标相对于整个页面的位置
• key 用户按下的键盘键的值

		// mousemove 鼠标移动事件
        document.addEventListener('click', function(e) {
            // console.log(11)
            // pageX 和 pageY 跟文档坐标有关系
            // console.log(e)
            //clientX clientY只在当前页面(不计算滚动条)
            console.log('clientX:' + e.clientX, 'clientY:' + e.clientY);
            //pageX pageY 整个页面 (计算滚动条)
            console.log('pageX:' + e.pageX, 'pageY:' + e.pageY);
            //offsetX offsetY 标相对于当前DOM元素左上角的位置
            console.log('offsetX:' + e.offsetX, 'offsetY:' + e.offsetY)
        })

事件流

事件流与两个阶段

• 事件流指的是事件完整执行过程中的流动路径
• 捕获阶段 从父到子
• 冒泡阶段 从子到父
  

事件捕获和事件冒泡

• 事件冒泡 当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
• 事件冒泡默认存在 必须时相同的点击类型(如click)
• 事件捕获 从DOM的根元素开始去执行对应的事件 (从外到里)
• 捕获语法: document.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)
• 捕获很少使用 默认不捕获

阻止事件流动

• 默认有冒泡的存在,子元素的点击会影响到父元素
• 阻止事件流动:把事件限制再当前元素内
• 语法:事件对象.stopPropagation()
• 阻断事件流动传播(冒泡阶段,捕获阶段都有效)
• 鼠标经过事件 mouseover 和 mouseout 会有冒泡效果 mouseenter 和 mouseleave 没有冒泡效果(推荐)
• 阻止链接跳转 e.preventDefault

		 let fa = document.querySelector('.father')
        let son = document.querySelector('.son')
        fa.addEventListener('click', function(e) {
            //阻止事件流动  事件冒泡
            e.stopPropagation()
            console.log('点击了父亲');
        })
        son.addEventListener('click', function(e) {
            console.log('点击了儿子');
            //阻止事件流动 事件冒泡
            e.stopPropagation()
        })

传统on注册与事件监听注册的区别

<button>点击</button>
    <script>
        let btn = document.querySelector('button')
            // 1.l0 on
            // 多次相同的事件，只执行最后一次
            // btn.onclick = function() {
            //     alert('第一次')
            // }
            // btn.onclick = function() {
            //         alert('第二次')
            //     }
            // 解绑事件
            // btn.onclick = null
            // 2. addEventListener
        btn.addEventListener('click', add)

        function add() {
            alert('第一次')
        }
        btn.addEventListener('click', function() {
            alert('第二次')
        });
        //移除点击事件 匿名函数无法解绑
        //removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
        btn.removeEventListener('click', add)
    </script>

事件委托

• 利用事件流的特征解决一些开发的需求
• 优点: 给父级元素加事件(提高性能),省区for循环给子元素绑定事件
• 原理: 利用冒泡的特点
• 实现：事件对象.target 可以获得真正触发事件的元素

	<ul>
        <li>我是第1个小li</li>
        <li>我是第2个小li</li>
        <li>我是第3个小li</li>
        <li>我是第4个小li</li>
        <li>我是第5个小li</li>
    </ul>
    <script>
        //不要每个小li注册事件了  
        //而是把事件委托给父级 给父级添加事件
        let ul = document.querySelector('ul')
        ul.addEventListener('click', function(e) {
            console.log('我点击了');
            //如何获取当前的元素
            console.log('打印事件对象', e.target);
            e.target.style.color = 'red'
        })
    </script>