js事件的分类和阻止冒泡事件

事件的类型:有鼠标事件，键盘事件，HTML事件，变化事件

注意：js中的事件前面要加on  （如：onclick   onmouseover），但jquery中的事件不需要加on  如（  $("Element").click   $("Element").mouseover  ）

鼠标事件:（最常用）

    click,dblclick,mousedown,,mouseupmouseout,mouseover,mousemove;
    事件属性:
       type:表明是什么事件;
       target(DOM)或srcElement(IE):表明触发事件的对象;
       shiftKey,ctrlKey,altKey,metaKey(DOM):是否按下了Shift,Ctrl,Alt,Meta键;
       button:0-未按下键;1-按左键;2-按右键;3-同时按下左右;4-按下中键;5-按下左和中;6-按下右和中;7-同时按下左中右;

键盘事件:

    keydown,keypress,keyup
    事件属性:
    keyCode:按下的键的代码(等于Unicode值)
    charCode(DOM):键对应的代码和字符会有一个分离;
    target(DOM)或srcElement(IE):表明触发事件的对象;
    shiftKey,ctrlKey,altKey,metaKey(DOM):是否按下了Shift,Ctrl,Alt,Meta键;

HTML事件:（窗口，文档，表单）

    load,upload,abort,error,select,change,submit,reset,resize,scroll,focus,blue

与window有关的有resize窗口调大调小事件,scroll滚动事件,

变化事件:（略）

    目前还没有主流浏览器支持,不讨论;

我们学过一些事件 :   onmouseover   onmouseout    onclick .....
btn.onclick = function(event) {  语句 }
event   单词翻译过来   事件 的意思 
event  就是事件的对象    指向的是 事件  是   onclick  
再触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。
比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。
普通浏览器支持 event  
ie 678 支持 window.event
所以我们 采取兼容性的写法 第一种 ： 
  var event = event || window.event; 
所以我们 采取兼容性的写法 第二种 ：
ev 是谷歌++等      event是ie6 7 8   
var oEvent=ev || event;

记住：获取event对象(兼容性写法)  var oEvent=event || window.event; 主流浏览器支持event，ie 678 支持window.event

<span style="font-size:18px;color:#993300;"><script>
window.οnlοad=function ()
{
	document.οnclick=function (event)
	{
		var oEvent=event|| window.event;    //<span style="color: rgb(255, 0, 0); font-family: 'Microsoft YaHei';font-size:24px;">兼容性写法</span>
		
		alert(oEvent.clientX+','+oEvent.clientY);
	};
};
</script></span>

DOM和IE的区别:
1)获取目标:
  IE:   var oTarget = oEvent.srcElement;
  DOM:  var oTarget = oEvent.target;
2)获取字符代码;(在键盘事件中)
  IE:   var iCharCode = oEvent.keyCode;
  DOM:  var iCharCode = oEvent.charCode;
3)阻止默认行为,例如:<a href="xxx" οnclick="" >aa</a>或者鼠标右键行为.
  IE:   oEvent.returnValue = false;
  DOM:  oEvent.preventDefault();
例如:阻止右键行为:
     document.body.oncontextmenu = function(oEvent){
          if(isIE){
              oEvent = window.event;
              oEvent.returnValue = false;
          }else{
              oEvent.preventDefault();
          }
      }
4)停止冒泡事件流(事件复制)
  IE:   oEvent.cancelBubble = true;
  DOM:  oEvent.stopPropagation();
  为何要停止冒泡?因为对象有层级关系window》document。有种可能是，某个DOM节点绑定了某事件监听器，本来是想当该DOM节点触发事件，才会执行回调函数。结果是该节点的某后代节点触发某事件，由于事件冒泡，该DOM节点事件也会触发，执行了回调函数，这样就违背了最初的本意了。