159 lines
4.7 KiB
HTML
159 lines
4.7 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
|
|
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<title>Using Event Utility and Event Delegation to Improve Performance</title>
|
|
|
|
<style type="text/css">
|
|
/*margin and padding on body element
|
|
can introduce errors in determining
|
|
element position and are not recommended;
|
|
we turn them off as a foundation for YUI
|
|
CSS treatments. */
|
|
body {
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
</style>
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
|
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
|
<script type="text/javascript" src="../../build/selector/selector-min.js"></script>
|
|
<script type="text/javascript" src="../../build/event-delegate/event-delegate-min.js"></script>
|
|
|
|
|
|
<!--begin custom header content for this example-->
|
|
<style type="text/css">
|
|
|
|
#list li {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#list li.selected {
|
|
background-color: red;
|
|
}
|
|
|
|
#list li.hover {
|
|
background-color: yellow;
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
<!--end custom header content for this example-->
|
|
|
|
</head>
|
|
|
|
<body class="yui-skin-sam">
|
|
|
|
|
|
<h1>Using Event Utility and Event Delegation to Improve Performance</h1>
|
|
|
|
<div class="exampleIntro">
|
|
<p>
|
|
Event delegation is a technique whereby you use a single event handler on a
|
|
parent element to listen for interactions that affect the parent's descendant
|
|
elements; because events on the descendant elements will bubble up to the
|
|
parent, this can be a reliable and extremely efficient mitigation strategy for
|
|
reducing the number of resource-consuming event handlers you have on any given
|
|
page. (<a href="http://yuiblog.com/blog/2007/01/17/event-plan/">You can read
|
|
more about Event Delegation in this YUIBlog article</a>.)
|
|
</p>
|
|
<p>
|
|
In the example below, mousing over an item in the list will change its
|
|
background color to yellow. Clicking an item will change its
|
|
background color to red. Because we're using event delegation, only one event
|
|
listener is needed for each type of event (<code>click</code>,
|
|
<code>mouseover</code>, and <code>mouseout</code>), regardless of the size of
|
|
the list. To illustrate this point, click the "Add Item" button to append more
|
|
items to list. An infinite number of items can be added to the list, and still
|
|
just one <code>click</code>, <code>mouseover</code>, and <code>mouseout</code>
|
|
event handler is required to highlight the items.
|
|
</p>
|
|
</div>
|
|
|
|
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
<div id="container">
|
|
<ul id="list">
|
|
<li id="li-1">List Item 1</li>
|
|
<li id="li-2">List Item 2</li>
|
|
<li id="li-3">List Item 3</li>
|
|
<li id="li-4">List Item 4</li>
|
|
<li id="li-5">List Item 5</li>
|
|
</ul>
|
|
</div>
|
|
<button id="add-item">Add Item</button>
|
|
|
|
<script type="text/javascript">
|
|
|
|
(function() {
|
|
|
|
var Dom = YAHOO.util.Dom,
|
|
Event = YAHOO.util.Event;
|
|
|
|
var onLIClick = function (event, matchedEl, container) {
|
|
|
|
if (Dom.hasClass(matchedEl, "selected")) {
|
|
Dom.removeClass(matchedEl, "selected");
|
|
}
|
|
else {
|
|
Dom.addClass(matchedEl, "selected");
|
|
}
|
|
|
|
};
|
|
|
|
// Use the "delegate" method to attach a "click" event listener to the
|
|
// container (<div id="container">). The listener will only be called if the
|
|
// target of the click event matches the element specified via the CSS
|
|
// selector passed as the fourth argument to the delegate method.
|
|
|
|
Event.delegate("container", "click", onLIClick, "li");
|
|
|
|
var onLIMouseOver = function (event, matchedEl, container) {
|
|
|
|
Dom.addClass(matchedEl, "hover");
|
|
};
|
|
|
|
var onLIMouseOut = function (event, matchedEl, container) {
|
|
|
|
Dom.removeClass(matchedEl, "hover");
|
|
|
|
};
|
|
|
|
|
|
// Use the "delegate" method to attach a mouseover and mouseout event listener
|
|
// to the container (<div id="container">). The listener will only be called
|
|
// if the target of the click event matches the element specified via the CSS
|
|
// selector passed as the fourth argument to the delegate method.
|
|
|
|
Event.delegate("container", "mouseover", onLIMouseOver, "li");
|
|
Event.delegate("container", "mouseout", onLIMouseOut, "li");
|
|
|
|
|
|
// Add a click event listener to the button that will add new items to the list
|
|
// to illustrate that new items can be added and the existing click, mouseover,
|
|
// and mouseout event listeners will apply to them as well.
|
|
|
|
Event.on("add-item", "click", function (event) {
|
|
|
|
var list = Dom.get("list"),
|
|
items = Dom.getChildren(list),
|
|
nItemNumber = (items.length + 1),
|
|
fragment = Dom.get("container").ownerDocument.createElement("div");
|
|
|
|
fragment.innerHTML = '<li id ="li-'+ nItemNumber +'">List Item ' + nItemNumber + '</li>';
|
|
|
|
list.appendChild(fragment.firstChild);
|
|
|
|
});
|
|
|
|
})();
|
|
|
|
</script>
|
|
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
</body>
|
|
</html>
|