jsイベント概要

1、js事件の概要
イベントの泡:
イベントを追加する方法:
1)、html事件処理手順
2)、dom 0級イベントハンドラ
3)、dom 2級イベントハンドラ
4)、IEイベントハンドラ
 

var eventUtil = {
/*
*   ：    
*   ：element dom  
*   ：type     (@example click)
*   ： handler       
*/
addEvent:function(element, type, handler) {
    if(element.addEventListener) {//DOM2     
    element.addEventListener(type, handler, false);
}else if(element.attachEvent) {//IE    
    element.attachEvent("on"+type, handler);
}else {//DOM0     
    element["on" + type] = handler;
}
},
/*
*   ：    
*   ：element dom  
*   ：type     (@example click)
*   ： handler       
*/
removeEvent:function(element, type, handler) {
    if(element.removeEventListener) {//DOM2     
        element.removeEventListener(type, handler, false);
    }else if(element.detachEvent) {//IE    
        element.detachEvent("on"+type, handler);
    }else {//DOM0     
        element["on" + type] = null;
    }
},
/*
*   ：      (window.event   IE   )
*/
getEvent:function(event) {
    return event?event:window.event;
},
/*
*   ：      
*/
getEventType:function(event) {
    return event.type;
},
/*
*   ：         (event.srcElement   IE   )
*/
getSrcElement:function(event) {
    return event.target || event.srcElement;
},
/*
 *   ：      
 */
stopPropagation:function(event) {
    if(event.stopPropagation) {
        event.stopPropagation();
    }else {
        event.cancleBubble = true;//  IE   
    }
},
/*
 *   ：         
 */
preventDefault:function(event) { 
    if(event.preventDefault) {
        event.preventDefault();
    }else {
        event.returnValue = false;//  IE   
    }
}
}

 
 
2、ドラッグ効果を実現する
1)マウス関連イベント
マウスイベントmousedownを押します.
マウスのイベントを移動
マウスをリリースするイベントmouseup
マウスイベントmouseoverに切り込む
マウスイベントmouseoutを描画します.
マウスのイベントclickをクリックします.