Html事件、Dom0级事件处理和Dom2级事件处理

1.在html代码元素中添加事件为Html事件。

2.使用元素的onclick方法为DOM0级事件处理。

3.使用事件添加方法为元素添加事件（

chrome:addEventListener,removeEventListener
IE:attachEvent,detachEvent

）为DOM2级事件处理。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div>
<input type="button" value="按钮" id="btn1" onclick="showMess()"/><!--DDDD-->
<input type="button" value="按钮2" id="btn2"/>
<input type="button" value="按钮3" id="btn3"/>
<script type="text/javascript">
function showMess()
{
    alert("html事件");
}
var btn2 =document.getElementById("btn2");
var btn3 =document.getElementById("btn3");
btn2.onclick=function(){
    alert("Dom0级处理程序");
}
btn2.onclick=null;/*btn2为Dom0级事件处理程序*/
/*var btn3 =document.getElementById("btn3");
btn3.addEventListener('click',showMess,false);
btn3.addEventListener('click',function(){
    alert("Dom2级处理程序");
},false);
btn3.removeEventListener('click',showMess,false);*/
/*btn3为Dom2级事件处理程序*/

//如下为添加对象兼容IE,谷歌或只支持Dom0级处理的浏览器
var eventUnit={
    addEventHandler:function(element,type,handler){
        if(element.addEventListener)
            {
                element.addEventListener(type,handler,false);
            }
            else if(element.attachEvent)
            {
                element.attachEvent(type,handler);
            }
            else
            {
                element['on'+type]=handler;
            }
        }
        ,
        removeEventHandler:function(element,type,handler){
            if(element.removeEventListener)
            {
                element.removeEventListener(type,handler,false);
            }
            else if(element.detachEvent)
            {
                element.detachEvent(type,handler);
            }
            else
            {
                element['on'+type]=null;
            }
        }
    }
eventUnit.addEventHandler(btn3,'click',showMess);
</script>
</div>
</body>
</html>

 

posted @ 2017-02-23 22:40  取经路上  阅读(1035)  评论(0)  编辑  收藏  举报