dom02 / 憋错料

dom02

事件对象：在触发DOM上的事件时dou都会产生一个对象，事件对象event

DOM中的事件对象

1）type属性用于获取事件类型

2）target属性用于获取事件目标

3）stopPropagation()方法用于阻止事件冒泡

4）preventDefault()阻止默认行为

bubbles,canselable属性

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>

<script type="text/javascript">
//dom中的事件对象：
    //type属性获取事件类型
    //target获取事件目标
    //stopPropagation阻止事件冒泡（最具体的元素接收）
    //preventDefault()阻止事件的默认行为

window.onload=function(){
    var btn2=document.getElementById(‘btn2‘);
    btn2.onclick=function(){
        alert(‘这个是dom0级添加的事件‘)
    }
// btn2.onclick=null;
   // var btn3=document.getElementById(‘btn3‘);
   /*  btn3.addEventListener(‘click‘,showMessage,false);
    btn3.addEventListener(‘click‘,function(){
        alert(this.value)
    },false);*/
    // btn3.removeEventListener(‘click‘,showMessage,false);
    // btn3.attachEvent(‘onclick‘,showMessage)

}
function showMessage(ev){
    alert(ev.target.nodeName);//目标节点名称//target获取事件目标//type获取事件类型
    ev.stopPropagation();//阻止事件冒泡（最具体的元素接收）
}
function showBox(){
    alert("这是一个box")
}
var eventUtil={
        //添加句柄
        // var element,type,handler;
        addHandler:function(element,type,handler){
            if(element.addEventListener){//dom二级
                element.addEventListener(type,handler,false)
            }else if(element.attachEvent){//IE
                element.attachEvent(‘on‘+type,handler);
            }else{//dom0级
                element[‘on‘+type]=handler;//element.onclick===element[‘onclick‘]
            }
        },//对象的属性用“，”分隔

    //删除句柄
        removeHandler:function(element,type,handler){
            if(element.removeEventListener){//dom二级
                element.removeEventListener(type,handler,false)
            }else if(element.detachEvent){//IE
                element.detachEvent(‘on‘+type,handler);
            }else{//dom0级
                element[‘on‘+type]=null;//element.onclick===element[‘onclick‘]
            }
        }
    }

</script>
</head>
<body>
<div id="box">
    <input type="button"  value="按钮" id="btn" onclick="showMessage()"/>
    <input type="button" value="按钮2" id="btn2"/>
    <input type="button" value="按钮3" id="btn3"/>
    <a href=""></a>
</div>
<script>
var btn3=document.getElementById(‘btn3‘);
var box=document.getElementById(‘box‘);
eventUtil.addHandler(btn3,‘click‘,showMessage);
eventUtil.addHandler(box,‘click‘,showBox);
// eventUtil.removeHandler(btn3,‘click‘,showMessage);
</script>
</body>

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>

<script type="text/javascript">
//dom中的事件对象：
    //type属性获取事件类型
    //target获取事件目标
    //stopPropagation阻止事件冒泡（最具体的元素接收）
    //preventDefault()阻止事件的默认行为

window.onload=function(){
    var btn2=document.getElementById(‘btn2‘);
    btn2.onclick=function(){
        alert(‘这个是dom0级添加的事件‘)
    }
// btn2.onclick=null;
   // var btn3=document.getElementById(‘btn3‘);
   /*  btn3.addEventListener(‘click‘,showMessage,false);
    btn3.addEventListener(‘click‘,function(){
        alert(this.value)
    },false);*/
    // btn3.removeEventListener(‘click‘,showMessage,false);
    // btn3.attachEvent(‘onclick‘,showMessage)

}
function showMessage(ev){
    alert(ev.target.nodeName);//目标节点名称//target获取事件目标//type获取事件类型
    ev.stopPropagation();//阻止事件冒泡（最具体的元素接收）
}
function showBox(){
    alert("这是一个box")
}
function stopGoto(event){
    event.stopPropagation();
    event.preventDefault();
}
var eventUtil={
        //添加句柄
        // var element,type,handler;
        addHandler:function(element,type,handler){
            if(element.addEventListener){//dom二级
                element.addEventListener(type,handler,false)
            }else if(element.attachEvent){//IE
                element.attachEvent(‘on‘+type,handler);
            }else{//dom0级
                element[‘on‘+type]=handler;//element.onclick===element[‘onclick‘]
            }
        },//对象的属性用“，”分隔

    //删除句柄
        removeHandler:function(element,type,handler){
            if(element.removeEventListener){//dom二级
                element.removeEventListener(type,handler,false)
            }else if(element.detachEvent){//IE
                element.detachEvent(‘on‘+type,handler);
            }else{//dom0级
                element[‘on‘+type]=null;//element.onclick===element[‘onclick‘]
            }
        }
    }

</script>
</head>
<body>
<div id="box">
    <input type="button"  value="按钮" id="btn" onclick="showMessage()"/>
    <input type="button" value="按钮2" id="btn2"/>
    <input type="button" value="按钮3" id="btn3"/>
    <a href="evnt.html" id="go">跳转</a>
</div>
<script>
var btn3=document.getElementById(‘btn3‘);
var box=document.getElementById(‘box‘);
eventUtil.addHandler(btn3,‘click‘,showMessage);
eventUtil.addHandler(box,‘click‘,showBox);
eventUtil.addHandler(go,‘click‘,stopGoto);
// eventUtil.removeHandler(btn3,‘click‘,showMessage);
</script>
</body>

</html>

</html>

时间： 2024-10-13 02:31:42

dom02的相关文章

JS基础语法之DOM02(事件）

1.常用事件 1.onclick 单击应用场景:为按钮绑定 2.ondbclick 双击 3.onfocus 获得焦点 4.onblur 失去焦点应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. 5.onchange 域的内容被改变应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动) 6.onkeydown 某个键盘按键被按下. 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. 2.绑定事件的方式: 1.在标

XML —— DOM方式解析XML

1. DOM 方式解析 XML 原理基于 DOM(Document Object Model,文档对象模型)解析方式,是把整个 XML 文档加载到内存,转化成 DOM 树,因此应用程序可以随机的访问 DOM 树的任何数据: 优点:灵活性强,速度快: 缺点:消耗资源比较多: 2. 元素 VS 节点 ( 节点包含元素 ) 节点包括元素节点.属性节点.文本节点 <?xml version="1.0" encoding="