事件委托 $().hover
<style>
div{
border: 3px solid black;
}
h1{
border: 3px solid red;
}
</style>
<body>
<div>我是div
<h1>我是h1标签</h1>
</div>
<script src="./jquery.min.js"></script>
<script>
// 鼠标的移入移出事件
// 子级标签经过边界线:触发 出父级,进子级
//
// $('div').mouseover(function(){
// console.log('我进来了');
// }).mouseout(function(){
// console.log('我出去了')
// })
// 特殊的事件 $().hover
// 参数1:鼠标移入事件处理函数
// 参数2:鼠标移出事件处理函数
// 经过子级不会触发,效果类似, mouseenter 和 mouseleave
$('div').hover( function(){console.log('进进')} , function(){console.log('出出')} )
</script>
</bod
事件委托 $().one()
<body>
<div>我是div</div>
<script src="./jquery.min.js"></script>
<script>
// 特殊的事件委托2
// $().one() 只会执行一次的事件委托
// 点击事件只会触发一次
$('div').one('click' , function(){
console.log(123);
})
</script>
</body>
事件委托$().trigger()
我是div
<script src="./jquery.min.js"></script>
<script>
// 特殊的事件委托3
// $().trigger() 不用触发,直接会执行的事件
// 1,先给标签绑定事件类型和事件处理函数
$('div').click(function(){
console.log(123);
}).click(function(){
console.log(456)
})
// 不同点击,就先执行一次,事件类型上绑定的事件处理函数
// 将绑定的这个类型的所有事件处理函数都执行一次
// 绑定几个执行几个
$('div').trigger('click');
</script>
事件委托 $(window).ready()
<body>
<!-- 通过调整 network 中 Slow 3G 修改为比较慢的网速,让图片有一个加载过程 -->
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1121833438,3473430102&fm=26&gp=0.jpg" alt="">
<script src="./jquery.min.js"></script>
<script>
// 特殊的事件委托4
// $(window).ready(function(){})
// 页面内容加载函数
// 作用类似于 window.onload
// 但是有区别
// $(window).ready 只要标签加载完毕就判定,页面加载完毕
// 至于标签内容,比如图片内容,可以没有加载完毕
// window.onload , 必须是标签和标签内容,都加载完毕,才会判定,页面加载完毕
// 也就是图片的img标签,和图片的内容,必须都加载完毕
window.onload = function(){
console.log('我是onload输出的,我是表示页面加载完毕');
}
$(window).ready(function(){
console.log('我是ready输出的,我也表示页面加载完毕');
})
</script>
