JavaScript(1)---绑定事件、解除绑定事件
<h1 id="javascript1---绑定事件解除绑定事件"><center>JavaScript(1)---绑定事件、解除绑定事件</center></h1><h2 id="-一事件概述"><font color="#FFD700"> 一、事件概述</font></h2>
<h4 id="1事件的几个概念">1、事件的几个概念</h4>
<p>· <code>事件</code></p>
<p>指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便触发事件的时候执行相应的代码。</p>
<p><code> 事件处理程序</code></p>
<p>我们用户在页面中进行的点击动作(click)、鼠标移动动作(mousemove)等，都可以称之为事件名称。响应某个事件的函数则称为事件处理程序，或者叫做事件侦听器。</p>
<p><code>事件类型</code></p>
<p><strong>UI事件</strong>： load、unload、error、resize、scroll、select，是用户与页面上的元素交互时触发的。</p>
<p><strong>焦点事件</strong>：blur、DOMFocusIn、DOMFocusOut、focus、focusin、focusout，在元素获得或失去焦点的时候触发，这些事件当中，最为重要的是blur和focus，</p>
<p>有一点需要引起注意，<strong>这一类事件不会发生冒泡</strong>！</p>
<p><strong>鼠标与滚轮事件</strong>：click、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup，是当用户通过鼠标在页面执行</p>
<p>操作时所触发的。</p>
<p><strong>滚轮事件</strong>：mousewheel（IE6+均支持）、DOMMouseScroll（FF支持的，与mousewheel效果一样）。是使用鼠标滚轮时触发的。</p>
<p><strong>文本事件</strong>：textInput，在文档中输入文本触发。</p>
<p><strong>键盘事件</strong>：keydown、keyup、keypress，当用户通过键盘在页面中执行操作时触发。</p>
<h4 id="2事件三要素">2、事件三要素</h4>
<p>事件有三要素 :<code>事件源</code>、<code>事件</code>、<code>监听器</code> 。</p>
<p><strong>事件源</strong>：在哪个元素上发生的。比如: p标签、a标签、div标签、form表单 等等</p>
<p> <strong>事件</strong>：到底发生了什么事件。click(点击事件)、mouseover(鼠标事件)、focus(焦点事件) 等</p>
<p><strong>监听器</strong>：事件源触发事件后，如何回应发生的事件，通常以函数(funtion)的形式来出现。</p>
<p><code>注意</code>事件不是以 on 开头的那个名称，如 onclick 不是事件，click才是事件。<strong>onclick引用的是一个元素对象的属性</strong>，它指向click事件类型绑定的实际处理函数。</p>
<br>
<h2 id="二绑定事件解绑事件"><font color="#FFD700">二、绑定事件、解绑事件</font></h2>
<p><strong>常用的事件绑定的几种方式有三种：</strong></p>
<pre><code>1、直接在html元素上进行绑定事件。
2、用 on 绑定事件。
3、用 addEventListener、attachEvent 绑定事件。
</code></pre>
<h4 id="1直接在-html-元素上进行绑定">1、直接在 html 元素上进行绑定</h4>
<p><code>即以属性的方式直接写在行内</code></p>
<pre><code class="language-html"><input id="btn" type="button" onclick="test();" /> <!--点击按钮 触发事件-->
</code></pre>
<p>这样有个很大的缺点就是：</p>
<p><strong>HTML与js代码紧密耦合。如果要更换 事件，就要改动两个地方:HTML代码和JS代码，这就不利于后期代码的维护</strong>。</p>
<h4 id="2用-on-绑定">2、用 on 绑定</h4>
<p><code>兼容性</code>：在IE，FF，Chrome，Safari，Mozilla，Opera下都适用。</p>
<pre><code class="language-html"><body>
<div id="id">on绑定事件</div>
<script>
var div=document.getElementById('id');
// 甲
div.onclick=function(){
console.log('甲需要红背景');
div.setAttribute('style', 'background: #ff0000');
};
// 乙
div.onclick=function(){
console.log('乙需要黄背景');
div.setAttribute('style', 'background: #ffff00');
};
//这里最总只会输出 '乙需要黄背景' 因为用on绑定事件 同一事件下面会覆盖上面的
div.onclick=null;//解绑只要事件 = null 就可以了
</script>
</body>
</code></pre>
<p><code>优点</code>：它最大的优点是就是兼容性很好，所有浏览器都支持。</p>
<p><code>缺点</code>：同一个 dom 元素上，on 只能绑定一个同类型事件，后者会覆盖前者，不同类型的事件可以绑定多个。</p>
<p>这里就有一个问题，无法允许团队不同人员对同一元素监听同一事件但做出不用的响应。</p>
<h4 id="3-addeventlistenerattachevent-绑定事件">3、 addEventListener、attachEvent 绑定事件</h4>
<p>同一个 dom 元素上，用 addEventListener、attachEvent 可以绑定多个同类型事件。</p>
<p>但是，addEventListener 事件执行顺序按照事件绑定的先后顺序执行；attachEvent 事件执行顺序则是随机的。</p>
<p>1）<code>addEventListener</code></p>
<pre><code class="language-js">var oBox = document.getElementById("container");
//绑定事件
oBox.addEventListener("click",fn(),false);
//解绑事件
oBox.removeEventListener("click",fn(),false);
function fn(){//执行代码}
</code></pre>
<p><code>参数说明</code></p>
<pre><code>第一个参数：事件名称 比如onclickonmouseover
第一个参数：作为事件处理程序的函数
第一个参数：若为false,函数在冒泡阶段执行;若为true,函数在捕获阶段执行。默认为false。(有关冒泡和捕获单独抽时间讲)
</code></pre>
<p><strong>注意</strong>：removeEventListener 第二个参数要和 addEventListener 指向 <strong>同一个函数</strong> 才能解绑成功。</p>
<p>2）<code>attachEvent</code></p>
<pre><code>var oBox = document.getElementById("container");
//绑定
oBox.attach("click",fn());
//解绑
oBox.detach("click",fn());
function fn(){//执行函数}
</code></pre>
<p>3）<code>区别</code></p>
<p>总结下 addEventListener、attachEvent的区别</p>
<pre><code class="language-html"> 1)参数个数不一致
addEventListener三个参数,attachEvent两个参数
2)兼容问题
addEventListener 谷歌,火狐,IE11支持,IE8不支持
attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
3)this指向不同
addEventListener 中的this是当前绑定事件的对象
attachEvent中的this是window
4)事件命名不同
addEventListener中事件的类型(事件的名字)没有on
attachEvent中的事件的类型(事件的名字)有on
</code></pre>
<p>这里再说下 addEventListener、attachEvent相对于上面两种绑定事件的优缺点</p>
<p><code>优点</code>它们可以支持 <strong>绑定多个同类型事件</strong></p>
<p><code>缺点</code>兼容性并不好,它们只兼容相对应的浏览器才有用。</p>
<br>
<h2 id="三事件的兼容"><font color="#FFD700">三、事件的兼容</font></h2>
<p>上面说了3种绑定事件和解绑事件的方法,如果实际开发中如果只使用一种方法,那么会产生要么无法满足同一元素监听同一事件但做出不用的响应，要么系统的兼容性会有问题。</p>
<p>所以需要一个兼容的方法。这里举一个完整的例子，包含兼容绑定事件 和 兼容解绑事件 ，也看下解绑的含义是什么。</p>
<p><code>完整代码</code></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定和解绑</title>
</head>
<body>
<input type="button" value="绑架事件" id="btn1"/>
<input type="button" value="解绑事件" id="btn2"/>
<script>
//第一个按钮 同时绑定两个相同事件 执行不同方法
addEventListener(my$("btn1"),"click",f1);
addEventListener(my$("btn1"),"click",f2);
//第二个按钮点击后 让第一个按钮第一个事件解绑
my$("btn2").onclick=function () {
removeEventListener(my$("btn1"),"click",f1);
};
function f1() {
alert("第一个事件");
}
function f2() {
alert("第二个事件");
}
function my$(id) {
return document.getElementById(id);
}
//绑定事件的兼容
function addEventListener(element,type,fn) {
if(element.addEventListener){ //有没有用
element.addEventListener(type,fn,false);
}else if(element.attachEvent){ //有没有用
element.attachEvent("on"+type,fn);
}else{ //如果都不兼容 那就用这种来绑定事件
element["on"+type]=fn;
}
}
//解绑事件的兼容
function removeEventListener(element,type,fnName) {
if(element.removeEventListener){
element.removeEventListener(type,fnName,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,fnName);
}else{
element["on"+type]=null;
}
}
</script>
</body>
</html>
</code></pre>
<p><strong>运行结果</strong></p>
<img src="https://img2018.cnblogs.com/blog/1090617/201912/1090617-20191206222709557-1141478635.gif" style="border: 1px dashed rgba(255, 0, 0, 1)" width="700" height="160">
<p>从运行结果我们很明显可以得出的结论:</p>
<pre><code>1、一开始绑定事件的按钮 绑定了两个相同的事件。并且发现并没有发生事件覆盖，都成功了。
2、当点击解绑按钮后,它解绑是绑定按钮的第一个事件。
3、此时再点击绑定事件的按钮，发现只绑定了一个事件，因为另一个事件已经被解绑了。
</code></pre>
<br>
<h3 id="参考"><font color="#FFD700">参考</font></h3>
<p>1、JS中几种绑定事件的方式</p>
<p>2、JS事件绑定的常用方式实例总结</p>
<p>3、javascript 中的事件机制</p>
<p><img src="https://img2020.cnblogs.com/blog/1090617/202111/1090617-20211117135827845-311914362.gif" alt="" loading="lazy"></p>
<br>
<pre><code>你如果愿意有所作为，就必须有始有终。(20)
</code></pre><br><br>
来源：https://www.cnblogs.com/qdhxhz/p/11999941.html
頁:
[1]