JS事件处理

JavaScript处理事件的基本机制:
对DOM元素绑定事件处理函数;
监听用户的操作;
当用户在相应的DOM元素上进行与绑定事件对应的操作时,事件处理函数做出响应;
将处理结果更新到 HTML 文档。

DOM事件编程

事件驱动编程:所谓事件驱动,简单地说就是你点什么按钮(即产生什么事件),电脑执行什么操作(即调用什么函数).当然事件不仅限于用户的操作. 当对象处于某种状态时,可以发出一个消息通知,然后对这个消息感兴趣的程序就可以执行。

事件驱动编程中的几个核心对象

事件源:谁发出事件通知,发出消息;也就是事件主体(通常指元素和标签);
事件名称:发出什么样的通知的名称,比如鼠标到我头上了,我被别人点了一下;
事件响应函数:谁对这个这个事件感兴趣,当这个事件发生时要执行什么样的操作;
事件对象:一般来说,当事件发生时,会产生一个描述该事件的具体对象,包括具体的参数等一起发给响应函数,好让他们通过事件对象来了解事件更加详细的信息。

示例

<p style="color: red" id="p1">Hello world!</p>//事件源

function shout(e){//响应函数,监听函数
alert(e.clientX);//e事件对象
}
document.getElementById("p1").onclick=shout;//在事件源上绑定事件响应函数

事件监听

事件监听,也就是指对指定对象的指定事件指定响应处理处理函数;

给元素添加事件的三种方式:

第一种:

在标签上使用onclick属性配置

第二种:

在js代码中,使用 "元素.onclick=响应函数"进行事件监听

第三种:

使用方法来完成对元素的监听
IE

[Object].attachEvent(“name_of_event_handler”, fnHandler);
  name_of_event_handler>>事件操作前,必须加"on"!!!
  多次添加监听后,触发顺序: 先添加,后执行
              
[Object].detachEvent(“name_of_event_handler”, fnHandler);
    fnHandler : 移除时,传入的"事件响应函数",必须和添加时,传入的是同一个(通过相同标识符引用的那一个函数)
    匿名函数,每次创建的都不同    

W3C

[Object].addEventListener(“name_of_event”, fnHandler);
     name_of_event>>直接使用事件(操作)名称
     多次添加监听后,触发顺序: 先添加,先执行           

[Object].removeEventListener(“name_of_event”, fnHandler);
    fnHandler : 移除时,传入的"事件响应函数",必须和添加时,传入的是同一个(通过相同标识符引用的那一个函数)
    匿名函数,每次创建的都不同    

定义一个通用的添加事件的函数

function addListener(element,eventName,eventFn){
    if(element.attachEvent){
        element.attachEvent("on"+eventName,eventFn);
    }else{
        element.addEventListener(eventName,eventFn);
    }
}

事件对象中包括了事件源及事件的具体描述信息,一般包括事件源,鼠标事件或键盘事件的相关信息;在监听函数中有时候需要通过事件对象来获取更详细的事件信息,然后再进行处理

oDiv.onclick = function (oEvent) {
//参数oEvent即为事件对象
}

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注