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

JS-DOM事件

2016-07-02 19:05 387 查看

事件处理程序

1 HTML事件处理程序：直接在HTML中加入执行代码。

缺点：HTML和JS代码紧密耦合在一起，如果要修改，就要两处都进行修改。

<script>
function showMessage(){
alert("hello world!");
}
</script>

<body>
<input type="button" value="按钮1" id="btn1" onclick="showMessage()" />
</body>

2 DOM 0级处理事件：把一个函数赋值给一个事件处理程序的属性。

优点：简单，跨浏览器

<body>
<input type="button" value="按钮2" id="btn2" />
</body>
<script>
var btn2=document.getElementById("btn2");
btn2.onclick=function(){
alert("hello world!");
}
btn2.onclick=null;
</script>

3 DOM 2级：定义了两个方法：addEventListener()和removeEventListener()，其中三个参数：要处理的事件名，作为事件处理程序的函数，布尔值（false是冒泡阶段，true 是捕获阶段）

注:DOM 2级不适用与于IE浏览器

<script>
function showMessage(){
alert("hello world!");
}
var btn2=document.getElementById("btn2");
btn2.onclick=function(){
alert("hello world!");
}
var btn3=document.getElementById("btn3");
//第一个参数必须把on去掉，例如onmouseover，要去掉on
btn3.addEventListener('click',showMessage,false);
//移除的参数必须与添加的一样
btn3.removeEventListener('click',showMessage,false);
</script>

DOM 0和DOM 2都可以为一个对象添加多个事件处理程序，按照代码的顺序来执行。

//先运行showMessage，再运行此按钮的value值
btn3.addEventListener('click',showMessage,false);
btn3.addEventListener('click',function(){
alert(this.value);
},false);

4 IE浏览器的程序处理

attachEvent()添加事件处理程序

detachEvent()移除

两个参数：要处理的事件名，作为事件处理程序的函数

没有第三个布尔值的原因：IE8以及之前的浏览器版本只支持冒泡事件。

需要加on

var btn4=document.getElementById("btn4");
btn4.attachEvent('onclick',showMessage);
btn4.detachEvent('onclick',showMessage);

5 跨浏览器事件处理

var evenUtil={
//添加句柄
addHander:function (element,type,handler) {
if (element.addEventListener) {
element.addEventListener(type,handler,false);
} else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}else{
//element.onclick等价于element['onclick']
element['on'+type]=handler;
}
}
}
evenUtil.addHander(btn3,'click',showMessage)

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

标签：

相关文章推荐

新的分享

章节导航