












事件处理函数/监听函数
用于响应某个事件而调用的函数称为事件处理函数(event handler),或者DOM称为事件监听函数(event listener). 事件处理函数有2种分配方式,在javascript中或者在HTML中.
javascript中分配事件处理函数
首先要取得处理的对象的引用,然后将函数赋值给对应的事件处理函数属性,例如
var oDiv = document.getElementById('div1');
oDiv.onclick=function ()
{
alert('I was clicked');
}
<div id="div1" onclick="alert('I was clicked')"/>
用这中方法,事件处理函数的大小写可以任意.(不过要使用标准的XHTML代码,则事件处理函数需要用小写) 在HTML中分配事件处理函数时,记住特性值中的代码(双引号之间的),是被包装在匿名函数中的,所以HTML代码 实际上是执行了JavaScript代码
oDiv.onclick= function()
{
alert('I was clicded');
}
在IE中,每个window对象和每个元素都有两个方法,attachEvent()和detachEvent().
attachEvent()用来给事件附加一个事件处理函数,而detachEvent()用来将事件处理函数分离出来。 每个方法都有2个参数,要分配的事件处理函数的名字(例如:onclick)及一个函数
attachEvent
Binds the specified function to an event, so that the function gets called whenever the event fires on the object
Syntax
bSuccess = object.attachEvent(sEvent, fpNotify)
Boolean. Returns one of the following possible values:
true The function was bound successfully to the event.
false The function was not bound to the event.
==================================================================
detachEvent
Unbinds the specified function from the event, so that the function stops receiving notifications when the event fires.
var fnClick=function()
{
alert('Clicked');
} function attachEventDemo()
{
var oDiv= document.getElementById('div1');
var bl;
bl=oDiv.attachEvent("onclick",fnClick); //增加事件处理
alert(bl); //显示事件是否添加成功
if (bl)
{
alert('增加事件处理成功');
}
}
function detachEventDemo()
{
var oDiv=document.getElementById('div1');
oDiv.detachEvent("onclick",fnClick); //取消事件处理
}
<form>
<div id="div1">abc</div>
<br>
<input type="button" id="butAttach" value="attachEvent" onclick="attachEventDemo()">
<input type="button" id="butDetach" value="detachEvent" onclick="detachEventDemo()">
</form>
var divClick =function()
{
alert('div click');
}
function DivAddEventListener()
{
var div=document.getElementById('myDiv');
div.addEventListener("click",divClick,false);
alert('AddEventListener success');
}
function DivRemoveEventListener()
{
var div=document.getElementById('myDiv');
div.removeEventListener("click",divClick,false);
alert('Remove Event Listener success');
}
<div id='myDiv'>abc</div><br>
<input type=button onclick="DivAddEventListener()" value="AddEventListener"><br>
<input type =button onclick="DivRemoveEventListener()" value ="RemoveEventListener">
此内容由惯性聚合(RSS阅读器)自动聚合整理,仅供阅读参考。 原文来自 — 版权归原作者所有。