jQuery库-事件

事件处理

事件绑定

eventName(function(){})：绑定对应事件名的监听

$("div").click(function(){})

on(eventName,function(){})：通用的绑定事件监听

$("div").on("click",function(){})

优缺点：

• eventName(function(){})编码方便，但只能加一个监听，而且有的监听事件不支持
• on(eventName,function(){})编码不方便，可以添加多个监听，且更通用

事件解绑：off(eventName)

事件的坐标

• event.clientX，event.clientY：相对于视口的左上角
• event.pageX，event.pageY：相对于页面的左上角
• event.offsetX，event.offsetY：相对于事件元素的左上角

事件相关处理

• event.stopPropagation()：停止事件冒泡
• event.preventDefault()：组织事件默认行为

补充：如何区分mouseover与mouseenter？

mouseover：在移入子元素时也会触发绑定事件，对应mouseout

mouseenter：只有当移入当前元素时才会触发事件，对应mouseleave

 

事件委托

将多个子元素的事件监听委托给父辈元素处理，监听回调函数是加载在父辈元素上的。当我们操作任意一个子元素时，事件会冒泡到父辈元素。父辈元素不会直接处理事件，而是根据event.target得到发生事件的子元素，通过这个子元素调用事件回调函数。

这样做的好处是即使我们在父元素中添加新的子元素，这个子元素也会自动拥有事件响应处理；同时这样也减少了事件监听的数量，我们不需要为每一个子元素绑定事件监听。

事件委托API

• $(parentSelector).delegate(childrenSelector,eventName,callback)：设置事件委托
• $(parentSelector).undelegate(eventName)：移除事件委托

动画

淡入淡出

• fadeIn()：带动画的显示
• fadeOut()：带动画的隐藏
• fadeToggle()：带动画的切换显示/隐藏

滑动动画

• slideDown()：带动画的展开
• slideUp()：带动画的收缩
• slideToggle()：带动画的切换展开/收缩

显示隐藏，默认没有动画

• show()：（不）带动画的显示
• hide()：（不）带动画的隐藏
• toggle()：（不）带动画的切换显示/隐藏

 

onload跟ready的区别

window.onload

• 包括页面的图片加载完才会回调
• 只能有一个监听回调

$(document).ready()

• 等同于:$(function(){})，页面加载完毕就回调
• 可以有多个监听回调