好好学一遍JavaScript 笔记(九)——事件处理函数/监听函数/事件对象

欢迎技术交流。 QQ：138986722

事件处理器是与特定的文本和特定的事件相联系的JavaScript脚本代码，当该文本发生改变或者事件被触发时，浏览器执行该代码并进行相应的处理操作，而响应某个事件而进行的处理过程称为事件处理。HTML文档事件包括用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应，主要分为浏览器事件和HTML元素事件两大类。在了解这两类事件之前，先来了解事件捆绑的概念。HTML文档将元素的常用事件（如onclick、onmouseover等）当作属性捆绑在HTML元素上，当该元素的特定事件发生时，对应于此特定事件的事件处理器就被执行，并将处理结果返回给浏览器。事件捆绑导致特定的代码放置在其所处对象的事件处理器中。如果在javaScript中分配事件处理函数、则需要首先获得要处理的对象的引用、然后将函数赋值给对应的事件处理函数属性、示例：

<div id="divId">点击</div>
<!-- 注意JS代码要放在div元素之后、如果先执行JS在执行div元素的话、
document是获取不到对象的、要时刻记住、解释执行的的特性
另外一点就是事件处理函数名称必须小写才能正确响应事件。 -->
<script type="text/javascript">
var oDiv = document.getElementById("divId");
oDiv.onclick = function (){
alert("javaScript事件处理函数!");
};
</script>
<div onClick="alert('HTML中分配事件处理函数!');">点击</div>

事件对象

创建包含关于刚刚发生的事件的信息的事件对象、包含的信息如下：

1、引起事件的对象；

2、事件发生时鼠标的信息；

3、事件发生时键盘的信息。

事件对象只在发生事件时才被创建、且只有事件处理函数才能访问。所有事件处理函数执行完毕后、事件对象就被销毁。

定位：

在IE中、事件对象是Window对象的一个属性event。事件处理函数必须这样访问事件对象：

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

在DOM兼容的浏览器(如Mozilla、Safari和Opera)中访问事件对象、要这么做：

oDiv.onlcik =function (){
var oEvent = arguments[0];
}

也可以直接命名参数、访问就更方便：

oDiv.onclick = function (oEvent) {}

属性方法：

下面是IE中的属性以及方法





DOM事件对象属性核心方法





相似性：

1、获取事件类型

这样可在任何一种浏览器中获取事件的类型：

var sType = oEvent.tyep;

<div id="divId">
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------
</div>
<div>
<input type="text" id="testId" onkeydown="keyFunction();" onkeyup="keyFunction();"/>
</div>
<script type="text/javascript">
var oDiv = document.getElementById("divId");
function eFunction(oEvent){
/**oEvent.type在IE会报错、说type为空或不是对象、火狐木有问题**/
if(oEvent.type == "click"){
alert("click");
}else if(oEvent.type == "mouseover"){
alert("mouseover");
}
}
function ieFunction(){
/**IE需要这样获取event对象**/
var oEvent = window.event;
if(oEvent.type == "click"){
alert("click");
}else if(oEvent.type == "mouseover"){
alert("mouseover");
}

/**
* 获取客户端坐标
*/
alert("获取客户端坐标X: "+oEvent.clientX+"   Y: "+oEvent.clientY);

/**
* 获取屏幕坐标
*/
alert("获取屏幕坐标X: "+oEvent.screenX+"   Y: "+oEvent.screenY);
}
//oDiv.onclick = eFunction;
//oDiv.onmouseover = eFunction;
oDiv.onclick = ieFunction;
oDiv.onmouseover = ieFunction;

/**获取按键的数值代码**/
function keyFunction(){
/**
* onkeyup 是在用户放开任何先前按下的键盘键时发生。
* onkeydown 是在用户按下任何键盘键时发生。
*/
var oEvent = window.event;
var keyValue = oEvent.keyCode;
//alert(keyValue);

/**检测shift、alt键是否被按下返回的是boolean值**/
var bshift = oEvent.shiftKey;
var balt = oEvent.altKey;
alert("shift: "+bshift+" alt:"+balt);
}
</script>