jQuery的高级事件处理
jQuery的事件委托
操作案例
建立一个简单的影集，影集中会显示一组照片，点击添加连接会有更多的图片
当用户把光标移动到每一张照片时，会显示对应的文字
相关html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.4.1.js"></script>
<style>
#container{
margin: 0 auto;
width: 1000px;
background-color: #ccc;
}
#gallery>.photo>img{
height: 160px;
width: 158px;
}
#gallery{
width: 800px;
margin:0 auto;
height: 1200px;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-around;
}
#gallery>.photo{
border: 9px solid #fff;
border-radius: 12px;
height: 160px;
width: 158px;
position: relative;
}
#gallery>.photo>.details{
position: absolute;
top:0;
left:0;
opacity: 0 ;
}
</style>
</head>
<body>
<div id="container">
<h1>Photo Gallery</h1>
<div id="gallery">
<div class="photo">
<img src="/img/phone3.jpg" alt="">
<div class="details">
<div class="description">
amet consectetur
</div>
<div class="date">
voluptatem culpa
</div>
<div class="photographer">
modi molestias
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone4.jpg" alt="">
<div class="details">
<div class="description">
Lorem ipsum
</div>
<div class="date">
recusandae dicta,
</div>
<div class="photographer">
elit. Hic ut velit
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone.jpeg" alt="">
<div class="details">
<div class="description">sectetur adipisicing
</div>
<div class="date">
aperiam voluptate
</div>
<div class="photographer">
dolore nisi molestias
</div>
</div>
</div>
<div class="photo">
<img src="/img/flower.jpg" alt="">
<div class="details">
<div class="description">
dolor, sit
</div>
<div class="date">
voluptatem culpa
</div>
<div class="photographer">
olore nisi
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone3.jpg" alt="">
<div class="details">
<div class="description">
amet consectetur
</div>
<div class="date">
voluptatem culpa
</div>
<div class="photographer">
modi molestias
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone4.jpg" alt="">
<div class="details">
<div class="description">
Lorem ipsum
</div>
<div class="date">
recusandae dicta,
</div>
<div class="photographer">
elit. Hic ut velit
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone.jpeg" alt="">
<div class="details">
<div class="description">sectetur adipisicing
</div>
<div class="date">
aperiam voluptate
</div>
<div class="photographer">
dolore nisi molestias
</div>
</div>
</div>
<div class="photo">
<img src="/img/flower.jpg" alt="">
<div class="details">
<div class="description">
dolor, sit
</div>
<div class="date">
voluptatem culpa
</div>
<div class="photographer">
olore nisi
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone3.jpg" alt="">
<div class="details">
<div class="description">
amet consectetur
</div>
<div class="date">
voluptatem culpa
</div>
<div class="photographer">
modi molestias
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone4.jpg" alt="">
<div class="details">
<div class="description">
Lorem ipsum
</div>
<div class="date">
recusandae dicta,
</div>
<div class="photographer">
elit. Hic ut velit
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone.jpeg" alt="">
<div class="details">
<div class="description">sectetur adipisicing
</div>
<div class="date">
aperiam voluptate
</div>
<div class="photographer">
dolore nisi molestias
</div>
</div>
</div>
<div class="photo">
<img src="/img/flower.jpg" alt="">
<div class="details">
<div class="description">
dolor, sit
</div>
<div class="date">
voluptatem culpa
</div>
<div class="photographer">
olore nisi
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone3.jpg" alt="">
<div class="details">
<div class="description">
amet consectetur
</div>
<div class="date">
voluptatem culpa
</div>
<div class="photographer">
modi molestias
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone4.jpg" alt="">
<div class="details">
<div class="description">
Lorem ipsum
</div>
<div class="date">
recusandae dicta,
</div>
<div class="photographer">
elit. Hic ut velit
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone.jpeg" alt="">
<div class="details">
<div class="description">sectetur adipisicing
</div>
<div class="date">
aperiam voluptate
</div>
<div class="photographer">
dolore nisi molestias
</div>
</div>
</div>
</div>
<a id="more-photos" href="pages/1.html">More Photos</a>
</div>
</body>
</html>
对应的js代码: 追加数据页面
$(document).ready(function(){
var pageNum=1;
$('#more-photos').click(function(event){
event.preventDefault();
var $link=$(this);
var url=$link.attr('href');
if(url){
$.get(url,function(data){
$('#gallery').append(data);
});
pageNum++;
if(pageNum<=3){
$link.attr('href','pages/'+pageNum+'.html');
}else{
$link.remove();
}
}
});
}
悬停时显示数据：
1 $('div.photo').on('mouseenter mouseleave',function(event){ 2 var $details=$(this).find('.details'); 3 if(event.type=='mouseenter'){ 4 $details.fadeTo('fast',0.7); 5 }else{ 6 $details.fadeOut('fast'); 7 } 8 });
实现效果
出现上述问题的原因：事件处理程序只会添加到调用on()方法时已经存在的元素上。
解决以上问题的方法：事件委托
jQuery的委托方法：
在把div.photo作为第二个参数的情况下，.on方法会把this关键字映射为#gallery中与该选择符匹配的元素
$('#gallery').on('mouseenter mouseout','div.photo',function(event){
var $details=$(this).find('.details');
if(event.type=='mouseenter'){
$details.fadeTo('fast',0.7);
}else{
$details.fadeOut('fast');
}
})
选择委托的作用域：
照片元素的任何祖先元素都可以作为委托的作用域
$(document).on('mouseenter mouseleave','div.photo',
function(event){
var $details=$(this).find('.details');
if(event.type=='mouseenter'){
$details.fadeTo('fast',0.7);
}else{
$details.fadeOut('fast');
}
});
早委托：我们选择docoment作为委托作用域，document元素是随着页面加载
几乎立即就可以调用的，绑定在document处理程序如果放在$(document).ready()中
就要等待整个DOM构建完成才能执行绑定，使用立即被调用的函数表达式可以在整
个文档未就绪的情况下，确保所有的div.photo元素只要呈现在页面上就可以应用上
mouseover和mouseleave行为。
(function($){
$(document).on('mouseenter mouseleave','div.photo',
function(event){
var $details=$(this).find('.details');
if(event.type=='mouseenter'){
$details.fadeTo('fast',0.7);
}else{
$details.fadeOut('fast');
}
}
)
})(jQuery);
早委托的好处：假设一个click事件绑定在一个链接上，这个事件处理程序要执行
某些操作，同时要阻止链接的默认行为。如果等文档就绪之后，再绑定它，那很可能
在绑定处理程序之前用户已经点击该链接离开了当前页面。