Web API基础知识四

事件对象

获取事件对象

元素.addEventListener('click',function(e){
    
})//e为事件对象

常用属性：

type ----获取当前事件类型（点击事件。。。）

clientX/cllientY ----获取光标相对于浏览器可见窗口左上角的位置

offsetX/offsetY -----获取光标相对于当前DOM元素左上角的位置

key -----用户按下的键盘键的值（不提倡用keyCode）

事件流

1 给多个父子结构的标签绑定事件， 先点击了子元素，产生事件流动

2 事件流动分成两个阶段

​ ① 捕获阶段 父节点流动到子节点

​ ② 冒泡阶段 子节点流动到父节点 （默认）

​ ③事件流动方向默认是 使用了冒泡 - 点击儿子标签 触发

​ 儿子->父亲->爷爷

3 我们可以修改触发事件 让它选择使用 捕获阶段还是冒泡阶段（默认）

​ addEventListener 可以选择使用冒泡还是捕获（传入true就是捕获）

​ addEventListener （事件类型，事件处理函数，捕获还是冒泡（默 认值 false，可以省略））

​ addEventListener （“click”，function（）{}，true）

<div class="a">爷
        <div class="b">爸
            <div class="c">子</div>
        </div>
    </div>
    <script>
        let a = document.querySelector('.a')
        let b = document.querySelector('.b')
        let c = document.querySelector('.c')
        a.addEventListener('click',function(){
            console.log(a);
        },true)//捕获
        b.addEventListener('click',function(){
            console.log(b);
        },true)//捕获
        c.addEventListener('click',function(){
            console.log(c);
        })
    </script>

阻止事件流动

事件对象.stopPropagation()

可以把事件限制在当前元素内

阻止标签的默认行为

事件对象.preventDefault()

事件委托

通过给父元素绑定事件，事件触发，判断一下当前触发事件的元素target

事件对象.target    可以获得真正触发事件的元素