javaScript之事件处理程序
Posted 花信
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javaScript之事件处理程序相关的知识,希望对你有一定的参考价值。
事件就是用户或浏览器自身执行的某个动作,javascript与html的交互也是通过事件实现的。而相应某个事件的函数就叫做事件处理函数。包括以下几种:
1.HTML事件处理程序
某个元素支持的每种事件,都可以使用一个相应的事件处理程序相同的HTML特性指定。这个特性的值能执行JavaScript代码。
<input type=”button” value=”按钮” onclick=”showMessage()”> <script> function showMessage(){ alert(“Hello”) } </script>
封装元素属性值的函数有一个局部变量event,也就是事件对象,通过event可以直接访问事件对象。函数内部的this值等于事件的目标元素。该函数可以使用with扩展作用域
function(){ with(document){ //可访问document with(this){ //可访问该元素本身的属性值 } } }
缺点:
(1)存在时差,用户可能在HTML元素刚显示就触发事件,但是当前并不一定具备执行条件,比如JS代码没有下载完成。可以使用try-catch抛出错误。
(2)扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。
(3)HTML代码与JavaScript代码高度耦合。如果需要更换事件处理程序,需要改动两个地方。
2.DOM0级事件处理程序
与HTML事件处理程序相同的是都在元素属性上添加事件处理程序。不同的地方是DOM0级在JavaScript代码中获取元素引用,在引用属性上添加事件处理程序。
<input type=”button” value=”按钮” id="btn"> <script> var Btn = document.getElementById(“btn”); Btn.onclick = function(){ alert(“Hello”) }; </script>
程序中的this引用当前元素的作用域。
删除DOM0级事件
Btn.onclick = null;
3.DOM2级事件处理程序
“DOM2级事件”定义了两个方法,用于指定和删除事件处理程序:addEventListener()和removeEventListener()。它们都接受3个参数:事件名,事件处理程序函数和一个布尔值。最后一个布尔值是true表示在捕获阶段调用事件处理程序,false表示在冒泡阶段调用事件处理程序。第三个参数可选,默认值是false。与DOM0级相同,程序中的this引用当前元素的作用域。
<input type=”button” value=”按钮” id=”btn”> <script> var Btn = document.getElementById(“btn”); Btn.addEventListener(“click”,function(){alert(“Hello”)},false}; </script>
可添加多个事件处理程序,不会被覆盖,从上向下执行。
通过removeEventListener()移除事件处理程序,对于添加的匿名函数无法移除。
4.IE事件处理程序
“IE事件”处理程序用于指定和删除事件处理程序的方法有:attachEvent ()和detachEvent ()。这两个方法接受两个参数:事件处理程序名和事件处理程序函数名。通过attachEvent ()添加的事件默认都会添加到冒泡阶段。
<input type=”button” value=”按钮” id=”btn”> <script> var Btn = document.getElementById(“btn”); Btn.attachEvent(“onclick”,function(){alert(“Hello”)} }; </script>
与DOM0级不同的是,事件处理程序会在全局作用域中运行,即this指向window。
attachEvent ()也可以添加多个事件处理程序,但是执行顺序是自下而上。
5.跨浏览器的事件处理程序
核心视情况的分别处理DOM0级,DOM2级和IE事件处理程序。
Var eventHandler ={ 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之事件处理程序的主要内容,如果未能解决你的问题,请参考以下文章