如何详细解释JavaScript中注册和清除监听事件的技巧和长尾词用法？

本文共计1645个文字，预计阅读时间需要7分钟。

目录+前言+注册监听事件+传统方式+方法监听事件注册方式+addEventListener()+attachEvent()的兼容+移除监听事件+传统方式移除+移除方法监听事件注册方式+removeEv()

目录

• 前言
• 注册监听事件
• 传统方式
• 方法监听事件注册方式
• addEventListener()
• attachEvent()
• addEventListener()与attachEvent()的兼容
• 移除监听事件
• 传统方法的移除
• 移除方法监听事件注册方式
• removeEventListener（）
• btn.detachEvent（）
• removeEventListener()与btn.detachEvent()的兼容
• 案例：注册监听与移除事件的结合
• 总结

前言

JavaScript中有两种方法可以注册监听事件，一种是传统的注册方式，on+事件名称的注册方法，如btn.onclick,还有方法监听事件注册方式，addEventListener()和ie8以下的attachEvent()。

注册监听事件

传统方式

语法格式：元素名.on+事件名称 = function () {函数代码}

这种方法只能为元素注册一个事件，如果注册多个，那么就会覆盖。

这种方式比较简单，看一个案例

点击事件案例：判断闰年

我们写一个输入框和按钮，给按钮注册点击事件，在按钮点击的时候，判断输入框里面输入的值是否是闰年。

<input type="text" id="inp" /> <button id="nian">输入年份后点击判断</button>

var nian = document.getElementById("nian"); var inp = document.getElementById("inp"); nian.onclick = function () { var a = inp.value; if (a == null || a == 0) { alert("没有输入年份！"); } else if (a <= 0) { alert("输入年份有错误！"); } else if (a % 400 == 0 || (a % 4 == 0 && a % 100 != 0)) { alert("输入年份为闰年！"); } else { alert("输入年份不是闰年！"); } };

方法监听事件注册方式

addEventListener()

我们使用addEventListener()来注册监听。它可以为一个事件源注册多个事件。

语法：

btn.addEventListener('click', function () {函数代码块}, false)

• 第一个参数：事件类型，如click
• 第二个参数：回调函数，事件发生后要运行的内容
• 第三个参数：布尔值，默认是false，决定是否支持冒泡

注意，在在标准浏览器浏览器下，addEventListener()是可用的。但是在ie8之下addEventListener()无法使用。这时候我们使用attachEvent()来注册监听事件。

attachEvent()

语法：

btn.attachEvent('onclick',function(){函数代码块},false)

参数是基本相同，注意attachEvent()的第一个参数，需要在事件前面加'on'。

addEventListener()与attachEvent()的兼容

在不同浏览器下，存在注册监听事件的兼容问题，我们可以写一个函数来解决这个问题,把函数封装起来方便随时调用，这样也可以加深两个方法的理解。

代码如下，我们给按钮注册点击事件。 注释有详解。

var btn = document.getElementById('btn')//获取按钮 function clicks(controls, events, buer) {//三个形参 if (controls.addEventListener) {//判断addEventListener是否可以使用 controls.addEventListener(events, function () {//添加监听事件 console.log('标准浏览器');//打印输出 }, buer) } else {//判断不兼容addEventListener，所以使用attachEvent controls.attachEvent('on' + events, function () {//注意不要忘了这个on console.log('非标准浏览器'); }, buer) } } clicks(btn, 'click', false)//调用与传参

移除监听事件

传统方法的移除

我们在使用 元素名.on+事件名称 = function () {函数代码}的方式注册监听事件的时候，只需要使用

元素名.on+事件名称 =null，就可以移除监听事件。

移除方法监听事件注册方式

removeEventListener（）

语法：元素名.removeEventListener('事件名称',函数)

内容分别是：移除哪个元素（事件源/元素名），通过什么方式触发（事件类型）的什么事件（事件回调）

removeEventListener()是常用的移除监听事件的方法。但在ie8以下，它是不可以使用的。所以我们使用detachEvent()来为ie8之下的浏览器清除监听事件。

btn.detachEvent（）

元素名.detachEvent('on+事件名称, 函数)

基本与removeEventListener（）相同，但注意事件名称前面加'on'

removeEventListener()与btn.detachEvent()的兼容

我们可以效仿addEventListener()与attachEvent()的兼容解决办法写一个函数。

如下：

function getEvent(element, eventName, callback) { if (element.removeEventListener) { //标准浏览器的注册监听 element.removeEventListener(eventName, callback) } else { //非标准浏览器的注册监听 element.detachEvent('on' + eventName, callback) } } getEvent(btn,'click',fun)

案例：注册监听与移除事件的结合

我们写一个案例，来实现注册监听，和移除事件。

首先写两个案例，第一个按钮注册监听事件，如点击事件，点击一下就打印一串文字。为第二个按钮注册点击事件，第二个按钮点击后移除事件，使得第一个按钮点击后无法打印文字。

也要注意注册监听和移除事件的兼容，一并写入代码中。

代码如下：

var btn = document.getElementById('btn') var btn1 = document.getElementById('btn1') function fun() {//函数：打印一串文字 console.log('标准浏览器'); } function fn() {//函数：打印一串文字 console.log('非标准浏览器'); } function clicks(controls, events, buer) {//为按钮1注册点击事件的兼容 if (controls.addEventListener) { controls.addEventListener(events, fun, buer)//调用之前的打印函数 console.log('添加了点击事件'); } else { controls.attachEvent('on' + events, fn, buer) console.log('添加了点击事件'); } } clicks(btn, 'click', false)//函数调用 btn1.onclick = function () {//为按钮2注册监听事件 function rem(controls,events, functionname) {//为按钮2注册移除事件的兼容 if (controls.removeEventListener) { controls.removeEventListener(events, functionname) } else { controls.detachEvent('on' + events, functionname) } } rem(btn, 'click', fun)//函数调用 console.log('现在清除了按钮1的点击事件'); }

总结

到此这篇关于JavaScript注册监听事件和清除监听事件的文章就介绍到这了,更多相关js注册监听事件和清除内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！