jQuery基础(三)- 事件篇
1、jQuery鼠标事件之click与dbclick事件
click方法用于监听用户单击操作,dbclick方法用于监听用户双击操作,这两个方法用法及其类似,所以这只介绍click事件,只有单击释放后才生效,而且同一元素不能同时绑定click和dbclick事件
方法一:$ele.click()
click无参,只是绑定一个事件,在函数里可以实现其他的绑定事件
方法二:$ele.click(handler(eventObject))
click的参数是函数(回调函数),单击会执行函数里的操作,如果里面含有this,this指向触发事件元素的对象
方法三:$ele.click([eventData], handler(eventObject))
click增加了一个参数,和上面的功能是一样的,只不过传递了一个数据,即eventObject.data = eventData
//不同函数传递数据
function data(e) {
$(this).find('p:last').html('数据:' + e.data)
}
function a() {
$(".right").click(1111, data)
}
a();
注:只有鼠标按钮键which值为1(即鼠标左键)才会实现所绑定的事件
2、jQuery鼠标事件之mousedown与mouseup事件
mousedown方法用于监听用户鼠标按下操作,只有鼠标按下后才生效,mouseup方法用于监听用户鼠标松开操作,只有鼠标松开后才生效,这两个方法用法及其类似,所以这只介绍mousedown事件。
方法一:$ele.mousedown()
mousedown 无参,只是绑定一个事件,在函数里可以实现其他的绑定事件
方法二:$ele.mousedown(handler(eventObject))
mousedown 的参数是函数(回调函数),鼠标按下后会执行函数里的操作,如果里面含有this,this指向触发事件元素的对象
方法三:$ele.mousedown([eventData], handler(eventObject))
mousedown增加了一个参数,和上面的功能是一样的,只不过传递了一个数据,即eventObject.data = eventData
注:mousedown强调按下,mouseup强调松开;如果点击按住不放并离开元素,还是会实现所绑定的事件;任何鼠标按钮都会实现所绑定的事件; 用event 对象的which区别按键,敲击鼠标左键which的值是1,敲击鼠标中键which的值是2,敲击鼠标右键which的值是3
3、jQuery鼠标事件之mousemove事件
mousemove方法用于监听用户鼠标指针移动的操作,只有鼠标指针移动就生效,只在绑定事件的元素的区域里。
方法一:$ele.mousemove()
mousemove 无参,只是绑定一个事件,在函数里可以实现其他的绑定事件
方法二:$ele.mousemove(handler(eventObject))
mousemove 的参数是函数(回调函数),鼠标指针移动会执行函数里的操作,如果里面含有this,this指向触发事件元素的对象
//绑定一个mousemove事件
//触发后修改内容
$(".aaron1").mousemove(function(e) {
$(this).find('p:last').html('移动的X位置:' + e.pageX)
})
方法三:$ele.mousemove ([eventData], handler(eventObject))
mousemove 增加了一个参数,和上面的功能是一样的,只不过传递了一个数据,即eventObject.data = eventData
注:mousemove 强调鼠标指针移动;如果处理器做任何重大的处理,或者如果该事件存在多个处理函数,这可能造成浏览器的严重的性能问题
4、jQuery鼠标事件之mouseover与mouseout事件
mouseover方法用于监听用户鼠标移入操作,只有鼠标移入区域内后才生效,mouseout方法用于监听用户鼠标移出操作,只有鼠标移除区域后才生效,处理事件的过程中会有事件冒泡,这两个方法用法及其类似,所以这只介绍mouseover事件。
方法一:$ele.mouseover ()
mouseover 无参,只是绑定一个事件,在函数里可以实现其他的绑定事件
方法二:$ele.mouseover (handler(eventObject))
mouseover 的参数是函数(回调函数),鼠标移入后会执行函数里的操作,如果里面含有this,this指向触发事件元素的对象
方法三:$ele.mouseover ([eventData], handler(eventObject))
mouseover 增加了一个参数,和上面的功能是一样的,只不过传递了一个数据,即eventObject.data = eventData
注:mouseover 强调鼠标移入区域内,mouseover 强调鼠标移除区域;
5、jQuery鼠标事件之mouseenter与mouseleave事件
这和第四点的基本功能,理论知识点是一模一样的,不加赘述。但是他们最主要的区别是第四点可能会处理冒泡事件,这第五点是不会处理冒泡事件
6、jQuery鼠标事件之hover事件
这个事件是第五点的总结方法,所以他也不会处理冒泡事件,即悬停事件,在元素区域内悬停(移入),在元素外(移出)
方法:$ele.hover(
handlerIn(eventObject) ,
handlerOut(eventObject))
handlerIn(eventObject):当鼠标指针进入元素时触发执行的事件函数
handlerOut(eventObject):当鼠标指针离开元