返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

jquery 事件对象属性小结

2020-05-24 21:21:25易采站长站整理

使用事件自然少不了事件对象.  因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象.


jQuery中统一了事件对象,  当绑定事件处理函数时,  会将jQuery格式化后的事件对象作为唯一参数传入:

$(“#testDiv”).bind(“click”, function(event) { });

关于event对象的详细说明, 可以参考jQuery官方文档: http://docs.jquery.com/Events/jQuery.Event


jQuery事件对象将不同浏览器的差异进行了合并, 比如可以在所有浏览器中通过 event.target 属性来获取事件的触发者(在IE中使用原生的事件对象, 需要访问event.srcElement).
下面是jQuery事件对象可以在扩浏览器支持的属性:



























属性名称描述举例
type事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click. 
$(“a”).click(function(event) {
alert(event.type);
});
target获取事件触发者DOM对象 
$(“a[href=http://google.com]”).click(function(event) {
alert(event.target.href);
});
data事件调用时传入额外参数. 
$(“a”).each(function(i) {
$(this).bind(‘click’, {index:i}, function(e){
alert(‘my index is ‘ + e.data.index);
});
});
relatedTarget对于鼠标事件, 标示触发事件时离开或者进入的DOM元素 
$(“a”).mouseout(function(event) {
alert(event.relatedTarget);
});
currentTarget冒泡前的当前触发事件的DOM对象, 等同于this. 
$(“p”).click(function(event) {
alert( event.currentTarget.nodeName );
});

结果:P

pageX/Y鼠标事件中, 事件相对于页面原点的水平/垂直坐标. 
$(“a”).click(function(event) {
alert(“Current mouse position: ” + event.pageX + “, ” + event.pageY );
});
result上一个事件处理函数返回的值 
$(“p”).click(function(event) {
return “hey”
});
$(“p”).click(function(event) {
alert( event.result );
});
相关文章 大家在看