首页 > 代码库 > javaScript之事件处理程序
javaScript之事件处理程序
事件就是用户或浏览器自身执行的某个动作，JavaScript与HTML的交互也是通过事件实现的。而相应某个事件的函数就叫做事件处理函数。包括以下几种：
1.HTML事件处理程序
某个元素支持的每种事件，都可以使用一个相应的事件处理程序相同的HTML特性指定。这个特性的值能执行JavaScript代码。
<input type=”button” value=http://www.mamicode.com/”按钮” onclick=”showMessage()”>"color: #0000ff;">function showMessage(){ alert(“Hello”)}</script>封装元素属性值的函数有一个局部变量event，也就是事件对象，通过event可以直接访问事件对象。函数内部的this值等于事件的目标元素。该函数可以使用with扩展作用域
function(){ with(document){ //可访问document with(this){ //可访问该元素本身的属性值 } }}
缺点：
（1）存在时差，用户可能在HTML元素刚显示就触发事件，但是当前并不一定具备执行条件，比如JS代码没有下载完成。可以使用try-catch抛出错误。
（2）扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。
（3）ＨＴＭＬ代码与JavaScript代码高度耦合。如果需要更换事件处理程序，需要改动两个地方。
２.ＤＯＭ０级事件处理程序
与ＨＴＭＬ事件处理程序相同的是都在元素属性上添加事件处理程序。不同的地方是ＤＯＭ０级在JavaScript代码中获取元素引用，在引用属性上添加事件处理程序。
<input type=”button” value=http://www.mamicode.com/”按钮” ｉｄ＝＂ｂｔｎ＂>"color: #0000ff;">var Btn = document.getElementById(“btn”);Btn.onclick = function(){ alert(“Hello”)};</script>
程序中的this引用当前元素的作用域。
删除DOM0级事件
Btn.onclick = null;３．DOM2级事件处理程序
“DOM2级事件”定义了两个方法，用于指定和删除事件处理程序：addEventListener()和removeEventListener()。它们都接受3个参数：事件名，事件处理程序函数和一个布尔值。最后一个布尔值是true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序。第三个参数可选，默认值是false。与DOM0级相同，程序中的this引用当前元素的作用域。
<input type=”button” value=http://www.mamicode.com/”按钮” id＝”btn”>"color: #0000ff;">var Btn = document.getElementById(“btn”);Btn.addEventListener(“click”,function(){alert(“Hello”)},false};</script>
可添加多个事件处理程序，不会被覆盖，从上向下执行。
通过removeEventListener()移除事件处理程序，对于添加的匿名函数无法移除。
４．IE事件处理程序
“IE事件”处理程序用于指定和删除事件处理程序的方法有：attachEvent ()和detachEvent ()。这两个方法接受两个参数：事件处理程序名和事件处理程序函数名。通过attachEvent ()添加的事件默认都会添加到冒泡阶段。
<input type=”button” value=http://www.mamicode.com/”按钮” id＝”btn”>"color: #0000ff;">var Btn = document.getElementById(“btn”);Btn.attachEvent(“onclick”,function(){alert(“Hello”)} };</script>
与DOM0级不同的是，事件处理程序会在全局作用域中运行，即this指向window。
attachEvent ()也可以添加多个事件处理程序，但是执行顺序是自下而上。
５.跨浏览器的事件处理程序
核心视情况的分别处理ＤＯＭ０级，ＤＯＭ２级和ＩＥ事件处理程序。
Var ｅventHandler ={ addHandler: function(element, type, handler){ if(element.addEventListener){ element.addEventListener(type, handler, false); }else if(element.attachEvent){ element. attachEvent (“on”+type, handler); }else{ element[“on”+type] = handler; }, removeHandler: function(element, type, handler){ if(element.removeEventListener){ element. removeEventListener(type, handler, false); }else if(element.detach Event){ element. detach Event (“on”+type, handler); }else{ element[“on”+type] = null; } }};
eventHandler接受3个参数，分别是要操作元素的引用、事件名和事件处理函数。
调用方法
var Btn = document.getElementById(“btn”);var handler = function(){ alert(“Hello”)};eventHandler. addHandler (Btn, “click”, handler);removeHandler. addHandler (Btn, “click”, handler);
javaScript之事件处理程序