Пример:
Отобразить имя тега при нажатии по body:
"HTML"
<div id="log"></div> <div><strong><span>click</span></strong>
</div>
"CSS"
div.parent {background-color: #eef; width:200px;height:200px;}
div div { padding: 20px; background-color: red; width:100px;height:100px;}
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("body").click(function(event) {
$("#log").html("clicked: " + event.target.nodeName);
});
});
</script>
</head>
<body class="iframe">
<div id="log"></div>
<div>
<strong><span>click</span></strong>
</div>
</body>
</html>
<style>
div.parent {background-color: #eef; width:200px;height:200px;}
div div { padding: 20px; background-color: red; width:100px;height:100px;}
</style>
Пример:
Простой пример делегации события:
Обработчик события click добавлен к не пронумерованному списку, дочерние элементы li которого скрыты с помощью метода hide(). Однако при нажатии по одному из них, с помощью функции toggle происходит их отображение (см. метод toggle)
"jQuery"
function handler(event) {
var $target = $(event.target);
if( $target.is("li") ) {
$target.children().toggle();
}
}
$("ul").click(handler).find("ul").hide();
"HTML"
<ul>
<li>item 1
<ul>
<li>sub item 1-a</li>
<li>sub item 1-b</li>
</ul>
</li>
<li>item 2
<ul>
<li>sub item 2-a</li>
<li>sub item 2-b</li>
</ul>
</li>
</ul>
"CSS"
div.parent {background-color: #eef; width:200px;height:200px;}
div div { padding: 20px; background-color: red; width:100px;height:100px;}
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
function handler(event) {
var $target = $(event.target);
if( $target.is("li") ) {
$target.children().toggle();
}
}
$("ul").click(handler).find("ul").hide();
});
</script>
</head>
<body class="iframe">
<ul>
<li>item 1
<ul>
<li>sub item 1-a</li>
<li>sub item 1-b</li>
</ul>
</li>
<li>item 2
<ul>
<li>sub item 2-a</li>
<li>sub item 2-b</li>
</ul>
</li>
</ul>
</body>
</html>
<style>
div.parent {background-color: #eef; width:200px;height:200px;}
div div { padding: 20px; background-color: red; width:100px;height:100px;}
</style>