jQuery事件通过封装JavaScript事件来实现,比如.click()
就是onclick
的封装
和事件绑定、触发相关的api:
- 绑定事件:bind、on、one、live、delegate...
- 触发事件:trigger()...
- 解绑事件:unbind、off、die、undelegate
默认情况下,事件会冒泡,即同样的事件沿着DOM数由下至上逐级触发。
阻止冒泡的方式是event.stopPropagation()
与冒泡行为类似的是默认行为,比如点击了一个<a>
或者<button>
这类标签时,会发生默认行为,假如要阻止,可以使用event.preventDefault()
在实际使用中,我们可以通过在事件处理函数末尾添加return false
来阻止上述两种行为,所以它做了3件事:
- stopPropagation()
- preventDefault()
- 立即结束当前函数并返回
在原生js中,绑定事件可以在DOM元素上设置类似onxx
的属性,然后在script标签对内设置对应的处理函数
<div onclick="test()"></div>
<script>
function test(){
alert("test");
}
</script>
但是这种方法不方便,所以引入了更多方法
格式:
bind(type,[data],fn)
$('.box').bind('click',function(event){})
当然也可以绑定多个事件:
$('.box').bind('click mousemove',function(event){})
还可以通过json格式在一个bind方法中绑定多个事件函数
var handler = {
click : function(){},
mousemove : function(){}
};
$('.box').bind(handler);
注意:事件处理函数内部的this,正常情况下是指向当前DOM元素
前面的格式中有一个data的可选参数,它可以是任意类型,可以通过它传入数据
var dat = { name : 'dat'};
$('.box').bind('click',dat,function(event){
alert(event.data.name); //dat
});
事件处理函数中,event.data
就是bind传入的data数据
如果该data参数传入的是布尔值,那么它可以设置是否允许默认行为和冒泡行为(false表示阻止)
bind()方法只会给当前文档中已经存在的匹配元素添加事件处理函数,如果后续动态添加元素,添加元素并不会绑定该事件处理函数,如希望绑定事件对后续添加的元素生效,可使用on()、delegate()等事件函数著作权归作者所有。
解绑通过:
$(.box).unbind('click');
实现
one()方法和bind()方法的用法一样,不过前者是用来绑定至多执行一次的事件处理函数著作权归作者所有。
格式:
on(type,[selector],[data],fn)
on()方法也是用来为指定元素的一个或多个事件绑定事件处理函数。著作权归作者所有。
bind()方法只会为页面已存在的元素绑定事件处理函数,可是on()不同,它不仅支持直接在目标元素上绑定事件,还支持在目标元素的父辈元素上委托绑定
解绑用off()方法
将事件处理函数动态绑定到指定的根元素上,由于事件冒泡特性,它被用来处理指定的子元素上的事件。
格式:
$(selector).delegate(childSelector,event,[data],function)
特点:
- 能自带绑定动态添加的元素。如果事件处理函数绑定在父节点上,新增加的子节点元素事件也会冒泡到父节点
- 性能优于bind(毕竟bind可能绑定多个事件处理函数)
<div id="root">
<a>A</a>
<a>B</a>
</div>
<script>
$('#root').delegate('a', 'click', function(){
alert("click a");
});
</script>
和前面的事件绑定函数不同,trigger用来触发事件
比如:
<div class="box">123</div>
<button>模拟点击</button>
$('.box').on('click',function(){
alert(1);
});
$('button').on('click',function(){
$('.box').trigger('click');
});
- trigger(eventType) 触发绑定在jQuery对象内匹配元素的特定事件类型(由eventType决定)上的事件处理函数。
- trigger(Event) 触发绑定在jQuery对象内匹配元素的特定事件(由Event事件决定)上的事件处理函数。
- triggerHandler(eventType) 触发绑定在jQuery对象内第一个匹配元素上的事件处理函数,既不冒泡,也不实施事件的默认行为。
load(function) 即load事件,在页面中的子元素及资源文件载入完成时触发
ready(function) 在页面中的元素已经处理完成,DOM就绪时触发
unload(function) 即unload事件,当用户离开当前页面时触发
error(function) 即error事件,在载入外部资源文件出错时触发(如载入图片出错)
resize(function) 即resize事件,当浏览器窗口大小发生变化时触发
scroll(function) 即scroll事件,当用户拖动滚动条时触发
click(function) 即click事件,在用户点击鼠标按钮时触发
dblclick(function) 即dblclick事件,在用户双击鼠标按钮时触发
focusin(function) 即focusin事件,在元素得到焦点时触发
focusout(function) 即focusout事件,在元素失去焦点时触发
hover(function)、hover(function,function) 即hover事件,在鼠标进入或离开元素时触发,若指定两个参数,进入时会触发第一个函数,离开时会触发第二个函数,否则都会触发第一个。
mousedown(function) 即mousedown事件,当在某元素上按下鼠标时触发
mouseenter(function) 即mouseenter事件,当鼠标进入某元素显示区域时触发
mouseleave(function) 即mouseleave事件,当鼠标离开某元素显示区域时触发
mousemove(function) 即mousemove事件,当鼠标在某元素显示区域内移动时触发
mouseout(function) 即mouseout事件,当鼠标离开某元素显示区域时触发
mouseover(function) 即mouseover事件,当鼠标进入某元素显示区域时触发
mouseup(function) 即mouseup事件,当按下后释放鼠标按钮时触发
mouseenter()与mouseover()、mouseleave() 与mouseup()的区别?
mouseenter()和mouseover()作用一样,但前者不支持冒泡,后者支持。
mouseleave()和mouseup()作用一样,但前者不支持冒泡,后者支持。
blur(function) 即blur事件,在元素失去焦点时触发
change(function) 即change事件,在元素的值发生变化时触发
focus(function) 即focus事件,在元素获得焦点时触发
select(function) 即select事件,在用户选中某个可选框时触发
submit(function) 即submit事件,当用户提交表单时触发
keydown(function) 即keydown事件,当用户按下一个键后触发
keypress(function) 即keypress事件,当用户按下一个键并释放后触发
keyup(function) 即keyup事件,当用户释放一个键时触发
keypress事件会在按下键盘按键时触发。它与keydown事件类似,但keypress着重的是按下该键输入了哪个字符(只有能够打印字符的键才会触发keypress),keydown着重的是按下了哪个键(按下任何键都可触发keydown)。对于诸如Ctrl、Alt、Shift、Delete、Esc等修饰性和非打印键,请监听keydown事件。著作权归作者所有。
currentTarget 返回正在处理(响应)该事件的元素
data 返回绑定事件时传递的data对象
isDefaultPrevented() 若已经调用过preventDefault()方法,返回true
isImmediatePropagationStopped() 若已经调用过stopImmediatePropation()方法,返回true
originalEvent 返回未经jQuery处理的原始DOM Event对象
pageX、pageY 返回相对于页面左上角的鼠标位置
preventDefault() 用来阻止当前事件的默认行为
relatedTarget 仅对鼠标事件有效,返回该鼠标事件有关的元素
result 返回处理该事件的最后一个事件处理函数的返回值
stopImmediatePropagation() 立即阻止调用当前事件的其他事件处理函数
stopPropagation() 阻止事件冒泡
target 返回触发事件的元素
timeStamp 返回事件发生的时间
type 返回事件类型
which 在键盘和鼠标事件中,返回用户按下的键或鼠标按钮
on和off方法是jQuery1.7+版本增加的,也推荐使用on方法
格式:
bind(type,[data],fn)
on(type,[selector],[data],fn)
二者区别在于是否含selector
这个参数,假如on方法不设置selector,那么和bind是没有区别的。
根据JavaScript的事件冒泡特性,假如父元素上注册一个事件处理函数,当子元素上发生该事件时,父元素上的事件处理函数也会一并触发
on()函数的参数selector就是为了在事件冒泡的时候,让父元素能够过滤掉子元素上发生的事件。如果使用了bind,那么就没有这个能力,子元素上发生的事件一定会触发父元素事件。
比如:
<div id="parent">
<input type="button" value="a" id="a"/>
<input type="button" value="b" id="b"/>
</div>
$("#parent").on("click","#a",function(){
alert($(this).attr("id"));
});
$("#parent").on("click","#a",function(){
alert($(this).attr("id"));
});
我们在父元素上绑定了事件处理函数,当点击子元素的任意一个按钮,都会执行事件处理函数。但是假如我们想要只点击某一个的时候才触发事件处理,那么应该使用on