//事件概述:(详见高三第十三章P350)
//“DOM2级事件”定义了两个方法:addEventListener()和removeEventListener()用于指定和删除事件处理程序的操作;
//(支持DOM2级事件处理程序的浏览器有IE9、FireFox、Safari、Chrome、Opera)
//IE实现了与DOM中类似的两个方法:attachEvent()和detachEvent()
//(支持IE事件处理程序的浏览器有IE、Opera)
window.onload = function () {
//---------给按钮绑定事件 Begin---------------
var version = window.navigator.userAgent.toString();
var btn = document.getElementById("btnOK");
var handler1 = function () {
alert("按钮被点击1!");
}
var handler2 = function () {
alert("按钮被点击2!");
}
var handler3 = function () {
alert("按钮被点击3!");
}
var handler4 = function () {
alert("按钮被点击4!");
}
var btnattach = document.getElementById("btnAttach");
//使用DOM0级方法指定HTML元素事件处理程序
//这是传统的方式,好处是:一简单,二具有跨浏览器的优势
btnattach.onclick = function () {
if (version.search("MSIE") > -1) {
alert("您使用的是IE浏览器!");
//使用IE事件处理程序
btn.attachEvent("onclick", handler3);
btn.attachEvent("onclick", handler4);
}
else if (version.search("Chrome") > -1) {
alert("您使用的是谷歌浏览器!");
//使用DOM2级事件处理程序
btn.addEventListener("click", handler1, false);
btn.addEventListener("click", handler2, false);
}
else if (version.search("Firefox") > -1) {
alert("您使用的是火狐浏览器!");
//使用DOM2级事件处理程序
btn.addEventListener("click", handler1, false);
btn.addEventListener("click", handler2, false);
}
else {
alert(version);
//使用DOM2级事件处理程序
btn.addEventListener("click", handler1, false);
btn.addEventListener("click", handler2, false);
}
}
//---------给按钮绑定事件 End---------------
//---------给按钮解除事件 Begin---------------
var btncancel = document.getElementById("btnCancel");
btncancel.onclick = function () {
if (version.search("MSIE") > -1) {
//使用IE事件处理程序
btn.detachEvent("onclick", handler3);
btn.detachEvent("onclick", handler4);
}
else if (version.search("Chrome") > -1) {
//使用DOM2级事件处理程序
btn.removeEventListener("click", handler1, false);
btn.removeEventListener("click", handler2, false);
}
else if (version.search("Firefox") > -1) {
//使用DOM2级事件处理程序
btn.removeEventListener("click", handler1, false);
btn.removeEventListener("click", handler2, false);
}
else {
//使用DOM2级事件处理程序
btn.removeEventListener("click", handler1, false);
btn.removeEventListener("click", handler2, false);
}
}
//---------给按钮解除事件 End---------------
}
-------------------- 封装事件处理程序 EventUtil.js --------------------------
/**********事件处理程序**********
*EventUtil.js
*浏览器兼容,《高三》13章 P354
*2014-12-8
********************************/
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;
}
},
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;
}
},
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;
}
},
/********由于IE不支持事件捕获,因此这个方法只适用于事件冒泡阶段*********/
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
}
else {
event.cancelBubble = true;
}
},
/*****按键时触发,返回按键所代表字符的ASCII码******/
getCharCode: function (event) {
if (typeof event.charCode == "number") {
return event.charCode;
}
else {
return event.keyCode; //IE8之前、Opera
}
}
}
转载于:https://www.cnblogs.com/zhaow/p/9754436.html