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

源码-JavaScript&jQuery交互式前端开发-第6章-事件-使用事件委托

2016-09-27 14:04 1136 查看

示例效果：

JS代码：

function getTarget(e) {                          // Declare function
if (!e) {                                      // If there is no event object
e = window.event;                            // Use old IE event object
}
return e.target || e.srcElement;               // Get the target of event
}

function itemDone(e) {                           // Declare function
// Remove item from the list
var target, elParent, elGrandparent;           // Declare variables
target = getTarget(e);                         // Get the item clicked link

/*
The book used the following code - but it had two shortcomings
- Clicking between list items would remove the whole list
- Clicking on italic text would remove the link - not the list item

elParent = target.parentNode;
elGrandparent = target.parentNode.parentNode;
elGrandparent.removeChild(elParent);

The next 10 lines improve that example
*/

if ( target.nodeName.toLowerCase() == "a" ) {  // If user clicked on an a element
elListItem = target.parentNode;              // Get its li element
elList = elListItem.parentNode;              // Get the ul element
elList.removeChild(elListItem);              // Remove list item from list
}
if ( target.nodeName.toLowerCase() == "em" ) { // If the user clicked on an em element
elListItem = target.parentNode.parentNode;   // Get its li element
elList = elListItem.parentNode;              // Get the ul element
elList.removeChild(elListItem);              // Remove list item from list
}

// Prevent the link from taking you elsewhere
if (e.preventDefault) {                        // If preventDefault() works
e.preventDefault();                          // Use preventDefault()
} else {                                       // Otherwise
e.returnValue = false;                       // Use old IE version
}
}

// Set up event listeners to call itemDone() on click
var el = document.getElementById('shoppingList');// Get shopping list
if (el.addEventListener) {                       // If event listeners work
el.addEventListener('click', function(e) {     // Add listener on click
itemDone(e);                                 // It calls itemDone()
}, false);                                     // Use bubbling phase for flow
} else {                                         // Otherwise
el.attachEvent('onclick', function(e) {        // Use old IE model: onclick
itemDone(e);                                 // Call itemDone()
});
}

HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>JavaScript & jQuery - Chapter 6: Events - Event Delegation</title>
<link rel="stylesheet" href="css/c06.css" />
</head>
<body>
<div id="page">
<h1>List King</h1>
<h2>Buy groceries</h2>
<ul id="shoppingList">
<li class="complete"><a href="itemDone.php?id=1"><em>fresh</em> figs</a></li>
<li class="complete"><a href="itemDone.php?id=2">pine nuts</a></li>
<li class="complete"><a href="itemDone.php?id=3">honey</a></li>
<li class="complete"><a href="itemDone.php?id=4">balsamic vinegar</a></li>
</ul>
</div>
<script src="js/event-delegation.js"></script>
</body>
</html>
CSS代码：（参考：源码-JavaScript&jQuery交互式前端开发-第6章-事件-Focus和blur事件，http://blog.csdn.net/hpdlzu80100/article/details/52651002）

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

标签：

相关文章推荐

新的分享

章节导航