jQuery事件对象---常见属性

简介: 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/73335816

event对象常见属性

属性 含义
type 获取这个事件的事件类型的字符串,例如:click
target 获取与事件绑定的 DOM 元素
data 获取事件调用时的额外数据
relatedTarget 获取移入移出目标前所在的元素
currentTarget 获取冒泡前触发的 DOM 元素,等同与 this
pageX/pageY 获取相对于页面原点的水平/垂直坐标
screenX/screenY 获取显示器屏幕位置的水平/垂直坐标(非 jQuery 封装)
clientX/clientY 获取相对于页面可见部分的水平/垂直坐标(非 jQuery 封装)
result 获取上一个相同事件的返回值
timeStamp 获取事件触发的时间戳(字符串)
which 获取鼠标的左中右键(1,2,3),或获取键盘按键
altKey/shiftKey/ctrlKey/metaKey 判断在点击的同时是否按下了 alt、shift、ctrl键

Target

  • target 获得触发元素的DOM(点击的元素)
  • currentTarget得到的是监听元素的DOM(绑定的元素)

对于样式:

<div style="width:300px;height:300px;background-color:skyblue;">
    <span style="width:100px;height:100px;background-color:yellow;display:block"></span>
</div>

<script>
    $("div:eq(0)").bind("mouseover",function(event){
    //  alert(event);           // [object Object]
    //  alert(event.type);      // click
    //  alert(event.target);    // 点击的元素    [object HTMLSpanElement]/[object HTMLDivElement]
    //  alert(event.currentTarget); // 总是div    [object HTMLDivElement]
        alert(event.relatedTarget);
    });
</script>

用鼠标进入事件模拟三种target的效果:

target:

currentTarget:

relatedTarget:

data

通过 event.data 获取额外数据,可以是数字、字符串、数组、对象

    $(":button:eq(1)").bind("click","sss",function(e){
        alert(e.data);
    });

pageY、screenY、clienty

  • pageY 是对于页面顶端的距离,包括未显示的部分,所以常用于滚动条,随着滚动条改变
  • screenY 是对于屏幕顶端的距离,不随滚动条改变
  • clienty 是相对于页面可见部分顶端的距离,不随滚动条改变

page

which

判断鼠标点击,不过实验的时候好像只有左键有效 (/= _ =)/~┴┴

    $(":text").click(function(e){
        alert(e.which);
    });

判断键盘按下的值

    $(":text").keydown(function(e){
        alert(e.which);
    });
相关文章
N..
|
1月前
|
JavaScript 前端开发
jQuery事件处理
jQuery事件处理
N..
11 1
|
1月前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
12 0
|
1月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
22 1
|
6月前
|
JSON JavaScript 前端开发
jQuery$工具方法和CSS的属性经及方法
jQuery$工具方法和CSS的属性经及方法
40 0
|
6月前
|
JavaScript 前端开发
前端基础 - JQuery事件切换(原来还有这种写法)
前端基础 - JQuery事件切换(原来还有这种写法)
29 0
|
1月前
|
JavaScript 前端开发
jQuery中的事件与动画
jQuery中的事件与动画
10 0
|
1月前
|
JavaScript
jQuery动画与事件概念以及语法
jQuery动画与事件概念以及语法
8 0
|
1月前
|
JavaScript
jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?
jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?
20 2
|
3月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
39 0
|
3月前
|
JavaScript 前端开发
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
39 0