js:事件冒泡和时间捕获详解

来源:互联网 发布:json字符串格式化输出 编辑:程序博客网 时间:2024/05/21 04:18

记得刚学js的时候,对于事件冒泡和事件捕获总是一知半解,不知道能干嘛,有啥意义,就知道冒泡就是从你子节点一级一级向上触发。。。然而并不知道起本质和机制,应用等!今天小飞飞就带小伙伴们从新认识下这些究竟什么东西!
了解这些之前你必须知道这几个东西,什么event事件对象?,什么是事件流?
1.事件流:就是事件执行顺序.分为冒泡和捕获
冒泡:假如有一个div中包含一个p标签,我们同时给div和p标签添加click事件,如果我们点击p标签,首先会执行p标签绑定click事件,然后就会执行div标签绑定的click事件(因为p标签在div中,点击p就相当于你也点击了div),这种执行顺序就叫冒泡(逐个向上触发)
捕获:和上面相反的事件执行顺序

//html  <div style="width:800px;">    <p style="width:200px;">产品经理是sb</p>  </div>//js(为了方便我直接用jquery获取dom)  $("div").click({      alert("parent is clicked")  })  $("p").click({     alert("child is clicked")  })  点击p标签后依次弹出:      child is clicked      parent is clicked//这就是事件冒泡。这种绑定click事件事件流都是冒泡事件a.onclick=function(){ doanything} //这中传统的绑定事件方式都都是遵循是冒泡流的执行方式,无论在任何浏览器。

那么问题来了如何阻止这种事件冒泡,我只想点击p标签的时候触发p本身的绑定click事件,怎么办?ok,这我们就必须很清楚的任何什么是event对象。
1.event对象:代表事件的状态.例如键盘按键的状态、鼠标的位置、鼠标按钮的状态,只有事件发生时才会产生事件对象event.
event对象在ie中有个属性 cancelBubble(该属性代表事件句柄想阻止事件传播到包容对象),只要ie中只要设置这个属性为true,就可以阻止冒泡。但是仅仅只是ie。
event对象在非ie下有个方法叫做stopPropagation(),这个方法的意思就是不再派发事件,只要执行这个方法就可以阻止冒泡.

  //注意:event对象还有个方法是preventDefault() 这个意思是通知浏览器不要执行与事件关联的默认动作不要和冒泡混淆了,比如一个<a href="www.baidu.com"  onclick="javascript:window.event.preventDefault()">百度</a>//点击a链接后不会跳转
//html  <div style="width:800px;">    <p style="width:200px;">产品经理是sb</p>  </div>//js(为了方便我直接用jquery获取dom)  $("div").click({      alert("parent is clicked")  })  $("p").click({     alert("child is clicked")     var e=e||window.event  //兼容写法     e.cancleBubble=true //ie阻止事件向上派发     e.stopPropagation() //非ie的浏览器阻止事件向上派发  })  点击p标签后只弹出:      child is clicked

我们在敲击键盘,鼠标,各种触发动作的时候,就会产生一个event对象,这个event对象有各种属性 具体还是参考w3c吧
.
今天就写这么多吧,哦等等,我写几个和本文无关的js比较不常见的知识点:js的一元运算都有那些?哈哈 这个很冷,
一元运算: delete//直接删除一个对象的任何属性
一元运算: viod()//可以吧任何返回的数据或者数值变成undefined

 //js var ob=new object() ob.name="小飞飞" document.write(ob.name) // 输出 :小飞飞 delete ob.name //直接执行,name属性就删除了 document.write(ob.name) // 输出 :undefinedvar a=45document.write(a)//输出:45document.write(void(a))//输出:undefined
原创粉丝点击