Event事件

Event事件

<div id="mydiv" onclick="userClick(this)"  abc="12345">
　　<img src="/com/pic/plus.gif" title="12" >  <!-title 鼠标放到img上就会显示title的内容  -->

　　<text title="34">啦啦啦啦啦啦啦</text> <!-title  鼠标放到text上就会显示title的内容  -->
</div>

<script >
function userClick(obj) {
  if(window.event){
　 var tagName=(event.target||event.srcElement).tagName;  //事件对象:火狐event.target   IE event.srcElement）
　 if(tagName.toUpperCase()=="IMG"){  //鼠标单击时如果是单击到img图片上时
　　　alert("单击了图片");
　　　event.cancelBubble=true; //禁止冒泡事件    
　　}else if(tagName.toUpperCase()=="TEXT"){  //鼠标单击时如果是单击到text文本框上时
　　　alert("单击了text");
　　}
　}
　　var cc = obj.getAttribute("abc");  //获得abc的值
　　alert(cc);
}</script>

冒泡事件：

什么是冒泡事件？

参考百度百科：https://baike.baidu.com/item/%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1/4211429

参考好文章（这个好）http://caibaojian.com/javascript-stoppropagation-preventdefault.html

事件注意点
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等；

event对象只在事件发生的过程中才有效。

firefox里的event跟IE里的不同，IE里的是全局变量，随时可用；firefox里的要用参数引导才能用，是运行时的临时变量。
在IE/Opera中是window.event，在Firefox中是event；

而事件的对象，在IE中是window.event.srcElement，在Firefox中是event.target，Opera中两者都可用。

//下面两句效果相同：
function a(e){
　var e = (e) ? e : ((window.event) ? window.event : null); 
　var e = e || window.event; // firefox下window.event为null, IE下event为null
}

在火狐Firefox、opera、IE下阻止冒泡事件是不同的代码的，火狐下使用的是event.stopPropagation()，而IE下使用的是cancelBubble，jQuery 可以使用e.stopPropagation()就可以兼容了，

如果是纯粹的JavaScript需要下面的代码来统一：

if (event.stopPropagation) {
　　// Mozilla and Opera
　　event.stopPropagation(); 
} 
else if (window.event) { 
    // IE 
  window.event.cancelBubble = true; 
}