javascript的事件处理(一)——基础原理
2012-01-16 21:25
393 查看
事件是用户或者游览器自身执行的某种动作,诸如click,load,mouseover,都是时间的名称。响应某事件的函数就叫做事件处理程序(或者事件侦听器),事件处理程序的名字往往以'on'开头,比如click事件的事件处理程序是onclick,load时间的是onload。
为事件指定处理程序的方式有好几种:
1. html事件处理程序
这里特别一个问题,事件处理程中的代码在执行时,有权访问全局作用域中的任何代码。
但在html中指定事件处处理程序有两个缺点:
1. 时差问题。
2. html与javascript代码紧密耦合
第二点比较容易理解,这里重点讲下第一点,比如:
在段代码在页面刚出现时点击按钮是没有用的,10s后再点击才能触发相应事件,这里因为用户可能会在hmtl元素一出现就触发,但当时的事件处理程序可能尚不具备执行条件,这样就会报错。
由于以上两个缺陷,好的开发者应该摒弃这种事件处理程序。
2. DOM0级事件处理程序
通过Javascript制定事件处理程序的传统方式,就是将一个函数赋值给一个事件处理程序属性。这种方法至今仍然为所有现代游览器所支持,一是因为简单,而是跨游览器。每个元素(包括window和document)都有自己的事件处理程序属性,这些属性通常全部小写,例如onclick。将这种属性的值设置为一个函数,就可以指定事件处理程序。
具体如下:
同样的道理,在这些代码运行以前不会指定事件处理程序,
特别强调的是,使用DOM0级方法指定的事件处理程序被认为是元素的方法,因此,这时候的事件处理程序在元素的作用域中运行;换句话说,程序中的this引用当前元素。比如还是上例,代码换成:
这时就会显示 mybutton3
可以在事件处理程序中通过this访问元素的任何属性和方法,以这种方式添加的事件处理程序都在事件流的冒泡阶段被处理。
当然只要像下面这样将事件处理程序属性设置为null,即可删除通过DOM0级方法指定的时间处理程序。
3. DOM2级事件处理程序
“DOM2级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventLister()。所有DOM节点中都包含这两个方法,并且他们都接受3个参数:要处理的事件名,作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true,表示在捕捉阶段调用事件调用事件处理程序,如果是false,表示在冒泡阶段调用事件处理程序。比如:
通过addEventListener()添加的时间处理程序只能使用removeEventListener()来移除;移除时传入的参数和添加处理程序时使用的参数相同。这意味着通过addEventListener()添加的匿名函数将无法移除,比如:
这段代码之所以没有起作用是因为实际上,第二个参数与addEventListener()中的那个是完全不同的函数。正确的做法:
javascript的事件处理(二)—— 跨游览器编程
为事件指定处理程序的方式有好几种:
1. html事件处理程序
<button id = 'mybutton1' onclick = 'alert("button1")' >Button1</button>
<button id = 'mybutton2' onclick = 'handleClick()' >Button2</button> <script type = 'text/javascript'> function handleClick(){ alert("button2"); } </script>
这里特别一个问题,事件处理程中的代码在执行时,有权访问全局作用域中的任何代码。
但在html中指定事件处处理程序有两个缺点:
1. 时差问题。
2. html与javascript代码紧密耦合
第二点比较容易理解,这里重点讲下第一点,比如:
<html> <head> <title>Test UI Thread</title> <script type = 'text/javascript'> var handleClick = null; setTimeout(function(){ handleClick = function (){ alert("button2"); } },10000) </script> </head> <body> <div> <button id = 'mybutton2' onclick = 'handleClick()' >Button2</button> </div> </body> </html>
在段代码在页面刚出现时点击按钮是没有用的,10s后再点击才能触发相应事件,这里因为用户可能会在hmtl元素一出现就触发,但当时的事件处理程序可能尚不具备执行条件,这样就会报错。
由于以上两个缺陷,好的开发者应该摒弃这种事件处理程序。
2. DOM0级事件处理程序
通过Javascript制定事件处理程序的传统方式,就是将一个函数赋值给一个事件处理程序属性。这种方法至今仍然为所有现代游览器所支持,一是因为简单,而是跨游览器。每个元素(包括window和document)都有自己的事件处理程序属性,这些属性通常全部小写,例如onclick。将这种属性的值设置为一个函数,就可以指定事件处理程序。
具体如下:
<button id = 'mybutton3' >Button3</button> <script type = 'text/javascript'> var bn3 = document.getElementById('mybutton3'); bn3.onclick = function(){ alert('button3'); } </script>
同样的道理,在这些代码运行以前不会指定事件处理程序,
特别强调的是,使用DOM0级方法指定的事件处理程序被认为是元素的方法,因此,这时候的事件处理程序在元素的作用域中运行;换句话说,程序中的this引用当前元素。比如还是上例,代码换成:
var bn3 = document.getElementById('mybutton3'); bn3.onclick = function(){ alert(this.id);// mybutton3 }
这时就会显示 mybutton3
可以在事件处理程序中通过this访问元素的任何属性和方法,以这种方式添加的事件处理程序都在事件流的冒泡阶段被处理。
当然只要像下面这样将事件处理程序属性设置为null,即可删除通过DOM0级方法指定的时间处理程序。
bn3.onclick = null;
3. DOM2级事件处理程序
“DOM2级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventLister()。所有DOM节点中都包含这两个方法,并且他们都接受3个参数:要处理的事件名,作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true,表示在捕捉阶段调用事件调用事件处理程序,如果是false,表示在冒泡阶段调用事件处理程序。比如:
<button id = 'mybutton4' >Button4</button> <script type = 'text/javascript'> var bn4 = document.getElementById('mybutton4'); /* * 最后一个参数布尔值 * true: 捕捉阶段调用事件处理程序 * false: 在冒泡阶段调用事件处理程序 * 大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度地兼容各种游览器 */ bn4.addEventListener('click',function(){ alert('button4'); alert(this.id); },false); </script>
通过addEventListener()添加的时间处理程序只能使用removeEventListener()来移除;移除时传入的参数和添加处理程序时使用的参数相同。这意味着通过addEventListener()添加的匿名函数将无法移除,比如:
var bn4 = document.getElementById('mybutton4'); bn4.addEventListener('click',function(){ alert('add event listener of button4'); },false); //没有用 bn4.removeEventListener('click',function(){ alert('remove event listener of button4'); });
这段代码之所以没有起作用是因为实际上,第二个参数与addEventListener()中的那个是完全不同的函数。正确的做法:
var hadler = function(){ alert('add event listener of button4'); }; bn4.addEventListener('click',hadler,false); //有用 bn4.removeEventListener('click',hadler,false);
javascript的事件处理(二)—— 跨游览器编程
相关文章推荐
- javascript的事件处理(一)——基础原理
- javascript事件处理--关于事件的一些基础定义
- javascript 事件处理基础知识记录
- javascript基础-常见控件事件处理
- javascript基础-常见控件事件处理
- JavaScript基础----24JS事件详解-事件处理
- JSF 2 简介,第 3 部分: 事件处理、JavaScript 和 Ajax
- JavaScript:下拉列表框的事件处理
- JavaScript事件处理程序
- JAVA基础:GUI事件处理及布局要点
- JavaScript基础之事件
- JavaScript中为事件指定处理程序的五种方式分析
- JavaScript基础——处理字符串
- Javascript之跨浏览器的事件处理程序
- javascript中的事件流,事件处理程序/事件监听器
- java基础66 JavaScript中的事件、localtion对象、screen对象(网页知识)
- Android零基础入门第66节:RecyclerView点击事件处理
- ASP.NET Google Maps Javascript API V3 实战基础篇一获取和设置事件处理程序中的属性
- javascript基础(鼠标事件拖拽,setCapture()方法)(三十六)
- JavaScript之事件处理(监听)函数