eventUtil.addHandler(btn3, 'click', function () { alert(this.value); }); 为什么 在IE和谷歌中出现不一样的结果
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>事件流</title>
<script src="Scripts/jquery-1.10.2.js"></script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="showMessage()" />
<input type="button" value="按钮2" id="btn2" />
<input type="button" value="按钮3" id="btn3" />
</div>
<script type="text/javascript">
//function showMessage(){
//alert('这是html事件处理程序');
//}
//var btn2 = document.getElementById("btn2");
//btn2.onclick = function(){
//alert('这是通过DOM0级添加的事件');
//}
function showMessage() {
alert("Hello World!")
}
var btn2 = document.getElementById("btn2");
btn2.onclick = function () {
alert('这是通过DOM0级事件添加的事件')
};
btn2.onclick = null;
//DOM2级事件
//btn3.addEventListener('click',showMessage,false);//添加事件监听程序
//btn3.addEventListener('click', function () {
// alert(this.value);
//}, false);
////删除事件
//btn3.removeEventListener('click', showMessage, false);
//IE浏览器
//btn3.attachEvent('onclick', showMessage);
//btn3.detachEvent('onclick', showMessage);
var eventUtil = {
//添加句柄
addHandler: function (element, type, handler) {
if (element.addEventListener) { //DOM 2级判断
element.addEventListener(type, handler, false);
}
else if (element.attachEvent) { //IE事件处理程序判断
element.attachEvent('on' + type, handler);
}
else {
HTML事件处理程序
element['on' + type] = handler; //element.onclick===element['onclick']
}
},
//删除句柄
removeHandler: function (element, type, handler) {
if (element.removeEventListener) { //DOM 2级判断
element.removeEventListener(type, handler, false);
}
else if (element.detachEvent) { //IE事件处理程序判断
element.detachEvent('on' + type, handler);
}
else {
HTML事件处理程序
element['on' + type] = null;
}
}
}
eventUtil.addHandler(btn3, 'click', function () {
alert(this.value);
});
eventUtil.addHandler(btn3, 'click', showMessage);
</script>
</body>
</html>
