js事件

1.注册事件（绑定事件）

1.1注册事件概述给元素添加事件，
称为注册事件或者绑定事件。
注册事件有两种方式：
①传统方式②方法监听注册方式
①传统方式利用on开头的事件onclick
<button οnclick=”alert(hello word)”>
btn.onclick = function(){}
特点：注册事件的唯一性 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。
②方法监听注册方式w3c 标准
推荐方式addEventListener()
它是一个方法IE9 之前的IE不支持此方法，可以使用attachEvent() 代替
特点：同一个元素同一个事件可以注册多个监听器按注册顺序依次执行
1.2 事件监听
可以为一个元素，同时绑定多个事件obj.addEventListener(事件，回调函数，冒泡/捕获);
btn.addEventListener(“click”,function(ev){ //ev 事件对象
alert(1212);},false) //false 冒泡
注意:事件监听只能通过 JS 方式绑定在 DOM 对象上，不能通过标签事件绑定(标签上只有 onclick 等原始事件)
• 阻止默认事件（DOM2 级事件）通过事件监听绑定的事件,不能用 return false 阻止默认事件，必须通过 ev 事件对象来阻止:ev.preventDefault();//W3C 事件对象方式阻止默认事件1.3 addEventListener 事件监听方式eventTarget.addEventListener(type, listener[, useCapture])eventTarget.addEventListener() 方法将指定的监听器注册eventTarget（目标对象）上，当该对象触发指定的事件时就会执行事件处理函数该方法接收三个参数：
type:事件类型字符串，比如click、mouseover，注意这里不要带on
listener：事件处理对象，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认时false
2.删除事件
2.1 删除事件的方式
①传统注册方式
eventTarget.onclick = null;
②方法监听注册方式
Ⅰ：eventTarget.removeEventListener(type, listener[, useCapture]);
Ⅱ：eventTarget.datachEvent(eventNameWithOn, callback);
DOM事件流事件流描述时从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程DOM事件流
①事件默认行为很多的网页元素都会有默认的行为，比如说当你点击一下超链接a标签时，它会有一个跳转的行为；当你在网页上点击鼠标右键时会出现一个右键菜单；这些行为并不是绑定函数来实现的，这类行为被称为对象的默认行为阻止默认行为：event.preventDefaut()
②事件流w3c 标准的事件流方向：捕获-----事件目标-----冒泡事件捕获事件目标事件冒泡 与 阻止事件冒泡
③事件目标ev.targetev.target.nodeNameev.target.tagName
④事件委派原理将事件绑定在父级上，利用事件冒泡原理，通过判断事件的“目标元素”来触发父级上绑定的事件作用不用分别为子元素绑定事件为未知元素绑定事件
⑤事件冒泡：IE最早提出，事件开始时是由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程
⑥事件捕获：由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程
注意：JS 代码中只能执行捕获或者冒泡其中的一个阶段。
onclick 和 attachEvent 只能得到冒泡阶段。addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；
如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。实际开发中我们很少使用事件捕获，我们更关注事件冒泡。有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave事件冒泡有时候会带来麻烦有时候又会帮助很巧妙的做某些事件。
事件对象事件分类– window 事件
• onload 加载（某个页面或图像被完成）
• onunload 用户退出页
• onresize 窗口或框架被调整尺寸
• onscroll 滚动条事件 – 鼠标事件
• onclick 鼠标点击
• ondblclick 鼠标双击
• onmousedown 鼠标按键按下
• onmouseup 鼠标按键被松开
• onmouseout 鼠标从某元素移开
• onmouseover 鼠标被移到某元素之上
• onmouseenter 鼠标进入某元素
• onmouseleave 鼠标离开某元素
• onmousemove 鼠标移动
• oncontextmenu 右键菜单 – input 事件
• onblur 元素失去焦点。文本输入框案例 →判断数字 isNaN → js 全局函数
• onfocus 元素获得焦点。input 输入框
• onchange 内容改变时触发。select 选择，select.value 默认选项 – 键盘事件
• onkeydown 按键按下
• onkeypress 按键按下并释放
• onkeyup 按键释放 – form 事件
• onreset 表单重置（重置按钮）
• onsubmit 表单提交(form 内有 text 被聚焦，直接回车可触发 onsubmit)什么是事件对象鼠标在页面上滑动，肯定的是鼠标的onmouseemve事件，如何得到鼠标的坐标值呢？一定会有个地方存储着这些值，方便我们去读取。获取事件数据，不同的事件会有不同数据绑定在事件上的匿名函数，只可以有一个参数，并且这个参数就代表事件对象oDiv.onclick = function(ev){//ev就是事件对象}//区别在于事件对象和和函数传参eventTarget.onclick = function(event) {}eventTarget.addEventListener(‘click’, function(event) {}）// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。比如：谁绑定了这个事件。鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。事件对象的常见属性和方法e.target 和 this 的区别：this 是事件绑定的元素， 这个函数的调用者（绑定这个事件的元素）e.target 是事件触发的元素。e.type：返回事件的类型，比如click mouseover ，没有one.preventDefault()：阻止默认事件，比如不让链接跳转，不让表单按钮提交事件对象的相关属性