eventUtil.addHandler(btn3, 'click', function () { alert(this.value); }); 為什么 在IE和谷歌中出現(xiàn)不一樣的結(jié)果
<!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);//添加事件監(jiān)聽程序
? ? ? ? //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>
