JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target

http://wenda.haosou.com/q/1373868839069215

http://kylines.iteye.com/blog/1660236

http://www.cnblogs.com/mslove/archive/2010/04/26/1721024.html

window.event代表着事件对象的状态。只有在事件发生时生效。如鼠标、键盘等事件被触发时这个对象才存在。window.event这只在IE下是这样的。他并不是标准。。也就是说其他浏览器并不支持。在W3C标准支持的浏览器下事件对向是引发事件涵数的第一个参数，参数名随意,在下面的例子中我的事件对象的参数名是evt,也可以定义为其他名字．为了兼容IE浏览器可以这样写 <style type="text/css"> #obj{background:red;300px;height:200px;position:relative;} </style> <div id="obj"></div> <script type="text/javascript"> document.getElementById("obj").onclick=function(evt){ //获取的这个ID为obj的DIV对象就是个实例引起鼠标事件的元素 //evt代表事件对象（W3C DOM标准下） var evt=evt || event; //标准化事件对象（W3C DOM 和IE DOM ） evt.Target=evt.Target || evt.srcElement;//标准化事件对象属性<引起事件的元素> //（W3C DOM 和IE DOM ） evt.layerX=evt.layerX || evt.offsetX;//鼠标相对于引起事件的元素的父元素的X坐标(标准化IE) evt.layerY=evt.layerY || evt.offsetY;//鼠标相对于引起事件的元素的父元素的Y坐标(标准化IE) alert("相对这个DIV的X方向的坐标"+evt.layerX+" 相对这个DIV的Y方向的坐标"+evt.layerY) } </script>

jquery

1.this和event.target的区别：js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
2.this和event.target都是dom对象，如果要使用jquey中的方法可以将他们转换为jquery对象：$(this)和$(event.target);

JQuery事件中的Event属性是经常性的被忽略的。大多数时间你的确不怎么用它，但有些时候它还是它还是很有作用的。

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

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 );
            });

结果:”hey”

timeStamp

事件发生时的时间戳.

var last;
            $("p").click(function(event) {
            if( last )
            alert( "time since last event " + event.timeStamp - last );
            last = event.timeStamp;
            });

上面是jQuery官方文档中提供的event对象的属性. 在”jQuery实战”一书中还提供了下面的多浏览器支持的属性, 时间关系我没有尝试每一个属性, 大家可以帮忙验证是否在所有浏览器下可用:

属性名称
描述
举例

altKey
Alt键是否被按下. 按下返回true

ctrlKey
ctrl键是否被按下, 按下返回true

metaKey
Meta键是否被按下, 按下返回true.
meta键就是PC机器的Ctrl键,或者Mac机器上面的Command键

shiftKey
Shift键是否被按下, 按下返回true

keyCode
对于keyup和keydown事件返回被按下的键. 不区分大小写, a和A都返回65.对于keypress事件请使用which属性, 因为which属性跨浏览时依然可靠.

which
对于键盘事件, 返回触发事件的键的数字编码. 对于鼠标事件, 返回鼠标按键号(1左,2中,3右).

screenX/Y
对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标

事件对象除了拥有属性, 还拥有事件. 有一些是一定会用到的事件比如取消冒泡 stopPropagation() 等.下面是jQuery事件对象的函数列表:

名称
说明
举例

preventDefault()

取消可能引起任何语意操作的事件. 比如<a>元素的href链接加载, 表单提交以及click引起复选框的状态切换.

$("a").click(function(event){
            event.preventDefault();
            // do something
            });

isDefaultPrevented()

是否调用过

preventDefault()

方法

$("a").click(function(event){
            alert( event.isDefaultPrevented() );
            event.preventDefault();
            alert( event.isDefaultPrevented() );
            });

stopPropagation()

取消事件冒泡

$("p").click(function(event){
            event.stopPropagation();
            // do something
            });

isPropagationStopped()

是否调用过

stopPropagation()

方法

$("p").click(function(event){
            alert( event.isPropagationStopped() );
            event.stopPropagation();
            alert( event.isPropagationStopped() );
            });

stopImmediatePropagation()

取消执行其他的事件处理函数并取消事件冒泡.如果同一个事件绑定了多个事件处理函数, 在其中一个事件处理函数中调用此方法后将不会继续调用其他的事件处理函数.

$("p").click(function(event){
            event.stopImmediatePropagation();
            });
            $("p").click(function(event){
            // This function won't be executed
            });

isImmediatePropagationStopped()

是否调用过

stopImmediatePropagation()

方法

$("p").click(function(event){
            alert( event.isImmediatePropagationStopped() );
            event.stopImmediatePropagation();
            alert( event.isImmediatePropagationStopped() );
            });

这些函数中  stopPropagation()  是我们最长用的也是一定会用到的函数. 相当于操作原始event对象的event.cancelBubble=true来取消冒泡.

分类: jquery