event-阻止默认+事件委托+冒泡+捕获

阻止默认事件

   
有一些html元素默认的行为,比如说a标签,点击后有跳转动作;form表单中的submit类型的input有一个默认提交跳转事件;reset类型的input有重置表单行为。

如果你想阻止这些浏览器默认行为,JavaScript为你提供了方法。

代码如下




    
    Title
    


   


默认事件没有了。

既然return false 和 e.preventDefault()都是一样的效果,那它们有区别吗?当然有。

仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。

在DOM2中return false是不能阻止默认事件




    
    Title
    


   


事件委托

1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,只定义一个事件完成类似功能,不需要为每个元素加一个事件。

也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。

好处呢:1,提高性能。

我们可以看一个例子:需要触发每个li来改变他们的背景颜色(常规思路可能是为每个LI元素添加一个onclick事件,但比较耗性能)。




    
    Title
    


   


这样只给父元素添加事件,然后只需要判断点击的是否为LI 元素,如果是,则为其改变样式

 

冒泡和捕获都是DOM2中新增的概念,所谓DOM0其实就是注册一个onclick事件,形式一般为在html元素中加一个οnclick=""或者在js中onclick = function(){}的形式。DOM2形式为addEveneListener('click',function(){})

冒泡




    
    Title


     

Javascript事件

此时点击span,会依次弹出span,h2,box,这就是浏览器默认的冒泡事件,在DOM2中如何阻止呢?将注释删除,即可阻止冒泡事件

 

捕获

就是和冒泡顺序相反执行,从子元素->父元素




    
    Title


     

Javascript事件

 

你可能感兴趣的:(web,js阻止默认事件和委托事件)