<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#btn{width: 100px;height: 40px;}
</style>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById('btn');
// 想要下面的鼠標點擊事件都實現,但這種寫法,不能實現 a和b 都彈出。
oBtn.onclick=function(){
alert('a');
};
oBtn.onclick=function(){
alert('b');
};
};
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="點擊" />
</body>
</html>
要實現 a 和 b 都能被彈出 (同時還有考慮瀏覽器兼容性問題),以下的代碼可實現 , 但下面兩種方式,每個都只能是針對一種類型的瀏覽器, 即 IE瀏覽器 和 非IE(谷歌、火狐)
1、對 I E 瀏覽器 起作用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#btn{width: 100px;height: 40px;}
</style>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById('btn');
//要把 a和b 都被彈出, 用到事件的綁定
//attachEvent() 只針對IE 有效
oBtn.attachEvent('onclick',function(){
alert('a');
});
oBtn.attachEvent('onclick',function(){
alert('b');
});
};
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="點擊" />
</body>
</html>
2、對 非 IE 瀏覽器 起作用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#btn{width: 100px;height: 40px;}
</style>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById('btn');
//要把 a和b 都被彈出, 用到事件的綁定
//addEventListener() 只針對非IE 有效
oBtn.addEventListener('click',function(){
alert('a');
},false);
oBtn.addEventListener('click',function(){
alert('b');
},false);
};
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="點擊" />
</body>
</html>