你的位置:首页 > Java教程

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


事件:用户或浏览器自身执行的动作;

事件处理程序:响应某个事件的函数;

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

1、DOM事件流

"DOM2级事件"规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。单击<div>元素会按照下图顺序触发事件。

实际的目标(<div>元素)在捕获阶段不会接收到事件,意味着在捕获阶段事件从document到<html>再到<body>后就停止了。在处于目标阶段,事件在<div>上发生,并在事件处理中被看成冒泡阶段的一部分。然后,冒泡阶段发生,事件又传播回文档。

2、事件处理程序

(1)HTML事件处理程序

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

<input type="button" value="click me" onclick="alert(event.type)">//click<input type="button" value="button1" onclick="alert(this.value)">//button1<input type="button" value="click me" onclick="showMessage()"><script>function showMessage(){  alert('Hello world');}</script>

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

(2)DOM0级事件处理程序

通过JavaScript制定事件处理程序的传统方式,是将一个函数赋值给一个事件处理程序属性。每个元素(包括window和document)都有自己的事件处理程序属性。这些属性通常全部小写。

var bt = document.getElementById('myButton');bt.onclick = 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);//移除

 3、DOM中的事件(event)对象

var btn = document.getElementById('mybtn');var handler = function(event){  switch(event.type){    case 'click':      alert('clicked');      event.stopPropagation();//立即停止事件在DOM层次中的传播      break;    case 'mouseover':      event.target.style.backgroundColor = 'red';      break;    case 'mouseout':      event.target.style.backgroundColor = '';      break;  }}btn.onclick = handler;btn.onmouseover = handler;btn.onmouseout = handler;document.body.onclick = function(){  alert('body clicked');}