学科分类
目录
JavaScript网页编程

注册事件

在JavaScript中,注册事件(绑定事件)有两种方式,即传统方式注册事件和事件监听方式注册事件。下面我们分别进行讲解。

1. 传统方式

在JavaScript代码中,经常使用on开头的事件(如onclick),为操作的DOM元素对象添加事件与事件处理程序。具体语法格式如下。

元素对象.事件 = 事件的处理程序;


// 示例

oBtn.onclick = function () { }

在上述语法中,元素对象是指使用getElementById()等方法获取到的元素节点。这种方式注册事件的特点在于注册事件的唯一性,即同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数。

2. 事件监听方式

为了给同一个DOM对象的同一个事件添加多个事件处理程序,DOM 2级事件模型中引入了事件流的概念,可以让DOM对象通过事件监听的方式实现事件的绑定。由于不同浏览器采用的事件流实现方式不同,事件监听的实现存在兼容性问题。通常根据浏览器的内核,可以把浏览器划分为两大类,一类是早期版本的IE浏览器(如IE 6~IE 8),一类是遵循W3C标准的浏览器(以下简称标准浏览器)。

接下来我们将根据不同类型的浏览器,分别介绍事件监听的实现方式。

(1) 早期IE内核的浏览器

在早期版本的IE浏览器中,事件监听的语法格式如下。

DOM对象.attachEvent(type, callback);

在上述语法中,参数type指的是为DOM对象绑定的事件类型,它是由on与事件名称组成的,如onclick。参数callback表示事件的处理程序。

(2) 标准浏览器

标准浏览器,包括IE 8版本以上的IE浏览器,以及新版的Firefox、Chrome等浏览器。具体语法格式如下。

DOM对象.addEventListener(type, callback, [capture]);

在上述语法中,参数type指的是DOM对象绑定的事件类型,它是由事件名称设置的,如click。参数callback表示事件的处理程序。参数capture默认值为false,表示在冒泡阶段完成事件处理,将其设置为true时,表示在捕获阶段完成事件处理。

以上介绍的两种类型的浏览器,在实现事件监听时除了语法不同外,事件处理程序的触发顺序也不相同。早期版本IE浏览器的示例代码如下。

<div id="t">test</div>

<script>

var obj = document.getElementById('t');

// 添加第1个事件处理程序

obj.attachEvent('onclick',function(){

  console.log('one');

});

// 添加第2个事件处理程序

obj.attachEvent('onclick',function(){

 console.log('two');

});

</script>

标准浏览器的示例代码如下。

<div id="t">test</div>

<script>

var obj = document.getElementById('t');

// 添加第1个事件处理程序

obj.addEventListener('click', function(){

  console.log('one');

});

// 添加第2个事件处理程序

obj.addEventListener('click', function(){

  console.log('two');

});

</script>

以上两种方式用于为<div>标签的单击事件添加两个处理程序,第1个处理程序在控制台输出one,第2个处理程序在控制台输出two。接下来我们在test.html文件中保存早期版本IE浏览器的相关事件监听代码,在IE 11的开发人员工具中,通过IE 8兼容模式来测试,效果如图1左侧所示。同理,在Chrome浏览器中访问,效果如图1右侧所示。

imgimg

图1 对比IE 8与Chrome事件监听的触发输出

从图1可以看出,同一个对象的相同事件,早期版本IE浏览器的事件处理程序按照添加的顺序倒序执行,因此输出结果依次为two和one;而标准浏览器的事件处理程序按照添加顺序正序执行,因此输出的结果依次为one和two。

点击此处
隐藏目录