js事件传递及应用案例-蒙版效果

冒泡:

冒泡机制中,水泡从下往上升,经过不同层次的区域,最终到达最外层

冒泡机制

在js中,气泡就相当于 事件，而水则相当于 整个dom树；事件从dom 树的底层 层层往上传递，直至传递到dom的根节点。

捕获与冒泡原型图

• IE 6.0:
  div → body → html → document
• 其他浏览器
  div → body → html → document → window
• 注意 : 不是所有的事件都能冒泡,以下事件不冒泡 : blur、focus、load、unload

事件传递示例:

    
    
    



    点我

按下按钮会发现出现

点确定后紧接着弹出

以上就是一个简单的事件传递案例了

---

阻止:

通常情况下我们明确自己的事件触发源，并不希望浏览器自作聪明、漫无目的地去帮我们找合适的事件处理程序，即我们明确最精准目标，这种情况下我们不需要事件冒泡。另外通过对事件冒泡的理解，我们知道程序将做多较多额外的事情，这必然增大程序开销。还有一个重要的问题是：事件冒泡处理可能会激活我们本来不想激活的事件，导致程序错乱，甚至无从下手调试，这常成为对事件冒泡不熟悉程序员的棘手问题。所以必要时，我们要阻止事件冒泡。

• 标准浏览器和ie浏览器
  w3c : event. stopPropagation()
IE : event. cancelBubble= true
• 兼容的写法

    if (event && event.stopPropagation) {//w3c标准
        event.stopPropagation();
    } else {//IE 6/7/8
        event.cancelBubble = true;
    }

• 想到哪个元素后阻止就写在哪个元素中

---

应用案例:

蒙版效果:

    
    
    


立即登录


    这里是登录信息哦!