一, 4 种事件处理程序
事件就是用户或浏览器自身执行的某种操作, 而事件处理程序即为响应某个事件的函数. 事件处理程序大致分为 5 种:
html 事件处理程序
DOM 0 级事件处理程序
DOM 2 级事件处理程序
IE 事件处理程序
二, HTML 事件处理程序
什么是 HTML 事件处理程序呢? 显然, HTML 事件处理程序是写在 HTML 标签内的函数.
HTML 事件处理程序有两种写法:
最常见的是 HTML 中的事件处理
<button onclick="alert('我是 HTML 事件处理程序方法 1')"> 按钮 1</button>
调用页面中的函数执行
- <button onclick="test()"> 按钮 2</button>
- <script type="text/javascript">
- function fun(){
- alert('我是 HTML 事件处理程序方法 2');
- };
- </script>
但是 HTML 事件处理程序存在着一些问题, 比如修改时需要该动 HTML 代码和函数处理的的代码, 比较麻烦.
三, DOM 0 级事件处理程序 (所有浏览器都支持)
DOM 0 级事件处理程序是将一个函数赋值给一个事件处理程序属性.
- <button id="btn"> 我是 DOM 0 级事件处理程序 </button>
- <script type="text/javascript">
- var btn = document.getElementById("btn");
- btn.onclick = function(){
- alert("我是 DOM 0 级事件处理程序");
- }
- </script>
删除事件处理程序的方法是:
btn.onclick = null;
四, DOM 2 级事件处理程序 (只有 IE9,Chrome,Safari 和 opera 支持)
DOM 2 级事件处理程序有两个方法:
- addEventListener() // 添加事件监听器
- removeEventListener() // 移除事件监听器
参数:
type -- 事件名, 如: click,change,mouseover 等
handler -- 事件处理函数
true/false --true: 捕获阶段调用事件处理程序, false: 冒泡阶段调用事件处理程序.
例子:
- <button id="btn"> 我是 DOM 2 级事件处理程序 </button>
- <script type="text/javascript">
- var btn = document.getElementById("btn");
- var test = function(){
- alert("我是 DOM 2 级事件处理程序!");
- };
- // 添加事件监听器
- btn.addEventListener("click", test, false);
- // 移除事件监听器
- btn.removeEventListener("click", test, false);
- </script>
五, IE 事件处理程序
IE 事件处理程序同样也有两个方法:
- attachEvent() // 添加事件
- detaEvent() // 移除事件
参数:
type -- 事件名, 如: click,change,mouseover 等
handler -- 事件处理函数
例子:
- <button id="btn"> 我是 IE 事件处理程序 </button>
- <script type="text/javascript">
- var btn = document.getElementById("btn");
- var test = function(){
- alert("我是 IE 事件处理程序!");
- };
- // 添加事件
- btn.attachEvent("onclick", test);
- // 移除事件
- btn.detaEvent("onclick", test);
- </script>
六, 跨浏览器事件处理程序
- <button id="btn"> 我是跨浏览器事件处理程序 </button>
- <script type="text/javascript">
- function showMes(){
- alert('我是跨浏览器事件处理程序');
- };
- var btn = document.getElementById('btn');
- <!-- 跨浏览器事件处理程序 -->
- var eventUtil = {
- // 添加句柄 (handler: 触发什么操作)
- addHandler: function(element, type, handler){
- if (element.addEventListener) {
- // DOM 2 级事件处理程序判断
- element.addEventListener(type, handler, false);
- } else if (element.attachEvent) {
- // IE 事件处理程序判断
- element.attachEvent('on'+type, handler);
- } else {
- // DOM 0 级事件处理程序判断
- element['on'+type] = handler;
- }
- },
- // 删除句柄 (handler: 触发什么操作)
- removeHandler: function(element, type, handler){
- if (element.removeEventListener) {
- // DOM 2 级事件处理程序判断
- element.removeEventListener(type, handler, false);
- } else if (element.detachEvent) {
- // IE 事件处理程序判断
- element.detachEvent('on'+type, handler);
- } else {
- // DOM 0 级事件处理程序判断
- element['on'+type] = null;
- }
- }
- };
- eventUtil.addHandler(btn, 'click', showMes);
- eventUtil.removeHandler(btn, 'click', showMes);
- </script>
注: 要想弹出对话框就要注释掉调用移除函数的代码, 比如:
eventUtil.removeHandler(btn, 'click', showMes);
希望本文对大家的学习能够有所帮助, 感谢大家的阅览!
来源: http://www.jianshu.com/p/20b7a7ac555f