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

zccst整理 


2014-10-21 

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

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


1，事件句柄（事件函数）：以on开头的若干 
2，鼠标/键盘属性： 


3， 












二， 

<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。
*/

截图： 
 




一，Js event事件在IE、FF兼容性问题 
1，event对象 
IE：有window.event对象 
FF：没有window.event对象。可以通过给函数的参数传递event对象。 
如： 
<input type="button" onmousemove="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.