首页 > Web开发 > 详细

第一百七十节,jQuery,事件对象,event 对象

时间:2017-03-07 19:37:17      阅读:141      评论:0      收藏:0      [点我收藏+]

jQuery,事件对象,event 对象

 

学习要点:

  1.事件对象

  2.冒泡和默认行为

 

JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象。但由于浏览器 的兼容性,开发者总是会做兼容方面的处理。jQuery 在封装的时候,解决了这些问题,并且 还创建了一些非常好用的属性和方法。

 

一.事件对象

事件对象就是 event 对象,通过处理函数默认传递接受。之前处理函数的 e 就是 event 事件对象,event 对象有很多可用的属性和方法,我们在 JavaScript 课程中已经详细的了解 过这些常用的属性和方法,这里,我们再一次演示一下。

通过处理函数传递事件对象

    //通过处理函数传递事件对象
    $(‘input‘).bind(‘click‘, function (e) { //接受事件对象参数
        alert(e);
    });

 

技术分享

技术分享

type 属性获取这个事件的事件类型,例如:click

    $(‘div‘).click(function (e) {
        alert(e.type);  //打印click
    });

 

target 属性获取触发事件的 DOM 元素,就是触发元素的节点,比如,div下还有一个p,而div做了点击事件,点击div时得到的div节点,点击p时得到的p节点,适应冒泡规则

    $(‘div‘).click(function (e) {
        alert(e.target);  //打印[object HTMLDivElement]
    });

 


data 属性获取事件调用时的额外数据,也就是可在事件函数里以形式参数的方式传参,用data来接收,额外数据,可以是数字、字符串、数组、对象

    $(‘div‘).bind(‘click‘,123456,function (e) {
        alert(e.data);  //打印 123456
    });

注意:如果字符串就传递:‘123‘、如果是数组就传递:[123,‘abc‘],如果是对象就传递: {user : ‘Lee‘, age : 100}。数组的调用方式是:e.data[1],对象的调用方式是:e.data.user。

 


relatedTarget 属性获取移入移出目标点离开或进入的那个 DOM 元素,也就是鼠标移入或者移出时,鼠标经过路径中距离事件元素最近的节点

    $(‘span‘).bind(‘mouseover‘,function (e) {
        alert(e.relatedTarget);  //打印 鼠标经过路径中距离事件元素最近的节点
    });

 


currentTarget 属性获取冒泡前触发的 DOM 元素,等同与 this,得到的监听元素的节点,也就是绑定事件的元素节点,不适应冒泡规则

    $(‘div‘).click(function (e) {
        alert(e.currentTarget);  //打印[object HTMLDivElement]
    });

 


pageX/pageY 属性获取相对于页面原点的水平/垂直坐标


screenX/screenY 属性获取显示器屏幕位置的水平/垂直坐标(非 jQuery 封装)


clientX/clientY 属性获取相对于页面视口的水平/垂直坐标(非 jQuery 封装)


result 属性获取上一个相同事件的返回值


timeStamp 属性获取事件触发的时间戳


which 属性获取鼠标的左中右键(1,2,3),或获取键盘按键


altKey 属性获取是否按下了alt键


shiftKey 属性获取是否按下了shift键


ctrlKey 属性获取是否按下了ctrl键


metaKey 属性获取是否按下了meta键


获取是否按下了 alt、shift、ctrl(这三个非 jQuery 封装)或
meta 键(IE 原生 meta 键,jQuery 做了封装)

 

第一百七十节,jQuery,事件对象,event 对象

原文:http://www.cnblogs.com/adc8868/p/6516128.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!