例子

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-CN" /><style>.btn {width: 400px;height: 30px;}.btnStyle0{background: #9f4;border: 1px solid red;}.btnStyle1{background: #f99;border: 1px solid red;}.btnStyle2 {background: #ff9;border: 1px solid white;}.center {display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center;display: box;box-orient: horizontal;box-pack: center;box-align: center;}</style><title>js 挂载事件Demo</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script>function btnClick(e,s) {document.getElementById('msg').innerText = e.innerText + "   " + s;}$(document).ready(function() {'use strict'//原生js批量添加事件,document.getElementById('buton0').addEventListener('click', function (e) {document.getElementById('msg').innerText = e.currentTarget.innerText;return false;}, false)//固定参//-------------------    方案一    -------------------//var elmts = document.getElementsByClassName('btn');//使用 let i = 0 创建块级作用域//target会显示 <span>我是按钮4</span> 6  ， currentTarget 才正常// for (let i = 0; i < elmts.length; i++) {//     elmts[i].addEventListener('click', function (e) {//         document.getElementById('msg').innerText = e.currentTarget.innerHTML +"   "+  i;//         return false;//     }, false)// }//-------------------    方案二    -------------------//如果不用let i = 0的话，就要利用匿名函数的作用域把参数传进去存住。//外面这层是用来存参数的，里面返回的匿名函数才是给事件用的。var elmts = document.getElementsByClassName('btnStyle2');for (var i = 0; i < elmts.length; i++) {elmts[i].addEventListener('click', function (i) {return function (e) {document.getElementById('msg').innerText = e.currentTarget.innerText +"   "+  e.currentTarget.id;};}(i + 1), false);}//--------------  JQuery 批量添加事件  ---------------//没有for传固定参数的效果。换种思路，给按钮设个ID然后执行时判断就行了。$(".btn.btnStyle1").click(function(e) {document.getElementById('msg').innerText = "被点击的按钮ID是： " + this.id;});// jquery 动态绑定事件$("body").on('click','.dc', function(e){document.getElementById('msg').innerText = "动态创建的对象，要动态绑定事件，body监控子对象如果新增了class为.dc的元素就给它绑定事件。按钮ID是： " + this.id;});$("#msg").before(`<div id="buton7" class="btn btnStyle2 center dc"> <span>动态创建的对象，要动态绑定事件</span> </div>`);$("#msg").before(`<div id="buton8" class="btn btnStyle2 center dc"> <span>动态创建的对象，要动态绑定事件</span> </div>`);$("#msg").before(`<div id="buton9" class="btn btnStyle2 center dc"> <span>动态创建的对象，要动态绑定事件</span> </div>`);//----------------------------------------------------//传参数 动态添加 onclick 属性，实现传参$("#msg").before(`<div id="buton10" οnclick="btnClick(this,'呵呵达');" class="btn btnStyle1 center"> <span>动态添加 onclick 属性，实现传参</span> </div>`);//动态添加元素，实现传参$("#msg").before(`<div id="buton11" class="btn btnStyle2 center"> <span>动态添加元素，实现传参</span> </div>`);$("#buton11").attr('onclick',"btnClick(this,'呵呵达');");});</script>
</head><body><div id="buton0" class="btn btnStyle0 center"> <span>原生Js 直接添加 点击事件</span> </div><div id="buton1" class="btn btnStyle2 center"> <span>匿名函数传参1</span> </div><div id="buton2" class="btn btnStyle2 center"> <span>匿名函数传参2</span> </div><div id="buton3" class="btn btnStyle2 center"> <span>匿名函数传参3</span> </div><div id="buton4" class="btn btnStyle1 center"> <span>JQuery 用自身ID判断 4</span> </div><div id="buton5" class="btn btnStyle1 center"> <span>JQuery 用自身ID判断 5</span> </div><div id="buton6" class="btn btnStyle1 center"> <span>JQuery 用自身ID判断 6</span> </div><div></div><div id="msg"></div>
</body></html>

addEventListener 监听事件

文字变更，文本框失去焦点。

input.addEventListener('change', changeHandler);

点击事件

ele.addEventListener('click', onceHandler);
ele.addEventListener('click', onceHandler, {"once" : true}); // 监听一次

挂载事件的同时带上参数

addEventListener 本身没有带参的功能。但是给绑定的参数包一层就可以了。

ele.addEventListener('click', ()=>onceHandler("我是参数"));

dispatchEvent 触发事件

var event = document.createEvent('HTMLEvents');
/*** 事件类型* 冒泡* 阻止浏览器的默认行为*/
event.initEvent("click", true, true);
ele.dispatchEvent(event);

removeEventListener 移除事件

要与添加监听时的参数一样。

ele.removeEventListener("click", onceHandler,  {"once" : true});

监听时用的匿名方法，可以先查看监听的事件

var eveMep = getEventListeners(ele); // 返回一个对象，包含所有事件，key 事件名。
var handlerArr = eveMep.click; // 返回一个数组，包含所有 click 事件。
ele.removeEventListener('click', getEventListeners(ele).click[0].listener);

CustomEvent 自定义事件

// 添加事件监听
ele.addEventListener("hi", function(e) { alert(JSON.stringify(e.detail , null, 4));
});
// 创建 hi 事件
var hiEvent = new CustomEvent("hi", {"detail": {"word" : "大家好"}
});
// 触发事件
ele.dispatchEvent(hiEvent);

参考资料

MDN：addEventListener 监听事件
MDN：dispatchEvent 触发事件
MDN：removeEventListener 移除事件
MDN：Events 事件类型
MDN：CustomEvent 自定义事件

JavaScript 学习笔记 - 挂载事件 Demo相关推荐

JavaScript 学习笔记之事件
事件事件是DOM(文档对象模型)的一部分.事件流就是事件发生顺序,这是IE和其他浏览器在事件支持上的主要差别. 一.事件流 1.冒泡型事件 IE上的解决方案就是冒泡型事件,它的基本思想是从最特定的目 ...
JavaScript学习笔记06【高级——JavaScript中的事件】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记（三）---事件、正则表达式、ES6、运动
JavaScript学习笔记(三)---事件.正则表达式.ES6.运动 27.insertbefore 28.滚动条及事件 29.事件及事件对象 30.鼠标事件对象的属性 31.案例:图片随鼠标移动 ...
JavaScript学习笔记（五）---cookie、Proxy、服务器、PHP语言、http协议、同步异步、事件轮循机制、ajax编写、接口
JavaScript学习笔记(五)---cookie.Proxy.服务器.PHP语言.http协议.同步异步.事件轮循机制.ajax编写.接口 1.cookie 1.1cookie概念 1.2cook ...
前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型其实就是操作 html 中的标签的一些能力我们可以操作哪些内容获取一个元素 ...
JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端学习路线笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
JavaScript学习笔记05【高级——DOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记02【基础——对象（Function、Array、Date、Math）】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...

JavaScript 学习笔记 - 挂载事件 Demo