jQuery事件模型
提供了统一的事件处理方法
运行添加多个事件处理函数
使用标准事件名称(不带on)
事件实例作为时间处函数的第一个参数
标准化事件实例的最常用的属性
提供了统一的事件取消和组织默认行为的方法
添加事件处理
on(eventType[,selector][,data],handler) 参数:事件名称,选择器,数据,事件处理函数
比如
<script>
$(function(){
$('p').on('click',null,null,function(event)
{
console.log('p clicked');
}
})
</script>
null不写也可以,可以链式绑定多个时间处理函数
第二个参数过滤比如'#p1-1'
第三个参数穿数据比如{ foo : 'bar'}
可以在函数里event.data获取到
事件委托:在父元素上绑定事件,再.target得到选择的对象
统一事件方法和属性
阻止冒泡stopPropagation()
阻止默认行为preventDefault()
阻止冒泡和默认行为return false
就是在事件里调用event.stopPropagation()这种
一次性的时间处理
one(eventType[,selector][,data],handler)
只执行一次
移除事件处理
off(eventType[,selector],handler)
不带任何参数就把所有事件处理都移除
红色表示有浏览器兼容问题,jq对兼容器做了处理
阻止冒泡stopPropagation()
阻止默认行为preventDefault()
立刻阻止事件处理函数防止冒泡,就是阻止本身后续绑定的事件stopImmediatePropagation()
另外
isStopPropagation()
isPreventDefault()
isImmediatePropagationStoped()
检测是否有,有就true,没就false
触发事件
大部分事件都是用户主动触发,我们有的时候想主动通过代码触发事件
trigger(eventType[,data])
triggerHandler(eventType[,data])
区别:后面相对前面,不会触发浏览器默认时间,不会产生冒泡,只触发jQ对象集合中的第一个元素的时间处理函数,返回的是事件处理函数的返回值而不是jQ对象,所以不能链式
前者更接近用户操作类型
后者主要是用于触发事件处理函数
快捷方法
eventName([data,]handler)
hover方法
弥补onmouseover()和onmouseout()不足
外部进内部也触发了外部
hover(enterHandler,leaveHandler)
hover(handler)
自定义事件
监听器模式
和观察者模式
on(customEvent)
trigger(customEvent)
事件命名空间
eventName.namespace
Ajax
jQuery.ajax([settings])
$(document).ready(function(){
$(search).click(function(){
$.ajax({
type:"GET";
url:"";
datatype:"json";
success:function(data){
if(data.success){$("#searchResult").html(data.msg);}
}else{$("#searchResult").html("出现错误"+data.msg);}
error:function(jqXHR){
alert("发生错误:"+jqXHR.status)
}
});
})