zoukankan      html  css  js  c++  java
  • 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);
  • 相关阅读:
    推荐系统 蒋凡译 第一章 引言 读书笔记
    神经网络与深度学习 邱锡鹏 第5章 卷积神经网络 读书笔记
    神经网络与深度学习 邱锡鹏 第4章 前馈神经网络 读书笔记
    神经网络与深度学习 邱锡鹏 第3章 线性模型 读书笔记
    神经网络与深度学习 邱锡鹏 第2章 机器学习概述 读书笔记
    神经网络与深度学习 邱锡鹏 第1章 绪论 作业
    神经网络与深度学习 邱锡鹏 第1章 绪论 读书笔记
    算法笔记 上机训练实战指南 第13章 专题扩展 学习笔记
    算法笔记 第13章 专题扩展 学习笔记
    算法笔记 上机训练实战指南 第11章 提高篇(5)--动态规划专题 学习笔记
  • 原文地址:https://www.cnblogs.com/microcosm/p/7053407.html
Copyright © 2011-2022 走看看