您的位置：首页 > Web前端 > JavaScript

JavaScript 事件处理程序的指派方式

2012-03-24 22:27 661 查看

在浏览器中,事件处理方式有三种:

1.在IE中,事件冒泡.事件是从事件发生的目标最内部开始触发,向上触发到最外部;

2.在Navigator4.0中,事件捕获.与冒泡刚好相反,他是从事件的最外层对象到最里层的对象;

3.在DOM中,同时支持事件捕获和事件冒泡.但是事件捕获先发生;

事件处理程序的指派方式有三种,分别是:

1.传统的事件处理程序指派方式.代码如下(body部分):

<body>

<input type="button" id="btnclick" value="点击" />

<script type="text/javascript">

var btn=document.getElementById("btnclick");

function hhh(){

alert("传统的事件处理程序指派方式,,,你点击了我");

}

btn.onclick=hhh;

</script>

</body>

2.现代事件处理程序的指派方法主要又分为IE浏览器和DOM提供的浏览器;具体如下:

<body>

<input type="text" id="text1" value="textname"/>;

<input type="button" id="btn1" value="addclick" />

<input type="button" id="btn2" value="deleclick" />

<script type="">

function click1(){

alert("input");

}

function click2(){

alert("body");

}

function click3(){

alert("html");

}

function deleclick(){//在IE中删除事件处理程序的方法

document.getElementById("btn1").detachEvent("onclick",click3);

}

function removeclick(){//在DOM中删除事件处理程序的方法

document.body.removerEventListener("click",click3,false);

}

if(document.attachEvent){//在 IE中

document.getElementById("btn1").attachEvent("onclick",click1);

document.getElementById("btn1").attachEvent("onclick",click2);

document.getElementById("btn1").attachEvent("onclick",click3);

//点击btn1时,得到的结果为:html->body->input

//点击btn2后,在点击btn1,得到色结果为: body->input

document.getElementById("btn2").attachEvent("onclick",deleclick);

}

else if(document.addEventListener){//在DOM中

document.getElementById("btn1").addEventListener("click",click1,false);//获取body元素的第一个子元素后添加事件处理程序的指派方式

document.body.addEventListener("click",click2,false);//获取body元素本身后添加事件处理程序的指派方式

document.documentElement.addEventListener("click",click3,false);//获取html元素本身后添加事件处理程序的指派方式

//当为false时,表明是冒泡, 即点击btn1时,得到的结果为:input->body->html

//当为true时,表明是捕获, 即点击btn1时,得到的结果为:html->body->input

document.getElementById("btn2").addEventListener("click",removeclick,false);

}

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航