js event对象学习(一)

 

 

在IE中，事件对象是window对象的一个属性event。也就是说，事件处理函数必须这样访问事件对象：

oDiv.onclick=function(){
	var oEvent=window.event;
}

 

尽管它是window对象的属性，event对象还是只能在事件发生时访问。所有的事件处理函数执行完毕后，事件对象就被销毁。

 

DOM标准规则说，event对象必须作为唯一的参数传给事件处理函数。所以，在DOM兼容的浏览器中访问事件对象，要这么做：

oDiv.onclick=function(){

var oEvent=arguments[0];

}

 

当然，可直接命名参数，访问就方便：

oDiv.onclick=function(oEvent){

}

 

IE：有window.event对象 

FF：没有window.event对象。可以通过给函数的参数传递event对象。 

 

在控件中如何获取event对象？

<script type="text/javascript" >
    function test(event,obj){
        alert(test.caller);
        //click
        console.info(event.type);
        //<div class="test" onclick="test(event,this)">dfdsfgda</div>
        console.info(obj.outerHTML);
    }
</script>
<div class="test" onclick="test(event,this)">click me</div>

 

在firefox和chrom中弹出的内容

function onclick(event) {
test(event,this)
}

 

理解：相当于是执行了window.onclick(event)方法，里面方法执行的内容是自己定义的test(event)方法，恰好传递的阐述就是浏览器创建的event事件对象，这样我们就能在自定义的event方法中获取event对象

 

上述代码还可以这么写

<script type="text/javascript" >
function test(event){
	alert(test.caller);
	alert(event.type);
}
</script>
<div class="test" onclick="test(arguments[0])"></div>

理解：arguments[0]表示是onclick(event)方法的第一个参数，即arguments[0]等于event参数。

 

在IE中弹出效果

function onclick(){
	test(event);
}

 备注：event是一个不被识别的值。

 

解决办法：兼容IE 和 非IE浏览器

//event不需要加引号 
<input type="button" onmousemove="showDiv(event);">
function showDiv(event) 
{ 
	var event=window.event||event; 
	event.clientX; 
	event.clientY; 
} 

 

获取事件的方法

function getEvent(event) {
	var ev = event || window.event;
	if (!ev) {
		var c = this.getEvent.caller;
		while (c) {
			ev = c.arguments[0];
			//怿飞注：YUI 源码 BUG，ev.constructor 也可能是 MouseEvent，不一定是 Event
			if (ev && (Event == ev.constructor || MouseEvent == ev.constructor)) { 
				break;
			}
			c = c.caller;
		}
	}
	return ev;
}

function foo(){ 
	var e = getEvent(); 
	alert(e); 
}

 

1、event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 

2、event对象只在事件发生的过程中才有效。 

3、event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 

 

12.returnValue 

描述： 

设置或检查从事件中返回的值 

语法： 

event.returnValue[ = Boolean] 

可能的值： 

true 事件中的值被返回 

false 源对象上事件的默认操作被取消 

 

 

19.type 

描述： 

返回事件名。 

语法： 

event.type 

注释： 

返回没有“on”作为前缀的事件名，比如，onclick事件返回的type是click 

只读。