javaScript WebAPIs编程 DOM 事件绑定 事件解绑
2020年6月28日事件
完整的事件分为
- 事件被触发的元素对象 (事件源)
- 事件类型
- 事件处理程
常见鼠标事件
|
1 2 3 4 5 6 7 8 9 10 11 12 |
element.onclick //鼠标点击左键触发 element.onmouseover //鼠标经过触发 element.onmouseenter //鼠标经过触发 (没有冒泡) element.onmouseout //鼠标离开触发 element.onmouseleave //鼠标离开触发 (没有冒泡) element.onfocus //获取鼠标焦点触发 (没有冒泡) element.onblur //失去鼠标焦点触发 (没有冒泡) element.onmousemove //鼠标移动触发 element.onmouseup //鼠标弹起触发 element.onmousedown //鼠标按下触发 element.contextmenu //鼠标右键上下文菜单 这是阻止鼠标右键 document.addEventListener('contextmenu',function (e) {e.preventDefault()}) element.selectstart //禁止鼠标选中 document.addEventListener('selectstart',function (e) {e.preventDefault()}) |
常见键盘事件
|
1 2 3 4 |
/*可以直接添加到document 上,或者添加到可以输入的表单元素上 执行顺序onkeydown -> onkeypress ->onkeyup */ element.onkeyup //按键松开 keyCode 不区分大小写 element.onkeydown //按键按下 一直按着一直触发多次 keyCode 不区分大小写 element.onkeypress //按键按下 一直按着一直触发多次 不识别功能键 如F1~F12 Esc Shift control window alt delete 等等 keyCode 区分分大小写 |
常见触屏事件
|
1 2 3 |
div.ontouchstart //手指触摸到一个DOM元素时触发 div.ontouchmove //手指在DOM元素滑动触发 div.ontouchend //手指从DOM元素上移开触发 |
注册事件(绑定事件)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
fang = document.querySelector('#fang') //传统注册方式 , 只能绑定一个方法 fang.onclick = function () { alert(111) } //方法监听注册方式 ,可以绑定多个方法 fang.addEventListener('click', function () { alert(111); }) //attachEvent Ie9 之前的版本了解即可 fang.attachEvent('onclick', function () { alert(111); }) |
解绑事件
|
1 2 3 |
element.onclick = null; //传统解绑 element.removeEventListener('事件名' , 方法名) //绑定事件移除 (重点) element.detachEvent('事件名' , 方法名) //ie9 之前的绑定事件移除 |
事件流
事件流描述的是从页面中接受事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流
DOM事件流分为3个阶段
- 捕获阶段 :网景最早提出,,由DOM最顶层节点开始,然后逐级向下传播到最具体的元素接收到的过程.从最高层开始调用方法
- 当前目标阶段
- 冒泡阶段:IE最早提出,事件开始由最具体的元素接受,然后逐级向上传播到DOM最顶层节点的过程,从最底层开始调用方法
注意
- js代码中只能执行<捕获> 或者 <冒泡>其中的一个阶段
- onclick he attacheEvent 只能得到冒泡阶段
- addEventListener(type , listener [,useCapture]) 第三个参数如果是 true,表示在事件捕获阶段调用事件处理程序,如果是false(默认false) , 表示在事件冒泡阶段调用程序
- 实际开发中只关注冒泡
- 有些事件没有冒泡,比如 onblur onfocus onmouseenter onmouseleave
- 冒泡事件会带给我们麻烦,有时帮助我们做一些巧妙的事情
事件委托(利用事件流完成)
- 事件委托也称事件代理也称事件委派
- 不是给每一个节点单独设置,事件监听,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每一个子节点,
- 只操作一次dom提高了程序性能
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>事件委托</li> <li>事件委托</li> <li>事件委托</li> <li>事件委托</li> </ul> <script> var ul = document.querySelector('ul'); ul.addEventListener('click', function (event) { event.target.style.backgroundColor = 'red'; }) </script> </body> </html> |
事件对象
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/** * event 就是一个事件对象 * 事件对象有了事件才会存在,他是系统给我们自动创建的,不需要传参 * 事件对象是事件的一系列相关数据的集合,比如鼠标点击里就包括 鼠标坐标等信息... ,如果是键盘里面 就包含键盘的事件信息 * 我们可以简写为e * 事件对象也有兼容问题, ie 6,7,8 通过 window.event 获取 * @param event */ var div = document.querySelector('div'); div.onclick = function(event){ consoel.log(event); consoel.log(window.event); //ie 6 ,7, 8 这样获取 ,形参方式获取不管有 event = event || window.event //兼容写法 } div.addEventListener('click', function (e) { consoel.log(e); }) |
常用事件对象方法和属性
|
1 2 3 4 5 6 7 8 9 10 |
event.target //返回的是触发事件的对象(元素) this返回的是绑定事件的元素 event.srcElement //返回的是触发事件的对象 IE 6,7,8 使用 (了解即可) event.type //返回事件类型 event.currentTarget //返回的是绑定事件的元素 和 this相似 event.stopPropagation() //阻止冒泡 event.cancelBubble = true; //阻止冒泡 ie 678 可以用 event.preventDefault() //阻止默认行为 如链接点击跳转 event.returnValue //阻止默认行为 如链接点击跳转 ie 678可以用 return false 也可以阻止, 适用传统绑定方式, |
常用鼠标事件对象方法和属性
|
1 2 3 4 5 6 |
event.clientX //浏览器窗口可视区域 x坐标 event.clientY //浏览器窗口可视区域 y坐标 event.pageX //文档页面 x坐标 event.pageY //文档页面 y坐标 event.screenX //电脑屏幕 x坐标 event.screenY //电脑屏幕 y坐标 |
常用键盘事件对象方法和属性
|
1 2 |
event.key //返回按键 event.keyCode //返回按键的ascll值 (老属性) |
常用触摸事件对象方法和属性
|
1 2 3 |
event.touches //获取屏幕 有几个触摸点 event.targetTouches //获取绑定的DOM 有几个触摸点 (重点)开发常用 返回是一个数组列表 ,触摸点中有 位置信息 等等 event.changedTouches //记录手指状态发生改变的列表 从无到有 或者 从有到无 |
