一、鼠标事件
click
dbclick
mousedown
mouseup
mousemove //拖拽
mouseover
mouseout
mouseenter//会冒泡
mouseleave
focusin
focusout
focus//事件获得焦点,冒泡上去,上面的事件会发生focusin
blur//事件失去焦点,冒泡上去,上面的事件会发生focusout
change// 当input select textarea内容改变的时候触发
select// 当input textarea 选中的时候触发
$("#target").submit(function(data){
return false;//阻止表单默认行为
});
二、键盘事件
keydown
keyup
keypress
三、事件绑定
$("#elem").on("click",function(){});
绑定多个事件
$("#elem").on("mouseover mouseout", function(){});
绑定多事件,多处理
$("#elem").on({
mouseover : function(){};
mouserout : function(){};
});
给处理函数传值
$("div").on("click", {name : "hexuebin"}, func);
事件解绑
$("#elem").off()//全部绑定事件都么有
四、事件委托
.on( events ,[ selector ] ,[ data ], handler(eventObject) )
在on的第二参数中提供了一个selector选择器,简单的来描述下
参考下面3层结构
<div class="left">
<p class="aaron">
<a>目标节点</a> //点击在这个元素上
</p>
</div>
给出如下代码:
$("div").on("click","p",fn)
事件绑定在最上层div元素上,当用户触发在a元素上,事件将往上冒泡,一直会冒泡在div元素上。如果提供了第二参数,那么事件在往上冒泡的过程中遇到了选择器匹配的元素,将会触发事件回调函数
五、自定义事件
$('#elem').on('click', function() {
alert("触发系统事件")
});
$('#elem').trigger('click');
或者直接自己定义
$('#elem').on('Aaron', function(event,arg1,arg2) {
alert("自触自定义时间")
});
$('#elem').trigger('Aaron',['参数1','参数2'])//自定义事件可以传递参数
trigger事件还有一个特性:会在DOM树上冒泡,所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡
triggerHandler不会触发浏览器的默认行为,.triggerHandler( "submit" )将不会调用表单上的.submit()
.trigger() 会影响所有与 jQuery 对象相匹配的元素,而 .triggerHandler() 仅影响第一个匹配到的元素
.triggerHandler() 触发的事件,并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的,那么它就不会进行任何处理
与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反,.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件,会返回 undefined