[转载]js--DOM（事件对象event）

今天继续学习DOM中得事件--事件对象(event)。
目录：1.DOM中的事件对象
      2.IE中的事件对象
      3.跨浏览器的事件对象

再触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。

1.DOM中的事件对象
兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定的事件处理程序时使用什么方法（DOM 0级或DOM 2级），都会传入event对象。
      DOM 0级：

var btn = document.getElementByIdx_x("myBtn");
btn.onclick = function(event){
alert(event.type); //click
};

DOM 2级：

var btn = document.getElementByIdx_x("myBtn");
btn.addEventListener("Click",function(event){
alert(event.type); //click
},false);

HTML ：

<input type="button" value="Click Me" onclick="alert(event.type)"/> //click

这三个例子最后都会弹出click对话框，由event.type属性表示事件类型。

event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。不过所有事件都会包括下表列出的成员：

属性/方法	类型	读/写	说明
bubbles	布尔	只读	表明事件是否冒泡
cancelable	布尔	只读	表明是否可以取消事件的默认行为
currentTarget	元素	只读	其事件处理程序当前正在处理事件的那个元素
detail	整型	只读	与事件相关的细节信息
eventPhase	整型	只读	调节事件处理程序的阶段：1.表示捕获阶段 2.表示"处于目标" 3.表示冒泡阶段
preventDefault()	函数	只读	取消事件的默认行为。如果cancelable是true，则可以使用这个方法
stopPropagation	函数	只读	取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用这个方法
target	元素	只读	事件的目标
type	字符串	只读	被触发的事件的类型
view	AbstractView	只读	与事件关联的抽象视图。等同于发生事件的window对象

下面再来说说表中属性或方法的用法。

（1）currentTarget 和 target
currentTarget属性：在事件处理内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则this、cerrentTarget和target包含相同的值。
例子1：

var btn = document.getElementByIdx_x("myBtn");
btn.onclick = function(event){
alert(event.currentTarget===this); //true
alert(event.target===this); //true
};

我来说明下这三个值为什么相等，光看上面的概念可能很模糊：
this和currentTarget在这里指的都是onclick前面的btn元素;
target指的是事件的目标，也就是document.getElementByIdx_x_x_x_x_x_x_x("myBtn")，在这里又把他赋给了btn;
所以三者相等！

例子2：（再来看看2着不相等的情况，为了加深印象）

document.body.onclick = function(event){
    alert(event.currentTarget === document.body)
    alert(this === document.body);
    alert(event.target === document.body);
    alert(event.target === document.getElementByIdx_x("myBtn"));
};

