java 事件处理程序_[Java教程]js 事件处理程序

[Java教程]js 事件处理程序

0 2015-12-23 18:00:07

事件：用户或浏览器自身执行的动作；

事件处理程序：响应某个事件的函数；

事件流：从页面中接收事件的顺序。

1、DOM事件流

"DOM2级事件"规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。单击

元素会按照下图顺序触发事件。

实际的目标(

元素)在捕获阶段不会接收到事件，意味着在捕获阶段事件从document到再到后就停止了。在处于目标阶段，事件在

上发生，并在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回文档。

2、事件处理程序

(1)HTML事件处理程序

某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码。//click//button1

存在问题：存在时差问题；HTML与JavaScript代码紧密耦合。

(2)DOM0级事件处理程序

通过JavaScript制定事件处理程序的传统方式，是将一个函数赋值给一个事件处理程序属性。每个元素(包括window和document)都有自己的事件处理程序属性。这些属性通常全部小写。var bt = document.getElementById('myButton');bt.οnclick= function(){ alert(this.id);//DOM0级方法指定的事件处理程序被认为是元素的方法，程序中的this引用当前元素}

bt.onclick = null;//删除事件处理程序

(3)DOM2级事件处理程序

addEventListener()和removeEventListener()传入的参数相同，意味着addEventListener()添加的匿名函数将无法移除。var bt1 = document.getElementById('myButton1');bt1.addEventListener('click', function(){ alert(this.id);}, false);//false表示在冒泡阶段调用事件处理程序，true表示在捕获阶段调用事件处理程序，大多数情况下是用falsevar handler = function(){ alert('hello world');};bt1.addEventListener('click', handler, false);bt1.removeEventListener('click', handler, false);//移除

(4)IE事件处理程序

由于IE8更早版本只支持事件冒泡，attachEvent()添加的事件处理程序会被添加到冒泡阶段。var bt1 = document.getElementById('myButton1');

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

alert(this == window);//true,事件处理程序会在全局作用域中运行

});var handler1 = function(){ alert('world');};bt1.attachEvent('onclick', handler1);//iebt1.detachEvent('onclick', handler1);//移除

本文网址：http://www.shaoqun.com/a/171391.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

JS

0