javascript冒泡事件、鼠标事件和dom实例详解

关于冒泡中的target和currentTarget

target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件的父级。

<p id="outer" style="background:#099"> 
      <p>我是目标p</p>  ----点击这部分，

输出：e.target.tagName : P || e.currentTarget.tagName : p <p id="inner" style="background:#9C0">我是目标p</p> ----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : p <br> ----点击这部分，输出：e.target.tagName : p || e.currentTarget.tagName : p </p> //看下第二个变列： <p id="outer" style="background:#099"> <p>我是目标p</p> ----点击这部分，输出：e.target.tagName : p || e.currentTarget.tagName : p <p id="inner" style="background:#9C0">我是目标p</p> ----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : p <br> ----点击这部分，输出：e.target.tagName : p || e.currentTarget.tagName : p </p>

IE和DOM区别
DOM IE
获取目标 event.target event.srcElement
获取字符代码 event.charCode event.keyCode
阻止默认行为 event.prevetDefault() event.returnvalue=false
冒泡 event.stopPropagation() event.cancelBubble=true

关于阻止默认行为，比如，当用户右击鼠标时，如果你不想菜单弹出，则可以使用阻止默认行为：

鼠标事件

<p>use your mouse to click and double click the red square</p>
<p style="width:100px;height:100px;background:red"
    onmouseover="handleEvent(event)"
    onmouseout="handleEvent(event)"
    onmousedown="handleEvent(event)" 
    onmouseup="handleEvent(event)"  
    onclick="handleEvent(event)" 
    ondblclick="handleEvent(event)" id="p1"
   >       
</p>
<p><textarea id="txt1" rows="5" cols="45"></textarea></p>
<!--检测键盘事件-->
<p><input type="text" id="textbox" 
      onkeydown="handle(event)"
      onkeypress="handle(event)"
      onkeyup="handle(event)"
     ></p>
<p><textarea id="txt2" rows="10" cols="45"></textarea></p>

js文件如下：

以上就是javascript冒泡事件、鼠标事件和dom实例详解的详细内容，更多请关注Gxl网其它相关文章！