JavaScript事件处理程序

最新推荐文章于 2022-08-09 17:19:19 发布

洛神赋在csdn

最新推荐文章于 2022-08-09 17:19:19 发布

阅读量156

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_23143555/article/details/81261290

版权

JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

html事件处理程序
元素内置了一些预定的事件处理程序
input有自己的事件 button也有自己的事件

html特性和事件处理程序同名。
click事件，onclick事件处理程序。
onclick出现在html中成为html特性。
这个概念要明晰。
html特性的值可以是可执行的JavaScript语句，也可以是script脚本。
<input type="button" value="武汉" onclick="alert('珞珈山')"/>
----------------------------------------------------------------------
this的指向取决于他所处的位置
<html>
<head>
  <script>
    function show() { alert(this); }
  </script>
</head>
<body>
  <input id="city" type="button" value="武汉" onclick="show()"/>
  <input id="city" type="button" value="济南" onclick="alert(this)"/>
</body>
</html>
[object Window]
[object HTMLInputElement]
-----------------------------------------------------------------------
html事件处理程序和js事件处理程序在this作用域上的区别：
<html>
<body>
  <input id="city" type="button" value="武汉" onclick="show()"/>
  <input id="province" type="button" value="湖北"/>
</body>
<script>
  function show() {
    console.log(this);
  }
  let province = document.getElementById('province');
  province.onclick = function show() {
    console.log(this); 
  };
</script>
</html>
结果显示：
Window
<input id="province" type="button" value="湖北"/>
----------------------------------------------------------------------
不要使用js预留的关键字比如clear定义函数名，否则不执行也不报错。
--------------------------------------------------------------------
使用Javascript事件处理程序可以通过将元素属性的引用置空从而消除方法。
<html>
<body>
  <input id="province" type="button" value="湖北"/>
  <input type="button" onclick="aaa()" value="清除"/>
</body>
<script>
  let province = document.getElementById('province');
  province.onclick = function show() {
    console.log(this); 
  };
  function aaa() {
    province.onclick = null;
  }
</script>
</html>
事件修饰符once也就是说这个方法只能执行一次，在底层实现上也许是采用计数法和将元素事件属性
置为空来到达目的。
===============================================================================
DOM2级别的事件处理程序
addEventListener('事件名', 事件处理程序, 是否在捕获阶段执行);
removeEventListener('事件名', 事件处理程序, 是否在捕获阶段执行);
这里需要注意的一点是事件处理程序最好不要使用匿名事件处理函数，因为如果使用匿名，那么无法将这个事件注销。
<html>
<body>
  <input id="china" type="button" value="中国"/>
  <input id="america" type="button" value="美国"/>
</body>
<script>
  let china = document.getElementById('china');
  china.onclick = function show() {
    console.log(this); 
  };
  let america = document.getElementById('america');
  function display() {
    console.log(this.id);
    console.log(this.type);
    console.log(this.value);
  };
  america.addEventListener('click', display, false);
  //america.removeEventListener('click', display, false);
</script>
</html>
===============================================================================
IE事件处理程序
<html>
<body>
  <input id="china" type="button" value="中国"/>
</body>
<script>
  let china = document.getElementById('china');
  china.attachEvent('onclick', function() {
    console.log('IE');
  });
  china.detachEvent('onclick', function() {
    console.log('IE');
  });
</script>
</html>
===============================================================================
跨浏览器事件处理程序
<html>
<body>
  <input id="china" type="button" value="中国"/>
</body>
<script>
  let china = document.getElementById('china');
  let EventUtil = {
    addHandler: function(element, type, handler) {
      //考虑DOM2级事件
      if (element.addEventListener) {
        element.addEventListener(type, handler, false);
      } else if (element.attachEvent) {
        //考虑IE级别事件
        element.addEvent('on'+type, handler);
      } else {
        //考虑DOM0级别事件
        element['on' + type] = handler;
      }
    },
    removeHandler: function(element, type, handler) {
      if (element.removeEventListener) {
        element.removeEventListener(type, handler, false);
      } else if (element.detachEvent) {
        element.detachEvent('on'+type, handler);
      } else {
        element['on'+type].handler = null;
      }
    }
  }
  EventUtil.addHandler(china, 'click', function() {
    console.log('click');
  });
</script>
</html>