Javascript event delegation
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript Techniques</title>
<script type="text/javascript">
var addListener = function() {
if ( window.addEventListener ) {
return function(el, type, fn) {
el.addEventListener(type, fn, false);
};
} else if ( window.attachEvent ) {
return function(el, type, fn) {
var f = function() {
fn.call(el, window.event);
};
el.attachEvent('on'+type, f);
};
} else {
return function(el, type, fn) {
element['on'+type] = fn;
}
}
}();
</script>
</head>
<body>
<div id='d1'>test</div>
<ul id="example">
<li id="li0">foo</li>
<li id="li1">bar</li>
<li id="li2">baz</li>
<li id="li3">thunk</li>
</ul>
<script type="text/javascript">
addListener(document.getElementById('d1'), 'click', getUserNameById);
function getUserNameById(e) {
alert('api function getUserNameById');
getUserNameById(this.id);
}
var element = document.getElementById('example');
addListener(element, 'click', handleClick);
function handleClick(e) {
var element = e.target || e.srcElement;
alert('target: ' + e.target + " currentTarget: " + e.currentTarget + " id: " + element.id + " this: " + this + " eventPhase: " + e.eventPhase);
}
</script>
</body>
</html>
event.target是指事件发生时的对象，可以是document中的任何一个node,包括text node。<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript Techniques</title>
<script type="text/javascript">
var addListener = function() {
if ( window.addEventListener ) {
return function(el, type, fn) {
el.addEventListener(type, fn, false);
};
} else if ( window.attachEvent ) {
return function(el, type, fn) {
var f = function() {
fn.call(el, window.event);
};
el.attachEvent('on'+type, f);
};
} else {
return function(el, type, fn) {
element['on'+type] = fn;
}
}
}();
</script>
</head>
<body>
<div id='d1'>test</div>
<ul id="example">
<li id="li0">foo</li>
<li id="li1">bar</li>
<li id="li2">baz</li>
<li id="li3">thunk</li>
</ul>
<script type="text/javascript">
addListener(document.getElementById('d1'), 'click', getUserNameById);
function getUserNameById(e) {
alert('api function getUserNameById');
getUserNameById(this.id);
}
var element = document.getElementById('example');
addListener(element, 'click', handleClick);
function handleClick(e) {
var element = e.target || e.srcElement;
alert('target: ' + e.target + " currentTarget: " + e.currentTarget + " id: " + element.id + " this: " + this + " eventPhase: " + e.eventPhase);
}
</script>
</body>
</html>
如果在捕捉阶段或者起泡阶段处理事件，事件event.target仍然都是指向发生事件的node上，但currentTarget却不是指向此node。
如上例子中点击的event.target是li元素时，ul上的事件处理是发生在起泡阶段(第3阶段)，而不是在AT_TARGET(2)阶段。此时的event.target指向li元素，event.currentTarget则是指向ul元素。
callback中的this与event.currentTarget在目前实现的addEventListener方法中是指向相同的元素，但最好不要用this.
Reference:
http://www.digital-web.com/articles/seven_javascript_techniques/
No comments :
Post a Comment