                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /DOM事件探秘

最新edge和firefox測試

<!DOCTYPE html>
<html>
<head>
?<meta charset="UTF-8">
?<script type="text/javascript" src="js/script.js"></script>
?<title>Event測試</title>
</head>
<body>
?<div id="box">
??<input type="button" value="按鈕1" id="btn" onclick="showMes()">
??<input type="button" value="按鈕2" id="btn2">
??<input type="button" value="按鈕3" id="btn3">
??<a href="www.baidu.com" id="go">跳轉</a>
?</div>
?<script type="text/javascript">
??function showMes(event){
???alert("html事件處理程序");
??}
??function showBox(){
???alert("盒子Box");?
??}
??function showM(){
???alert("DOM2級事件處理程序");
??}
??var btn2=document.getElementById('btn2');
??var btn3=document.getElementById('btn3');
??var box=document.getElementById('box');
??//DOM0級事件處理程序
??box.onclick=showBox();
??btn2.onclick=function(){
???alert("DOM0級事件處理程序");
??}//不起作用
??btn2.onclick=function(){
???alert("DOM0級多個事件處理程序");
??}//起作用
?//?btn2.onclick=null; //去掉事件
??//DOM2級事件處理程序
??/*
???DOM2級可以添加多個事件處理程序
??*/
??btn3.addEventListener('click',showM,false);
??btn3.addEventListener('click',function(){alert(this.value)},false);
?//?btn3.removeEventListener('click',showM,false);?//刪除事件
?</script>
</body>
</html>