JavaScript之事件触发on和事件监听addEvent及addEventListener的区别和作用

一、on事件

为dom节点添加多个on事件只会执行最后的那个事件，因为最后的指定的on事件指向最后的那个函数，代码如下所示：

function method1(){console.log('我是方法1')
}
function method2(){console.log('我是方法2')
}
function method3(){console.log('我是方法3')
}var button = document.getElementById("btn");
button.onclick = method1;
button.onclick = method3;
button.onclick = method2;

这种写法只会执行method2函数，并输出'我是方法2'

二、addEvent事件监听

addEvent事件监听可以为DOM节点绑定多个事件，且允许出现相同事件。

addevent(type, listener[, options])函数可以传递三个参数：
type表示监听事件类型的字符串（注意不用on开头）
listener当所监听的事件类型触发时，会接收到一个事件通知对象（回调函数）
options（可选）值为Boolean类型，如果值为false(默认值)，事件触发机制就会按照冒泡(从下往上)，如果值为true，就会按照事件捕获，从上往下。

button.addEventListener("click", method1, false);
button.addEventListener("click", method3, false);
button.addEventListener("click", method2, false);
//[输出结果]
我是方法1
我是方法3
我是方法2

需要注意的是监听事件分为addEventListener和attachEvent函数，分别用在不同的浏览器和不同的版本。

三、事件监听案例

3.1 JavaScript代码

var button = document.getElementById("btn"),addBtn = document.getElementById("addBtn"),removeBtn = document.getElementById("removeBtn");addBtn.onclick = function() {addMethod(button, 'click', say)
}
removeBtn.onclick = function() {removeMethod(button, 'click', say)
}//[绑定监听事件]
function addMethod(node, type, method) {if (node.addEventListener) { // IE9以下不兼容node.addEventListener(type, method, false)} else if (node.attachEvent) { // IE独有node.attachEvent(`on${type}`, method)} else {node[`on${type}`] = method; // 一个元素只能绑定一个处理程序}
}//[移除监听事件]
function removeMethod(node, type, method) {if (node.removeEventListener) { // IE9以下不兼容node.removeEventListener(type, method, false)} else if (node.detachEvent) { // IE独有node.detachEvent(`on${type}`, method)} else {node[`on${type}`] = null;}
}function say() {console.log("Hello World!")
}

3.2 效果展示

JavaScript之事件触发on和事件监听addEvent及addEventListener的区别和作用相关推荐

【iOS-Cocos2d游戏开发之五】【1】多触点与触屏事件详解（单一监听、事件分发）...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2d/450.html ...
Winform3、事件触发机制学习:事件的注册和定义和参数含义
Winform3.事件触发机制学习:事件的注册和定义在一个Form窗体中拖个按钮,双击后系统自动生成代码: // 定义事件,一般在Form.cs文件 // 默认事件是有命名规范的,控件命_事件名_个 ...
vue输入框输入触发事件_.vue文件中监听input输入事件oninput详解
.vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件, ...
javascript 模拟按键事件触发输入框oninput事件
记录下解决textarea 在js赋值后不生效的问题我要实现的是网页聊天框模拟输入一段话,然后js触发点击发送事件然而在使用js直接赋值之后,textarea并没有收到值 document.que ...
jquery 监听td点击事件_VUE @hook浅析（监听子组件的生命周期钩子） - 古兰精
一.前言接触hook是从webhook开始接触的,webhook是git的一个扩展服务,可以在仓库接收到push/commit事件并发送http request至一个开发者可以自定义的URL.通过这 ...
html中下拉列表监听事件,ExtJS 下拉框监听事件、日期选择器监听事件、实现动态给items添加删除数据...
本文将为您描述ExtJS 下拉框监听事件.日期选择器监听事件.实现动态给items添加删除数据,具体实现方法: 1.下拉框下拉框选择时,触发事件的方法: 在 Ext.form.ComboBox 组件 ...
【iOS-Cocos2d游戏开发之五】多触点与触屏事件详解（单一监听、事件分发）
李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2d/450.html------- ...
全选或双击触发了键盘keydown事件（鼠标事件触发c快捷键事件）
程序员的日常玄学记录遇到一个情况,在监听键盘事件的时候,单击某个地方,然后点delete能够成功监听delete键并且成功删除我想删除的东西. 但是当滑动鼠标,全选数据的时候,delete键盘事件就 ...
python监听鼠标事件_Python中使用PyHook监听鼠标和键盘事件实例
Python 中使用 PyHook 监听鼠标和键盘事件实例 PyHook 是一个基于 Python 的"钩子"库,主要用于监听当前电脑上鼠标和键盘的事件.这个库依赖于另一个 Py ...

JavaScript之事件触发on和事件监听addEvent及addEventListener的区别和作用

一、on事件

二、addEvent事件监听

三、事件监听案例

JavaScript之事件触发on和事件监听addEvent及addEventListener的区别和作用相关推荐

最新文章

热门文章