事件处理函数/监听函数/事件对象
2012-02-17 17:18
169 查看
事件处理器是与特定的文本和特定的事件相联系的JavaScript脚本代码,当该文本发生改变或者事件被触发时,浏览器执行该代码并进行相应的处理操作,而响应某个事件而进行的处理过程称为事件处理。HTML文档事件包括用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应,主要分为浏览器事件和HTML元素事件两大类。在了解这两类事件之前,先来了解事件捆绑的概念。HTML文档将元素的常用事件(如onclick、onmouseover等)当作属性捆绑在HTML元素上,当该元素的特定事件发生时,对应于此特定事件的事件处理器就被执行,并将处理结果返回给浏览器。事件捆绑导致特定的代码放置在其所处对象的事件处理器中。如果在javaScript中分配事件处理函数、则需要首先获得要处理的对象的引用、然后将函数赋值给对应的事件处理函数属性、示例:
[javascript]view
plaincopyprint?
<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。事件处理函数必须这样访问事件对象:
[javascript]view
plaincopyprint?
oDiv.onclick = function () {
var oEvent = window.event;
}
在DOM兼容的浏览器(如Mozilla、Safari和Opera)中访问事件对象、要这么做:
[javascript]view
plaincopyprint?
oDiv.onlcik =function (){
var oEvent = arguments[0];
}
也可以直接命名参数、访问就更方便:
[javascript]view
plaincopyprint?
oDiv.onclick = function (oEvent) {}
属性方法:
下面是IE中的属性以及方法
DOM事件对象属性核心方法
相似性:
1、获取事件类型
这样可在任何一种浏览器中获取事件的类型:
[javascript]view
plaincopyprint?
var sType = oEvent.tyep;
[javascript]view
plaincopyprint?
<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>
[javascript]view
plaincopyprint?
<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。事件处理函数必须这样访问事件对象:
[javascript]view
plaincopyprint?
oDiv.onclick = function () {
var oEvent = window.event;
}
在DOM兼容的浏览器(如Mozilla、Safari和Opera)中访问事件对象、要这么做:
[javascript]view
plaincopyprint?
oDiv.onlcik =function (){
var oEvent = arguments[0];
}
也可以直接命名参数、访问就更方便:
[javascript]view
plaincopyprint?
oDiv.onclick = function (oEvent) {}
属性方法:
下面是IE中的属性以及方法
DOM事件对象属性核心方法
相似性:
1、获取事件类型
这样可在任何一种浏览器中获取事件的类型:
[javascript]view
plaincopyprint?
var sType = oEvent.tyep;
[javascript]view
plaincopyprint?
<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>
相关文章推荐
- 好好学一遍JavaScript 笔记(九)――事件处理函数/监听函数/事件对象
- 好好学一遍JavaScript 笔记(九)——事件处理函数/监听函数/事件对象
- 好好学一遍JavaScript 笔记(九)——事件处理函数/监听函数/事件对象
- 深入了解javascript事件 -事件绑定(事件处理函数/监听函数)
- JavaScript绑定事件监听函数的通用方法
- javascript页面加载与事件监听函数
- 前端基本知识(四):JS的异步模式:1、回调函数;2、事件监听;3、观察者模式;4、promise对象
- 平时的记录(1) js监听事件event对象
- rcp(插件开发)获取IWorkbenchPage对象,实现视图间的事件监听
- this指针在普通函数、对象方法、定时器、构造函数、事件函数、call()、apply()中的执行
- 【COCOS CREATOR 系列教程之二】脚本开发篇&事件监听、常用函数等示例整合
- javascript中函数事件触发和Obj对象获取
- 如何正确监听Stage对象的事件·续
- 事件监听函数addEvent
- jquery 监听div大小变化函数|div resize事件
- 处理事件的方式:两种类的覆盖处理(自己管理,覆盖专用事件函数;自己统一管理,覆盖QWidget::Event通用函数),一种对象的处理(父控件统一管理,即安装过滤器),两种全局处理(QCoreApplication安装过滤器;覆盖notify方法)
- 001_关于循环绑定事件函数中的对象索引值与this
- JavaScript为事件句柄绑定监听函数实例详解
- JavaScript实现为事件句柄绑定监听函数的方法分析
- JavaScript中为事件句柄绑定监听函数