JavaScript 教程学习笔记——事件 event(一)

2015-1-11 10:53:13     14 人阅读    

var btn = document.getElementById("btn");
var link = document.getElementById("link");
var textbox = document.getElementById("myText");

//跨浏览器的事件处理程序
var Handler = function() {
    alert("Hello!");
}
var EventUnit = {
    addHandler: function(element, type, Handler) {
        if(element.addEventListener) {
            element.addEventListener(type, Handler, false);
        } else if(element.attachEvent) {
            element.attachEvent('on' + type, Handler);
        } else {
            element['on' + type] = Handler;
        }
    },
    removeHandler: function(element, type, Handler) {
        if(element.removeEventListener) {
            element.removeEventListener(type, Handler, false);
        } else if(element.detachEvent) {
            element.detachEvent('on' + type, Handler);
        } else {
            element['on' + type] = null;
        }
    }
};

btn.onclick = function() {EventUnit.addHandler(btn, 'click', Handler);};//Hello!
//EventUnit.removeHandler(btn, 'click', Handler);


//DOM中的事件对象
var btn = document.getElementById("btn");
btn.onclick = function() {
    alert(event.type);//
};
btn.addEventListener("click",function(event) {
    alert(event.type);
},false);

btn.onclick = function(event) {
    alert(event.currentTarget === this);//true
    alert(event.target === this);//true
};
document.body.onclick = function(event) {
    alert(event.currentTarget === document.body);//true
    alert(this === document.body);//true
    alert(event.target === btn);//true
};
var handler = function(event) {
    switch(event.type) {
        case "click":
            alert("click");
            break;
        case "mouseover":
            event.target.style.backgroundColor = "red";
            break;
        case "mouseout":
            event.target.style.backgroundColor = "";
            break;
    }
};
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;

btn.onclick = function(event) {
    alert("clicked");
    event.stopPropagation();
};
document.body.onclick = function(event) {
    alert("body clicked!");//如果没有event.stopPropagation();则会看到有两个弹窗
};
btn.onclick = function(event) {
    alert(event.eventPhase);//2,事件处理程序处于目标对象上
};
document.body.addEventListener("click",function(event) {
    alert(event.eventPhase);//1,在捕获阶段调用事件处理程序
}, true);
document.body.onclick = function(event) {
    alert(event.eventPhase);//3,在冒泡阶段调用事件处理程序
};
//弹出顺序1>2>3

//IE中的事件对象
btn.onclick = function() {
    var event = window.event;
    alert(event.type);//click
};
btn.attachEvent("onclick", function(event) {
    alert(event.type);//click
});
btn.onclick = function() {
    alert(event.srcElement === this);//true
};
btn.attachEvent("onclick", function() {
    alert(event.srcElement === this);//false
});
btn.onclick = function() {
    alert("clicked");
    event.cancelBubble = true;//取消事件冒泡
};
document.body.onclick = function() {
    alert("Body clicked!");//无弹窗
};

//跨浏览器的事件对象
var EventUtil = {
    addHandler: function(element, type, Handler) {
        if(element.addEventListener) {
            element.addEventListener(type, Handler, false);
        } else if(element.attachEvent) {
            element.attachEvent('on' + type, Handler);
        } else {
            element['on' + type] = Handler;
        }
    },
    getEvent: function(event) {
        return event ? event: window.event;
    },
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    preventDefault: function(event) {
        if(event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    removeHandler: function(element, type, Handler) {
        if(element.removeEventListener) {
            element.removeEventListener(type, Handler, false);
        } else if(element.detachEvent) {
            element.detachEvent('on' + type, Handler);
        } else {
            element['on' + type] = null;
        }
    },
    stopPropagation: function(event) {
        if(event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    },

    //事件类型的相关元素
    getRelatedTarget: function(event) {
        if(event.relatedTarget) {
            return event.relatedTarget;
        } else if(event.toElement) {
            return event.toElement;//IE中,在mouseout事件触发时,toElement属性保存了相关元素
        } else if(event.fromElement) {
            return event.fromElement;//IE中,在mouseover事件触发时,fromElement属性保存了相关元素
        } else {
            return null;
        }
    },

    //鼠标按钮
    getButton: function(event) {
        if(document.implementation.hasFeature("MouseEvents", "2.0")) {
            return event.button;
        } else {
            switch(event.button) {
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                    return 0;
                case 2:
                case 6:
                    return 2;
                case 4:
                    return 1;
            }
        }
    },
    
    //字符编码
    getCharCode: function() {
        if(typeof event.charCode == "number") {
            return event.charCode;//FF,Ch,Sa
        } else {
            return event.keyCode;//IE,Op
        }
    }
};

btn.onclick = function(event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
};
link.onclick =  function(event) {
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
    EventUtil.stopPropagation(event);
};

btn.onclick = function(event) {
    event = EventUtil.getEvent(event);
    alert(event.type);
    EventUtil.stopPropagation(event);
};
document.body.onclick = function(event) {
    alert("Body clicked!");//无弹窗
};

//事件类型
var div = document.getElementById('myDiv');
EventUtil.addHandler(div, "click", function(event) {
    event = EventUtil.getEvent(event);
    //alert("Client coordination: " + event.clientX + "," + event.clientY);//客户区坐标位置
    //alert("Screen coordination: " + event.screenX + "," + event.screenY);//屏幕坐标位置

    var keys = [];
    if(event.shiftKey) {//修改键
        keys.push("shift");
    };
    if(event.ctrlKey) {
        keys.push("ctrl");
    };
    if(event.altKey) {
        keys.push("alt");
    };
    if(event.metaKey) {
        keys.push("mena");
    };
    //alert("keys: " + keys.join(","));

    EventUtil.addHandler(div, "mouseout", function(event) {//相关元素
        var target = EventUtil.getTarget(event);
        var relatedTarget = EventUtil.getRelatedTarget(event);
        //alert("Moused out of " + target.tagName.toLowerCase() + " to " + relatedTarget.tagName.toLowerCase());
    });

    EventUtil.addHandler(div, "mousedown", function(event) {//鼠标按钮
        alert(EventUtil.getButton(event));
    });

    EventUtil.addHandler(textbox, "keyup", function(event) {//键码
        alert(event.keyCode);//Sa,Ch支持
    });
    
    EventUtil.addHandler(textbox, "keypress", function(event) {//字符编码
        alert(EventUtil.getCharCode(event));//Sa,Ch支持
    });
    
    EventUtil.addHandler(textbox, "textInput", function(event) {//textInput事件
        alert(event.data);//Sa,Ch支持
    });
});


原文地址:http://www.itmmd.com/201501/472.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

JavaScript 教程学习笔记——事件 event(二)   上一篇
下一篇  以em为单位来布局页面的设置

精彩回复
发表评论
姓名:       

《程序员app》专门为程序员量身定做!