委托事件on
多个事件绑定同一个函数
$("#elem").on("mouseover mouseout",function(){ });通过空格分离,传递不同的事件名,可以同时绑定多个事件
多个事件绑定不同函数
$("#elem").on({
mouseover:function(){},
mouseout:function(){},
});通过空格分离,传递不同的事件名,可以同时绑定多个事件,每一个事件执行自己的回调方法
将数据传递到处理程序
function greet( event ) {
alert( "Hello " + event.data.name ); //Hello 慕课网
}
$( "button" ).on( "click", {
name: "慕课网"
}, greet );
可以通过第二参数(对象),当一个事件被触发时,要传递给事件处理函数的
委托事件的高级用法-把事件绑定在父元素上
.on( events ,[ selector ] ,[ data ], handler(eventObject) )
$("div").on("click","p",fn)
事件绑定在最上层div元素上,当用户触发在a元素上,事件将往上冒泡,一直会冒泡在div元素上。如果提供了第二参数,那么事件在往上冒泡的过程中遇到了选择器匹配的元素,将会触发事件回调函数
这样可以极大优化内存,事件都绑定在一个div上,而不是对每个div里面的p元素绑定事件,具体为什么有待讨论,一般都用这种写法
jquery1.7以前用live方法delegate方法等等,1.7以后用on
.off("事件名")删除委托事件
事件对象
事件对象是用来记录一些事件发生时的相关信息的对象。
事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁。
e.target ,target属性可以是注册事件的元素或者它的子元素。通常用event.target和this来确定事件是不是由于冒泡而触发的。e.target代表当前触发事件的元素,可以通过当前元素对象的一系列属性来判断是不是我们想想要的元素。
event.type 获取时间的类型 比如是click啊还是mousemove什么的
event.pageX,event.pageY 获取鼠标当前相当于页面的坐标
event.preventDefault() 阻止默认行为 比如a事件的跳转链接
event.stopPropagation() 阻止时间冒泡
event.which 获取鼠标单击时,单机的是鼠标的哪个键
event.currentTarget 在事件冒泡过程中的当前DOM元素
this和event.target的区别
this 是javascript的一个关键字,当函数运行时在内部自动生成,this指调用这个函数的对象,可以使用这个元素的javascript属性和方法,this会变
e.target 中的e是可以自己随意取名的,需要通过参数传过来。e.target就是触发这个事件的目标元素,e.target不会变
this其实就等于e.currentTarget,
this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(event.target);
如果你想知道.click,.bind,.unbind,.on,.off,.delegate,.undelegate他们的区别看我以前写的一篇文章