Javascript 事件处理-CSDN博客

Javascript 事件处理

1. HTML事件处理

就是嵌入到html元素中的事件处理，如：

<button type="button" id="btn" οnclick="alert('Hello World!')">按钮</button>

这种事件处理的可扩展性是不好的，且无法为同一DOM元素绑定多个事件。

2. DOM0级事件处理

即可以写在script标签中，也可以写在js文件中的事件处理方法，如：

<script>

var btn = document.getElementById('btn');

// 添加事件

btn.onclick = function() {

alert('Hello World!');

}

// 删除事件

btn.onclick = null;

</script>

3.DOM2级事件处理

即使用事件监听的方式，为DOM元素绑定事件，如：

<script>

var btn = document.getElementById('btn');

// 添加事件

btn.addEventListener('click', handler, false);

// 删除事件

btn.removeEventListener('click', handler, false);

</script>

这里分别传入了三个参数，依此为：事件名称、事件句柄、事件流类型。

事件名称：是指 click、mouseover 等具体的触发条件。

事件句柄：是指触发事件后需要执行的操作。

事件流类型：包含两种，一种是事件冒泡流（false），一种是事件捕获流（true），而事件冒泡流的各浏览器的兼容性较好，所以一般采用事件冒泡流。

值得注意的是，这里的添加事件和删除事件需要传入相同的参数，否则无法删除事件。

4.IE事件处理程序

IE、Opera浏览器不支持DOM2级事件处理，它有自己的处理方法，如：

<script>

var btn = document.getElementById('btn');

// 添加事件

btn.attachEvent('onclick', handler);

// 删除事件

btn.detachEvent('onclick', handler);

</script>

这里只需要传入两个参数，即事件名称和事件句柄，是因为IE及Opera浏览器默认只支持事件冒泡流，所以无需指定事件流类型。

同样要注意，这里的添加事件和删除事件也需要传入相同的参数，否则无法删除事件。

5.兼容性处理

为了兼容不同浏览器，通常需要自行编写兼容的事件处理方法，如：

<script>

var eventHandler = {

// 添加事件

addEventHandler: function(element, type, handler) {

if( type.indexof('on') >= 0 ) {

type = type.substring(0, 2);

}

if( element.addEventListener ) {

element.addEventListener(type, handler, false);

} else if( element.attachEvent ) {

element.attachEvent('on'+type, handler);

} else {

element['on'+type] = handler;

}

},

// 删除事件

removeEventHandler: function(element, type, handler) {

if( type.indexof('on') >= 0 ) {

type = type.substring(0, 2);

}

if( element.removeEventListener ) {

element.removeEventListener(type, handler, false);

} else if( element.detachEvent ) {

element.detachEvent('on'+type, handler);

} else {

element['on'+type] = null;

}

}

}

</script>

如此就实现了跨浏览器兼容事件处理，调用方法：

<script>

var btn = document.getElementById('btn');

// 添加事件

eventHandler.addEventHandler(btn, 'click', handler);

// 删除事件

eventHandler.removeEventHandler(btn, 'click', handler);

</script>