接受数据参数--解决不同作用域下数据传递的问题
<div id="test">点击触发</div>
$('#test').click('001',function(e){
alert(e.data) //弹出001
});
mouseenter与mouseover(mouseout与mouseleave)的区别---关键是冒泡的方式处理问题
<div>
<p></p>
</div>
如果在div与p中都绑定mouseover,鼠标在离开p但没离开div时,出现p与div都响应事件,因为先触发p然后冒泡。
mouseenter事件只会在绑定它的元素上被调用,不会在后代节点上被触发。。
foucus(blur)与foucusin(foucusout)的区别---是否支持冒泡处理
前者不冒泡,或者冒泡
hover方法
$(selector).hover(handlerIn, handlerOut)
- handlerIn(eventObject):当鼠标指针进入元素时触发执行的事件函数
- handlerOut(eventObject):当鼠标指针离开元素时触发执行的事件函数
$("p").hover(
function() {
$(this).css("background", 'red');
},
function() {
$(this).css("background", '#bbffaa');
}
);
on()的多事件绑定 on( events [, selector ] [, data ] )
多个事件绑定同一函数
$('*').on('mouseover mouseout',function(){});
多个事件绑定不同函数
$(*).on({
mouseover:function(){},
mouseout:function(){},
});
将数据传递到处理程序
$('*).on('click',{name:'my',age:'36'},function(e){
alert(e.data.name);
})
委托机制
.on(events,[,selector][,data],handler(eventObject))
如:
<div>
<p>
<a>目标节点</a>
</p>
</div>
$('div').on('click','p',fn)
事件绑定在最上层div元素上,当用户触发在a元素上,事件将往上冒泡,一直会冒泡在div元素上。如果提供了第二参数,那么事件在往上冒泡的过程中
遇到了选择器匹配的元素,将会触发事件回调函数。
事件委托
利用浏览器的冒泡特性,给父元素绑事件,用e.target判断被触发的元素,做相应的function。
(e:事件对象---是用来记录一些事件发生时的相关信息的对象。只在事件发生时产生,只能是事件处理函数内部访问,在所有事件处理函数运行结束后,
事件对象就被销毁)。
jQuery事件属性方法
e.type/pageX/pageY/preventDefault()/stopPropagation()/which/currentTarget(等同于this).
this与e.target的区别:
冒泡过程中this是可以变化的,但e.target永远是直接接受事件的目标DOM元素
this与e.target都是dom对象,用jq需要转换为$(this),$(e.target)
trigger事件--根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
$('#elem').trigger('click') //不同点击直接运行click时的fn。
trigger还支持自定义事件,支持传递参数
$('#elem').on('Aaron',function(e,arg1,arg2){
alert('自触自定义事件')
});
$('#elem').trigger('Aaron',['参数1','参数2']);
trigger触发浏览器事件与自定义事件的区别:
自定义事件对象,是jQuery模拟原生实现的
自定义事件可以传递参数
triggerHandler--触发通过 jQuery 绑定的事件处理函数,而不触发原生的事件
trigger与triggerHandler用法一样,不同点:
- riggerHandler不会触发浏览器的默认行为,.triggerHandler( "submit" )将不会调用表单上的.submit()
- .trigger() 会影响所有与 jQuery 对象相匹配的元素,而 .triggerHandler() 仅影响第一个匹配到的元素
- 使用 .triggerHandler() 触发的事件,并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的,那么它就不会进行任何处理
- 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反,.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件,会返回 undefined