js-event（事件对象及其属性、方法）

zccst整理


2014-10-21

Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！

其中：event.target不支持IE浏览器。


1，事件句柄（事件函数）：以on开头的若干
2，鼠标/键盘属性：
[img]http://dl2.iteye.com/upload/attachment/0102/2706/3c24f683-bcde-357b-a1ed-e6f3c57fd028.jpg[/img]

3，
[img]http://dl2.iteye.com/upload/attachment/0102/2708/42772192-f493-35ee-8c82-e01adb018d44.jpg[/img]


[b]二，[/b]

<div class="opt_group">
<label title="标签1"><input type="radio" value="label1" name="page_type" />标签1 <label>
<label title="标签2"><input type="radio" value="label2" name="page_type" />标签2 <label>
</div>

$(".opt_group label").click(function(e){
    var $target = e.target;//firefox 下的 event.target = IE 下的 event.srcElement
    var val = $target.val();//
    console.log(e.target.nodeName,e.target,$(e.target));
});
/*
触发两次，一次是label，一次input。
*/

截图：
[img]http://dl2.iteye.com/upload/attachment/0092/0557/34fd22fa-fb3f-3c19-9121-7412ef00ccda.jpg[/img]


[b]一，Js event事件在IE、FF兼容性问题[/b]
1，event对象
IE：有window.event对象
FF：没有window.event对象。可以通过给函数的参数传递event对象。
如：
<input type="button" οnmοusemοve="showDiv(event);"//event不需要加引号
function showDiv(event)
{
var event=window.event||event;
event.clientX;
event.clientY;
}

2，event.srcElement||event.target
Javascript event.srcElement
感觉这个挺好，可以捕获当前事件作用的对象，如event.srcElement.tagName可以捕获活动标记名称。
注意获取的标记都以大写表示，如"TD","TR","A"等。所以把看过的一些抄下来，不记得的时候再来看看。

event.srcElement从字面上可以看出来有以下关键字：事件,源 他的意思就是：当前事件的源，我们可以调用他的各种属性 就像:document.getElementById("")这样的功能，经常有人问 firefox 下的 event.srcElement 怎么用，在此详细说明：

IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的，即：firefox 下的 event.target = IE 下的 event.srcElement

解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.