JavaScript事件绑定

JavaScript事件绑定的几种方式

方式一、直接事件绑定

a.在DOM中直接绑定事件 onclick onkeyup onmouseout ...

<div οnclick="clickme(event)">Click Me!</div>

function clickme(ev) {

// 行为

}

b.在JavaScript代码中绑定事件

<div id="clickme">Click Me!</div>

document.getElementById("clickme").onclick = function (ev) {

console.log(ev);

}

方式二、使用监听绑定事件 W3C规范：addEventListener() 或 IE标准：attachEvent()

事件监听的三个阶段：捕获阶段 -> 目标阶段 -> 冒泡阶段

W3C规范：addEventListener IE9以后支持W3C规范

语法：document.getElementById('id').addEventListener(event, function, useCapture);

useCapture: 指定事件执行的阶段，true:捕获阶段，false:冒泡阶段，默认false.

示例：

<div id="clickme">Click Me!</div>

document.getElementById("clickme").addEventListener('click', hello);

function hello(ev) {

console.log(ev);

}

IE标准：attachEvent

语法：document.getElementById('id').attachEvent('onclick', hello); // 注意要加"on"

示例：

<div id="clickme">Click Me!</div>

document.getElementById("clickme").attachEvent('onclick', hello);

function hello(ev) {

console.log(ev);

}

事件监听的优点：

a.可以添加多个事件，并同时执行；

b.可以解除监听；

document.removeEventListener('click', hello);

兼容IE9以前版本的处理方法：

// 添加监听

function addEventHandler (target, type, fn) {

if (target.addEventListener) {

target.addEventListener(type, fn);

} else {

target.attachEvent('on'+type, fn);

}

}

// 解除监听

function removeEventHandler (target, type, fn) {

if (target.removeEventListener) {

target.removeEventListener(type, fn);

} else {

target.deatch('on'+type, fn);

}

}

方式三、事件委托

利用冒泡的原理，将事件绑定到父元素或者祖父元素上，执行效果；

A、静态DOM

传统写法：

<ul id="list">

<li id="item1" >item1</li>

<li id="item2" >item2</li>

<li id="item3" >item3</li>

</ul>

<script>

var item1 = document.getElementById("item1");

var item2 = document.getElementById("item2");

var item3 = document.getElementById("item3");

item1.onclick = function(){

alert("hello item1");

}

item2.onclick = function(){

alert("hello item2");

}

item3.onclick = function(){

alert("hello item3");

}

</script>

事件委托：

<script>

var list = document.getElementById("list");

list.onclick = function (event) {

event = event || window.event;

var target = event.target || event.srcElement;

if (target == item1) {

fn1();

} else if (target == item2) {

fn2();

} else if (target == item3) {

fn3();

}

}

</script>

B、动态DOM(不用随着子元素DOM的改变而修改委托事件)

传统写法：

<script>

var list = document.getElementById("list");

var item = document.getElementByTag('li');

for (var i = 0; i < item.length; i++) {

(function (i) {

item[i].onclick = function () {

// 对应的执行函数

fn(i);

}

})();

}

</script>

事件委托：

<script>

var list = document.getElementById("list");

list.oncilck = function (event) {

event = event || window.event;

var target = event.target || event.srcElement;

if (target.nodeName == 'li') {

// 执行函数

}

}

</script>

或者 事件委托+监听

<script>

var list = document.getElementById("list");

list.addEventListener('click', function (event) {

event = event || window.event;

var target = event.target || event.srcElement;

if (target.nodeName == 'li') {

// 执行函数

}

})

</script>

转发：http://www.jb51.net/article/93752.htm