1.HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
简单的说就是 js和html之间交互的触发点。
2.事件的分类
我要评论 窗口
焦点
鼠标
键盘
在Javascript中，事件绑定一共有3种方式：
① 行内绑定
② 动态绑定
③ 事件监听
1、行内绑定
基本语法：
<标签 属性列表 事件=”事件的处理程序” />
< input type=’button’ onclick=’display()’ />
以上代码就是最典型的行内绑定，虽然可以完成我们需要的功能，但是其把结构+样式+行为都绑定在同一个标签中，不利于后期维护。
2.动态绑定
基本语法：
dom对象.事件 = 事件的处理程序（通常是一个匿名函数）
行内绑定与动态绑定的区别
在Javascript中，有一个特殊对象叫做this，其随着运行环境的不同，其指向也是不同的！
概念
简单来讲事件流就是页面接受事件的顺序，事件发生后会在元素节点之间按照某种顺序传播
document->html->body->div->body->html->document这是DOM2级规定的事件流顺序，如下图：
< body>
< div id=“outer”>
< div id=“inner”>inner</ di v>
< /div>
< script>
// 点击inner的执行顺序
var inner = document.querySelector(’#inner’);
var outer = document.querySelector(’#outer’);
// on***/attachEvent 只能得到冒泡阶段
// 第三个参数默认是false 表示处于冒泡阶段 假如是true表示捕获阶段
inner.addEventListener(‘click’,function() {
console.log(‘捕获 inner’); //3.
},true);
outer.addEventListener('click',function() {
console.log('捕获 outer'); //2.
},true);
outer.addEventListener('click',function() {
console.log('冒泡 outer'); //4
},false);
document.body.addEventListener('click',function
() {
console.log('冒泡 body'); //5
});
document.body.addEventListener('click',function
() {
console.log('捕获 body'); //1.
},true);
// document->html->body->outer->inner->outer->body...
</script>
捕获阶段一般不做什么操作，冒泡阶段可以做一些操作，比如事件委托就是利用冒泡来做的。
有的事件不具有冒泡阶段，比如 焦点事件、onmouseenter/onmouseleave （onmouseour/onmouseout具有冒泡）
事件流包括三个阶段：捕获阶段、目标阶段、冒泡阶段
事件冒泡：事件由最具体元素触发，向上传播的过程；
处于目标阶段：触发事件的那个节点，（目标元素）；
捕获阶段：事件由不具体的元素向下查找，直到找到你触发的那个元素，与事件冒泡相反；
阻止冒泡： e.stopPropagation();
Dom操作的方法
通过:nodeType来检测节点类型，
增删改查：
增：
1.createElement() 创建标签
2.createTextNode() 创建文本
3.createDocumentFragment() 创建文档碎片,所有的操作是在内存中进行的
//createDocumentFragment()：为了避免重绘和回流：咱们插入dom时可采用createDocumentFragment，最后一次性的再添加到页面的dom中
4.cloneNode(true) 克隆 //添加true代表深度克隆，包括子节点的所有内容也可以克隆过来
例如：
//需求：创建一个div，并添加文字，追加到页面上
var odiv=document.createElement('div');
var otext=document.createTextNode('1906A')
//将文本追加到div上 appendChild
odiv.appendChild(otext);
//再将div追加到body上
document.body.appendChild(odiv)
删、修改：
父节点.appendChild(子节点) 尾追加
父节点.insertBefore(新节点,参考节点) 前追加
父级节点.removeChild(要删除的子级节点) 移除节点
replaceChild(新节点，旧节点) 替换节点
查：
getElementById() 获取id ，如果页面上有多个相同id，只返回第一个
getElementsByTagName() 获取标签名 返回是类数组
getElementsByName() 获取表单中name名称 返回类数组
getElementsByClassName 只能获取class名称 返回类数组
querySelector() 只获取匹配的第一个css选择器 //特别适合移动端
querySelectorAll() 获取匹配的css选择器类数组 //特别适合移动端
parentNode:找父节点
parentElement：找父元素
previousSibling：找前一个兄弟节点
previousElementSibling：找前一个兄弟元素
nextSibling：找后一个兄弟节点
nextElementSibling：找后一个元素节点
childNodes:属性，即包括元素节点，也包括文本节点
children:属性 只获取直接子级元素，不获取文本节点（元素类型===1）
firstNode：找第一个节点
lastNode：找最后一个节点
hasChildNodes：用于判断是否有子元素
设置属性
获取： getAttribute('title')
设置： setAttribute('title','修改的属性')
事件处理程序就是响应某个事件的函数，简单地来说，就是函数。我们又把事件处理程序称为事件侦听器。事件处理程序是以“on“开头的，比如点击事件的处理程序是”onclick“，事件处理程序大概由以下5种。
1 HTML事件处理程序
2 DOM0级事件处理程序
3 DOM2级事件处理程序
4 IE事件处理程序
5.跨浏览器的事件处理程序
addEventListener();
document对象和所有文档元素都定义了一个名叫addEventListener()方法，使用这个方法人可以为事件目标注册事件处理程序。接收三个参数，第一是要注册处理程序的事件类型，可以是字符串或名字，但不可以带处理程序属性的on前缀。第二是指定类型的事件发生时调用的函数。第三是布尔值，一般会给这个参数为false，如果为true，那么函数将注册为捕获事件处理，并在事件不同的调度阶段调用。
本文地址：https://blog.csdn.net/hanbic/article/details/107298327
如对本文有疑问， 点击进行留言回复！！
荐 超强的入门文章 ！！！ JavaScript 速成计划第二篇（杂项详解：JS操作HTML 与 CSS、异常、事件）!
教你搭建 nodejs+mongoose+Graphql+Vue+Typescript 框架（上）
【Nginx】如何为已安装的Nginx动态添加模块？看完我懂了！！
网友评论