JavaScript注册监听事件与清除监听事件(js怎么注册)

JavaScript注册监听事件与清除监听事件

推荐整理分享JavaScript注册监听事件与清除监听事件(js怎么注册)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js用户注册界面代码,js用户注册界面代码,js用户注册界面代码,javascript注册界面,javascript登陆注册,js注册验证,js注册验证,js注册验证,内容如对您有帮助，希望把文章链接给更多的朋友！

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的点击事件'); }