javaScript之事件处理程序

Posted 花信

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javaScript之事件处理程序相关的知识,希望对你有一定的参考价值。

        事件就是用户或浏览器自身执行的某个动作,javascripthtml的交互也是通过事件实现的。而相应某个事件的函数就叫做事件处理函数。包括以下几种:

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之事件处理程序的主要内容,如果未能解决你的问题,请参考以下文章

javaScript之事件处理程序

《javascript高级程序设计》之事件

JavaScript学习之事件委托

译文:18个实用的JavaScript代码片段,助你快速处理日常编程任务

JavaScript性能优化之事件委托

JavaScript之jQuery-4 jQuery事件(页面加载后执行事件处理事件冒泡事件对象模拟操作)