Javascript中的事件

     在js中，添加事件处理器有两种方式，一种是HTML形式，即在html代码中直接指定事件处理函数。第二种是在js中直接指定。我们现在要讨论的是在js中直接指定。

     1：在Ie中，要为某个对象指定处理函数可以用attachEvent("onclick",function(){}这种形式。但这仅限于在IE当中使用。DOM标准的浏览器采用的是另外一种方法:addEventListener("click",function(){},false);前面两个参数很好理解，第三个bool型的参数表示该事件是否支持捕获型事件，false表示不支持，也就是表示他支持的是冒泡型的事件，即事件是自底向上上溯的。在Firefox浏览器中使用的就是addEventListener。我们还有一种更为通用的方法来给对象添加处理函数:obj.onclick = func1。这种方式默认就是采用的冒泡型的处理方式。看一段代码就明白了：

		var func1 = function(el){
			if(window.event){
				var oEvent = window.event;
				alert(oEvent.offsetX);
			}else{
				var oEvent = arguments[0];
				alert(oEvent.pageX);
			}
		};
		var func2 = function(){
			if(window.event){
				var oEvent = window.event;
				var code = String.fromCharCode(oEvent.keyCode);
				alert(code);
			}else{
				var oEvent = arguments[0];
				var code = String.fromCharCode(oEvent.keyCode);
				alert(code);
			}
		}; 
		but1.onclick=func1;
		but2.onkeyup=func2;

   这种方式在IE和DOM标准的浏览器中都适用，建议采用这种方式。

 

2。在IE中，事件发生后会产生一个事件对象，该事件对象会保存在window.event下。所以，在IE中我们可以通过以下方式获得事件对象：

var oEvent = window.event;

    而在DOM标准的浏览器中，事件是以另外一种方式获得的:var oEvent = arguments[0],或者直接将e当做参数传递给方法。例如：function test(e){e.clientX;}。因此在获取事件对象的时候得为IE单独考虑。

 

3.  事件对象包含有很多属性，其中就有一个clientX和clientY，它表示事件发生位置在浏览器中的坐标，不包括菜单栏和状态栏。在IE中还有一个offsetX和offsetY，它表示事件发生地相对于控件左上角的相对坐标。但它只在IE中有效，而且还存在几个像素的BUG。

 

4.键盘事件：如果是键盘事件，可以通过事件对象的属性获得相应的键值。window.event.keyCode。他返回的是键值的ascii码。但是ctrl，shift和alt键有专门的属性，分别为ctrlKey,shiftKey,altKey。他们都是bool型的，true表示按下了该键，false表示没有。

 

5.阻止事件的默认行为。浏览器中，有些事件有他的默认行为，例如oncontextmenu，他默认会弹出一个快捷菜单。但有时候我们可能不希望他出该菜单，例如，当我们想要禁止用户在文本框中复制和粘贴的时候就会需要阻止右键快捷菜单的他出。我们可以这么干:

var func2 = function(){
   if(window.event){
     var oEvent = window.event;
     oEvent.returnValue = false;
   }else{
     var oEvent = arguments[0];
     oEvent.preventDefault();
   }

}

   其中上一种做法仅限于IE，而第二种做法就支持DOM标准的浏览器，例如Firefox。

 

6.阻止事件冒泡。如果父元素和子元素都定义了同一个事件，那么在冒泡型事件模型中，事件会层层上溯。有时候我们可能想要阻止这种上溯行为，Javascript提供了相应的方法。在IE中我们可以这么写，window.event.cancelBubble = true;为true表示退出事件冒泡，事件将不再上溯。而在DOM标准的浏览器中，是用的另外一种方法：arguments[0].stopPropagation();