看看上面的例子，再加上上面红色部分我对第一个例子的解释，是不是就可以很好的理解第二例子了呢？
     alert(event.currentTarget === document.body)
     alert(this === document.body
这两行输出true，因为this和currentTarget在这里指的都是onclick前面的元素
     alert(event.target === document.getElementByIdx_x("myBtn"))
这行也是true，因为target指的是事件的目标，也就是document.getElementByIdx_x_x_x_x_x_x_x("myBtn")，但是这回没有把他赋给document.body，所以这回它们不想等，所以
     alert(event.target === document.body) 自然就输出false了。

（2）type属性
在需要通过一个函数处理多个事件时，可以使用type属性。例如：

var btn =document.getElementByIdx_x("myBtn");
var handler = function (event){          //定义了一个handler函数
    switch (event.type){                  //用于处理3个事件
        case "click":                    //1.当鼠标点击时：弹出Clicked
            alert("Clicked");
            break;
        case "mouseover":
            event.target.style.backgroundColor="red";  // 当鼠标移入时，变为红色
            break;
        case "mouseout":
            event.target.style.backgroundColor="";     //当鼠标移出时，变为默认颜色
            break;
    }
};
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;

这里通过检测event.type属性，让函数能够确定发生了什么事件，并执行相应操作。

（3）preventDefault方法和cancelable属性
用于阻止特定事件的默认行为，比如链接的默认行为，就是在你单击它的时候打开新页面。如果你想阻止链接导航这一默认行为，那么通过连接的onclick事件处理程序可以取消它，如下例子：

var link = document.getElementByIdx_x("myLink");
link.onclick = function (event){
event.preventDefault();
}

只有cancelable属性设置为true的事件，才可以使用preventDefault()方法来取消默认行为。

（4）stopPropagation方法和bubbles属性
用于立即停止事件在DOM层次中的传播，即取消进一步的事件，捕获或冒泡。

var btn = document.getElementByIdx_x("myBtn");
btn.onclick = function (event){
    alert("Clicked");
    event.stopPropagation();
};

document.body.onclick = function (event){
    alert("Body clicked");
};

要是不加 event.stopPropagation()方法，就会在单击按钮时出现两个警告框。可是加上后，click事件就不会传播到document.body，因此结果只输出一个警告框"Clicked"。

只有bubbles属性设置为true的事件，才可以使用stopPropagation()方法来立即停止事件在DOM层次中的传播。

（5）eventPhase属性
可以用来确定事件当前正位于事件流的哪个阶段。
如果是在捕获阶段调用事件处理程序，那么eventPhase属性等于1；
如果事件处理程序处于目标对象上，那么eventPhase属性等于2；
如果是在冒泡阶段调用事件处理的程序，那么eventPhase属性等于3。
看这个例子“

当单击这个按钮的时候，弹出的顺序是1 ，2 ，3。因为现在捕获阶段触发事件处理程序，然后触发按钮上注册的事件处理程序，最后才会触发再冒泡阶段的事件处理程序。当等于2时this、currentTarget和target相等。

2.IE中的事件对象
与访问DOM中得event对象不同，要访问IE中event对象有几种不同的方式，取决于指定事件程序的方法。

（1）在使用DOM 0级方法添加事件处理程序时，event对象作为window对象的一个属性，看例子：

var btn = document.getElementByIdx_x("myBtn");
btn.onclick =function (){
var event = window.event;
alert(event.type);
};

（2）如果事件处理程序是使用attachEvent()添加的，那么就会有一个event对象作为参数被传入事件处理程序函数中，如下所示：

var btn = document.getElementByIdx_x("myBtn");
btn.attachEvent ("onclick",function(event){
alert(event.type);
});

同样也可以通过window对象来访问event对象

var btn = document.getElementByIdx_x("myBtn");
btn.attachEvent ("onclick",function(){
alert(window.event.type);
});

（3）如果是通过HTML特定指定事件处理程序，那就和DOM中一样！

<input type="button" value="Click Me" onclick="alert(event.type)"/> //click

IE中的event对象同样也包含与创建它的事件相关的属性和方法。

属性/方法	类型	读/写	说明
cancelBubble	布尔	读/写	默认值为false,但将其设置为true就可以取消是件冒泡（与DOM中的stopPropagationn()方法相同）
returnValue	布尔	读/写	默认值为true,但将其设置为false就可以取消事件的默认行为（与DOM中的preventDefault()方法相同）
srcElement	元素	只读	事件的目标（与DOM中得target属性相同）
type	字符串	只读	被触发的事件类型

(1) srcElement属性
因为事件处理程序得作用域是根据指定它的方式来确定的，所以不能认为 this会始终等于事件目标。所以，最好还是始终使用event.srcElement，而不使用this。

var btn = document.getElementByIdx_x("myBtn");
btn.onclick = function () {
alert(window.event.srcElement === this); //true
};

btn.attachEvent ("onclick",function(event){
alert(event.srcElement === this); //false
});

上面两个例子就可以说明通过DOM 0级和 attachEvent方法的this指的不是同一个值。

（2）returnValue属性（与DOM中的preventDefault方法一样），只要将returnValue的值设为false，就可以阻止默认行为。来看例子：

   var link = document.getElementByIdx_x("myLink");
   link.onclick = function (){
       window.event.returnValue = false ;
   };

与DOM不同的是，再次方法没有办法确定事件是否能被取消。

（3）cancelBubble属性（与DOM中的stopPropagation()方法一样），都是用来停止事件冒泡的。
但是由于IE不支持事件捕获，因而只能取消事件冒泡，但stopPropagation()可以同时取消时间捕获和冒泡。

btn.onclick =function(event){
event = EventUtil.getEvent(event);
};

在兼容DOM的浏览器中,event变量只是简单地传入和返回。而在IE中，event参数是未定义的(undefined),因此就会返回window.event。将这一行代码添加到事件处理程序的开头，就可以确保随时都能使用event对象，而不必担心用户使用的是什么浏览器。

第二个getTarget，它返回事件的目标。
用法：

btn.onclick = function(event0{
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
};

第三个preventDefault，用于取消事件的默认行为。
用法：

var link =document.getElementByIdx_x("myLink");
link.onclick = function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
};

第四个stopPropagation，只能用来阻止事件冒泡，因为在IE中不支持事件捕获。
用法：

var btn =document.getElementByIdx_x("myBtn");
btn.onclick =function(event){
    alert("Clicked");
    event = EventUtil.getEvent(event);
    EventUtil.stopPropagation(event);
}
document.body.onclick = function(event){
    alert("Body clicked");
};

posted @ 2017-01-11 19:50 天涯海角路阅读(171) 评论(0) 收藏举报

刷新页面返回顶部

天涯海角路

[转载]js--DOM（事件对象event）

公告