JavaScript基础教程—处理事件

Posted 2020-07-28 我的前端之路

一.处理事件（一）

事件（event）是用户在访问页面时执行的操作。提交表单和在图像上移动鼠标就是两种事件。当浏览器探测到一个事件时，比如用鼠标单击或按键，它可以触发与这个事件相关联的JavaScript 对象，这些对象称为事件处理程序（eventhandler）或者叫做事件侦听器。。

1. 设置HTML标签属性为事件处理程序（避免使用）

（1）直接将JS代码写在HTML上

<p onclick="alert(\'click\')">html事件处理程序</p>

（2）定义一个函数，赋值给html元素的onXXX属性

<script type="text/javascript">
    function alert (){};
</script>
<div onclick=" alert ()">HTML事件处理程序</div>

暴露出来HTML事件处理程序的很多问题：

（1）HTML代码与JavaScript代码紧密的耦合在一起，如果要更换事件处理程序，就要改动两个地方：html代码和JavaScript代码。

（2）扩展事件处理程序的作用域链在不同浏览器当中会导致不同的结果。（暂时没看懂，可参考文章SJ9009: 元素的内联事件处理函数的特殊作用域链在各浏览器中存在差异）

（3）存在一个时差问题。如果存放在函数当中，那么，会面临一个问题——当函数还没有被定义（当时的事件处理程序有可能尚不具备执行条件，该事件处理程序可能在js脚本内，还没有被解析），只是HTML、CSS代码加载完毕，用户进行点击，会完全没有反应。为此，很多HTML事件处理程序都会被封装在一个try-catch块中，以便错误不会浮出水面，如下面的例子所示：

<input type="button" value="Click me" onclick="try{showMessage();}catch(ex){}" />

（4）若给同一元素写多个onclick事件处理属性，浏览器只执行第一个onclick里面的代码，后面的会被忽略；

2. DOM0级事件处理程序(所有的浏览器都支持DOM0 级事件处理程序。)

可以直接设置 DOM 属性来指定某个事件对应的处理函数

例如：

<div id="d3">Div3 Element</div>
<script type="text/javascript">
    //获取对象     
    var d3 = document.getElementById(\'d3\');
    //单击事件
    d3.onclick = function(){alert("clicked");    }
</script>

就是监听 element 节点的 click 事件。

在这些代码运行以前不会指定事件处理程序，因此如果这些代码在页面中位于按钮后面，就有可能在一段时间内怎么单击都没有反应。（代码还没有加载）。（放在前面就找不到d3了）

使用DOM0级方法指定的事件处理程序被认为是元素的方法。

 btn.onclick=null;  //删除事件处理程序

将事件处理程序设置为null之后，再单击按钮将不会有任何动作发生。

【缺点】
1.如果代码位于按钮后面，就有可能一段时间内怎么单击都没有反应。
2.当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉。也就是说，在对象的onclick事件发生时，只会执行最后绑定的方法。而是用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行。但是IE家族先执行后绑定的方法，也就是逆绑定顺序执行方法，其他浏览器按绑定次数顺序执行方法。

3. DOM2级事件处理程序
“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()
1)addEventListener

element.addEventListener(<event-name>, <callback>, <use-capture>);

参数一 ：event-name 事件名称或类型
参数二：callback 回调函数，会在事件触发的时候被调用。
参数三：use-capture表示该事件监听是在“捕获”阶段中监听（设置为 true）还是在“冒泡”阶段中监听（设置为 false）。

例

<button id="btn">点击这里</button>

var btn = document.getElementsByTagName(\'button\');
btn.addEventListener(\'click\', function() {
    alert(\'你点击了这个按钮\');
}, false);

2) removeEventListener

如果我们想解除绑定，需要使用 removeEventListener 方法：

element.removeEventListener(<event-name>, <callback>, <use-capture>);

需要注意的是，绑定事件时的回调函数不能是匿名函数，必须是一个声明的函数，因为解除事件绑定时需要传递这个回调函数的引用，才可以断开绑定。例如：

var fun = function() {
    // function logic
};

element.addEventListener(\'click\', fun, false);
element.removeEventListener(\'click\', fun, false);

特点:

1）只有运行完addEventListener()才为元素绑定了事件处理程序。
2）可以为同一个元素绑定多个事件处理程序，通过addEventListener()方法给同一对象注册多个同类型的事件，并不会发生忽略或覆盖，而是会按顺序依次执行；这是DOM0 级事件处理程序不支持的哦~ DOM0 级只能添加一个事件处理程序，后添加的会覆盖先添加的。
3）使用AddEventLister()添加的事件处理程序只能使用removeEventLister()来移除。且保持参数相同。
4）IE9、Firefox、Safari、Chrome和Opera都支持DOM2 级事件处理程序, addEventListener()方法不支持IE9（不包含IE9）以下的浏览器。

4. IE事件处理程序

IE8以及其之前版本的浏览器并不支持addEventListener()和removeEventListener()。但是，IE定义了类似的方法attachEvent()和detachEvent()。
attachEvent()和detachEvent()要求只有两个参数：事件类型和事件处理函数。
注：IE10及之前版本支持attachEvent()和detachEvent()方法，IE11不再支持，一般IE9及以上都使用DOM方法，这两个方法仅对IE8及以下版本使用。支持IE事件处理的只有IE和Opera

添加事件处理程序：

var btn = document.getElementById(\'myBtn\');
btn.attachEvent(\'onclick\', function () { // 注意这里是 onclick 哦~
    console.log(\'hello\');
});

移除事件处理程序：

使用detachEvent移除事件处理程序的条件与DOM方法相同——必须提供相同的参数，从而添加的匿名函数也无法被移除。

var btn = document.getElementById(\'myBtn\');
btn.detachEvent(\'onclick\', show);

特点：

1）只有运行完attachEvent()才为元素绑定了事件处理程序。
2）可以为同一个元素绑定多个事件处理程序，绑定的事件处理程序会按照它们添加顺序的相反次序被触发，即先添加后执行，后添加的先执行。

注意：本文为原创，转载请以链接形式标明本文地址 ，谢谢合作。

本文地址：http://www.cnblogs.com/wanghuih/p/5611682.html