<!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>