JavaScript事件

2017-11-11  本文已影响0人  yohn

JavaScript与HTML之间的交互是通过事件完成的。
可以使用事件侦听器来预订事件，正在传统软件工程中被称为观察员模式
观察员模式支持页面行为与外观的松散耦合
ECMAScript因DOM而丰富多彩，因IE而烦的一笔

零、事件流

事件流描述的是从页面中接收事件的顺序，有趣的是，IE和Netscape居然采用了几乎相反的事件流。IE为冒泡流，Netscape Communicator采用捕获流（虽然现在很少使用），下面介绍下二者的定义，以及DOM标准的事件流

<div> => <body> => <html> => Document

下面列出冒泡流的图示：
找不到图，，， 算了算了
需要注意的是，IE5.5级更早版本的事件冒泡会跳过<html>元素，从<body>直接跳到document对象。

  1. “DOM2级事件”规定了事件流的三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。
  2. DOM事件流中，事件捕获阶段不会接收到事件，即在捕获阶段不涉及到目标对象，下一个阶段为处于目标阶段，因此事件处理可以看成冒泡流的一部分。
  3. 但是IE9、Safari、Chrome、Firefox、Opera9.5及更高版本在捕获阶段触发事件对象上的事件。结果就是有两个机会在目标对象上触发事件（DOM2方法中addEventListener中的第三个参数true/false便可决定触发事件发生在哪个阶段）

一、事件监听器

事件处理程序又叫事件监听器，是响应浏览器事件的函数，事件监听器的名字以on开头。
按类型分，大致可以分为：HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序、IE事件处理程序

HTML事件处理程序

通过与相应事件处理程序同名的HTML特性来制定事件监听器的方法叫做HTML事件处理程序，其中，特性的值为相应的HTML代码。需要注意以下几点：

  1. 镶嵌在HTML中的JavaScript代码不能使用未经转义的HTML语法字符，如&``""``<``>。若要使用这些字符，需使用转义字符。
  2. 事件处理程序中的代码在执行时，有权限访问全局作用域中的任何代码，且这个函数类似于使用with扩展作用域
  3. 在事件处理程序内部，this指向事件的目标元素
  4. 允许跨表单字段访问，无需引用表单元素就能访问其他表单字段
  5. 由于时差，作用域链，紧密耦合的原因，最好减少使用
DOM0事件处理程序

方式：将一个函数赋值给一个元素（或对象）的事件处理程序属性，并且事件处理程序是在元素的作用域中进行的。

element.onkeydown = function(){}
  1. 以DOM0级事件处理程序会在事件流的冒泡流中进行
  2. 删除通过DOM0级方法制定的事件处理程序的方法
element.onclick = null;
DOM2级事件处理程序

DOM2级定义了两个方法addEventListener()和removeEventListener()，接收三个参数：要处理的事件名，作为事件处理程序的函数，在捕获阶段调用事件处理程序（true）还是在冒泡阶段调用事件处理程序（false）

element.addEventListener('click',function(){},false)
  1. DOM2级方法添加事件处理程序的运行顺序是按照添加顺序的
  2. 匿名函数无法被`removeEventListener·移除
  3. 一般都是讲布尔值设置为false，这样可最大限度兼容各种浏览器
IE事件处理程序

关于IE事件处理程序，这里主要讲下与DOM级事件处理成序的区别

element.attachEvent('onclick',function(){})  //事件名称+on
  1. 包含两个方法：attachEvent，detachEvent，接受两个参数：事件处理程序名称，事件处理程序函数，此处事件处理程序名称要加on。注意，IE8级更早版本只支持冒泡流
  2. 使用IE方法时，函数作用域为全局作用域，this指向window
  3. IE方法添加的事件处理程序以相反的顺序被触发（与DOM相反）

二、事件对象

注意区分JavaScript中最重要的两个对象：目标对象和事件对象，目标对象对应于事件流中的被触发的目标元素或文档，事件对象对应于触发事件时传入事件监听器的参数。事件对象包含着所有与事件有关的信息，包括事件的目标元素，事件的类型及其他与特定事件相关的信息。

DOM事件对象

兼容DOM的浏览器会将一个event对象传入事件处理程序

element.onkeydown=function(event){
  alert(event.type)}

利用event对象可以实现许多功能，如通过一个函数处理多个事件，防止事件默认行为，防止触发连带事件处理程序。具体见《JavaScript高级程序设计》

IE事件对象

IE中同样存在event对象，不过对象有几种存在的方式，如何调用取决于事件处理程序的类型：

  1. DOM0级方法中，event对象作为window对象的一个属性
  2. IE事件程序中，event既可直接调用，也可使用window对象访问。

三、跨浏览器兼容

为了解决跨浏览器兼容问题，大家可以使用能够隔离浏览器差异的JavaScript库，也可以利用能力检测自己制作一个兼容脚本
下面是兼容的脚本

var EventUtil={
    addHandler: function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false)
        }else if(element.attachElement){
            element.attachEvent('on'+type,handler)
        }else{
            element['on'+type]=handler;
        }
    },//添加事件处理程序

    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false)
        }else if(element.detachEvent){
            element.detachEvent('on'+type,handler)
        }else{
            element['on'+type]=null;
        }
    },//移除事件处理程序

    getEvent: function(event){
        return event?event:window.event;
    },//获取事件对象

    getTarget: function(event){
        return event.target || event.srcElement;
    },//获取目标对象

preventDefault: function(event){
        if(event.preventDefault()){
            event.preventDefault()
        }else{
            event.returnValue = null;
        }
    },//防止事件默认行为

    stopPropagation: function(event){
        if(event.stopPropagation){
            event.stopPropagation()
        }else {
            event.cancelBubble;
        }
    }
};

四、事件类型

DOM3级事件规定了以下事件：

上一篇下一篇

猜你喜欢

热点阅读