您的位置：首页 > 编程语言 > Java开发

DOM事件处理程序总结

2015-04-28 19:09 465 查看
今天学习了几种处理DOM事件的方法，特分享一下。

一、HTML事件处理程序

<pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DOM</title>
<script type="text/javascript">
function test(){
alert("你点击了");
}
</script>
</head>
<body>
<input id="btn" type="button" value="button" onclick="test()">
</body>
</html>




这种方法缺点：HTML代码和javascript代码混合在一起，不便于后期维护。如果需要修改函数名，牵一发而动全身。需同时修改两处代码，很容易出错。

二、DOM0级事件处理程序

<pre name="code" class="html"><span style="font-size:10px;"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DOM</title>
<script type="text/javascript">
window.onload = function(){
var btn1 = document.getElementById('btn');
btn1.onclick = function(){
alert("你点击了");
}
};
</script>
</head>
<body>
<input id="btn" type="button" value="button">
</body>
</html></span>



这是比较传统的方式，就是将一个函数赋值给一个事件处理程序属性。这种为事件处理程序赋值的方法是第四代Web浏览器中出现的，而且至今仍然为所有现代浏览器所支持。

三、DOM2级事件处理程序

IE中：

attachEvent(event, eventFun);

detachEvent(event, eventFun);

event：事件名称，如“onclick”、“onmouseover”、“onkeydown”等。

eventFun：js函数名称

<pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DOM</title>
<script type="text/javascript">
window.onload = function(){
var btn1 = document.getElementById('btn');
btn1.attachEvent("onclick",test);
};
function test(){
alert("你点击了");
}
</script>
</head>
<body>
<input id="btn" type="button" value="button">
</body>
</html>




非IE：

addEventListener(event, eventFun, catch);

removeEventListener(event, eventFun, catch);

event：事件名称，如“onclick”、“onmouseover”、“onkeydown”等。

eventFun：js函数名称

catch：是否使用捕捉，一般用
false 

<span style="font-size:10px;"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DOM</title>
<script type="text/javascript">
window.onload = function(){
var btn1 = document.getElementById('btn');
btn1.addEventListener("click",test,false);
};
function test(){
alert("你点击了");
}
</script>
</head>
<body>
<input id="btn" type="button" value="button">
</body>
</html></span>


2016/2/11补充

今天对点击事件的event有了新理解，下图展示了发生点击事件时event的属性


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                DOM
                                                js
                                                javascript
                                                事件
                                                事件流
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航