- eventNameWithOn 事件类型字符串 比如 onclick、onmouseover 这里要带on
- ie9以前的，不提倡使用
二、删除事件的方式
=========
- 传统方式删除事件 eventTarget.onclick = null
divs[0].onclick = function () {
alert(11);
//传统方式解绑
divs[0].onclick = null;
}
- 方法监听解绑事件 eventTarget.removeEventListener(事件,调用处理函数)
注意写法
//方法监听注册解绑
divs[1].addEventListener('click',fn)
function fn() {
alert(22);
divs[1].removeEventListener('click' ,fn)
}
- eventTarget.detachEventEvent() ie9以前的解绑方式
//ie9以前的解绑
divs[2].attachEvent('onclick',fn1);
function fn1() {
alert(33);
divs[2].detachEventEvent('onclick',fn1);
}
三、事件对象
=======
3.1、什么是事件对象：
div.onclick = function(event){ }
- event就是一个事件对象。写到我们侦听函数的小括号里面，当形参来看
- 事件对象只要有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
- 事件对象 是我们事件的一系列相关数据的集合，跟事件相关的， 比如鼠标点击 里面就包含了鼠标的相关信息（鼠标的坐标等）；如果是键盘事件 里面就包含了键盘事件的信息，比如：判断用户按下了什么键
- 这个事件对象我们可以自己命名 比如：event、evt、e
- 事件对象也有兼容性问题 ie678通过window.event 兼容性的写法 ：加个条件 e=e || window.event ;
3.2、事件对象常见的属性和方法
| 属性 | 说明（e是事件对象） |
| e.target | 返回触发事件的对象 标准的 和this区别：this指的是绑定事件的对象；e.target是触发事件的对象 也就是点击了哪个元素就返回哪个元素 |
| e.type | 返回事件类型 触发什么样的事件. 比如click事件就返回click |
| e.returnValue | 该属性阻止默认事件 不标准 比如：让链接不跳转、让提交按钮不提交 可以利用return false 也可以阻止默认事件行为 没有兼容性问题 |
| e.cancelBubble | 等于true 就是停止冒泡 非标准 |
| 方法（） | 说明 |
| e.stopPropagation() 方法 | 阻止冒泡 标准 DOM推荐 |
| e.preventDefault() | 该方法阻止默认事件 标准 用于事件高级注册事件的方法里面 比如：让链接不跳转、让提交按钮不提交 |
四、DOM事件流（重点）
============
事件流：事件流描述的是从页面接受中接受事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
阶段：
-
捕获阶段 - 从文档流开始往下
-
当前目标阶段-拥有事件的元素节点
-
冒泡阶段-从目标阶段往上的阶段
注意：
-
实际开发中我们很少使用事件捕获，我们更关注事件冒泡
-
有些事件使没有冒泡的，比如：onblur、onfoucs、onmousenter、onmouseleave
-
事件冒泡有时候会带来麻烦 有时候又会帮助很巧妙的做某些事情
-
js代码中能执行捕获或者冒泡其中的一个阶段
-
以前的传统事件onclick和attachEvent只能得到冒泡阶段
-
验证就用eventTarget.addEventListener(type，listener[,useCapture]) 第三个参数如果是true，表示在事件捕获阶段调用事件处理程序 如果是false 表示在事件冒泡阶段调用事件处理程序
根据事件冒泡的好处和坏处的情况
1、坏处：当执行了当前点击事件 后父节点如果添加了点击事件 在执行了当前点击事件后 会向上执行点击事件
此时就需要我们 阻止冒泡
语法：e.stopPropagation()
是标准的
语法：e.cancelBubble
非标准
有两个点击事件 son点击了 father不会点击
2、好处：事件委托
事件委托也称为事件代理，在jQuery里面称为事件委派
比如：如果要给每个li一个点击事件，不需要循环注册点击事件 而是给ul利用冒泡找到监听
事件委托原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点
比如：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发监听器
作用：只操作了一次DOM，提高了程序的性能
- 你好
- 你好
- 你好
- 你好
- 你好
五、鼠标事件对象
========
event对象代表事件的状态，跟事件相关的一些列信息的集合
5.1、鼠标事件对象 MouseEvent
| 属性 | 说明 |
| e.clientX 和 e.clentY | 返回 鼠标相对于浏览器窗口可视区的X坐标和Y坐标 |
| e.pageX 和 e.pageY | 返回 鼠标对于文档流页面的X坐标和Y坐标 ie9 + 支持 |
| e.screenX 和 e.screenY | 返回 相对于电脑屏幕的X，Y坐标 |
鼠标移动事件 mousemove
鼠标不断的移动，使用鼠标移动事件
5.2、键盘事件 keyboardEvent
| 事件 | 说明 |
| onkeyup | 按键弹起的时候触发 |
| onkeydown | 按键按下的时候触发 |
| onkeypress | 按键按下的时候触发 |
注意：
-
如果都写了 执行顺序 onkeydown - onkeypress - onkeyup
-
传统事件注册事件添加on
-
高级事件注册事件不添加on
-
keyup 和 keydown 事件不区分大小写 a和A得到的都是65
-
keypress 区分大小写 a-97 A-65
-
keydown 和 keypress 两个事件在触发的时候，文字还没有落入文本框中
-
keyup 事件触发的时候 文字已经落入文本框里面了
-
keypress 不识别功能键 比如：ctrl shift 左右箭头
键盘事件对象
| 属性 | 说明 |
| e.keyCode | 返回该键的ASCLL值 可以用来判断用户按下了哪一个键 |
| e.key | 获取我们从键盘上按下什么值 按下a e.key=a |
案例：从键盘输入小写字母 表单显示对应的大写
学习笔记
主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等
HTML/CSS
**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分
**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式
HTML5 /CSS3
**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性
**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型
JavaScript
**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串
