事件委托和阻止事件的传播、默认行为开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，点击查看

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，点击查看活动详情

阻止事件的传播

对于DOM事件流呢，他的作用有好处也有坏处。

当我们仅仅只需要其中一个子元素身上的事件而不要其父元素身上的同类型事件时，这时候你就会觉得DOM事件流是个坏处。那我们不需要他进行传播，就得有办法阻止他传播

阻止事件的传播，我们通常会使用

box.onclick=function(){
    evt.stopPropagation()//阻止事件的传播
    //...单击事件的函数
}

一般情况下，都把阻止事件的传播先写在需要执行的函数前面，这样子的话即使函数有错误的地方，也会阻止事件的传播。

在低版本的ie浏览器中，像我们用上面的那个方法是没有用的，他有一个特殊的做法就是：

evt.cancelBubble = true

也是将这串代码放在我们要阻止他传播的这个事件处理函数中。

在标准的阻止默认行为中有两种方法。

第一种：只要在他的事件处理函数中写上一个 return false 就好了。

//dom0类型
document.oncontextmenu=function(){
        console.log("右键单击,自定义右键菜单");
        return false
    }

第二种：只要在他的事件处理函数中写上一个 evt.preventDefault() 就好了。

//dom2类型
document.addEventListener("contextmenu",function(evt){
       console.log("右键单击,自定义右键菜单");
       evt.preventDefault()
})

拿一个右击事件来说，在一般的网站中我们鼠标右击都会出现一个菜单，这都是浏览器自带的一种默认行为。如果不想要这种默认的菜单，我们可以阻止他的默认行为，做一个自定义菜单。

首先我们来解释一下为什么是事件委托

还有一个重要的属性就是:target
这个属性是事件对象中的属性，表示你点击的目标。当你触发点击事件时，你点击的哪个元素，他就代表哪个元素。

这么做有什么好处：