事件详解 · web前端

[TOC] # 注册/移除事件的三种方式 ~~~ var box = document.getElementById('box'); box.onclick = function () { console.log('点击后执行'); }; box.onclick = null; box.addEventListener('click', eventCode, false); box.removeEventListener('click', eventCode, false); box.attachEvent('onclick', eventCode); box.detachEvent('onclick', eventCode); function eventCode() { console.log('点击后执行'); } ~~~ ## 兼容代码 ~~~ function addEventListener(element, type, fn) { if (element.addEventListener) { element.addEventListener(type, fn, false); } else if (element.attachEvent){ element.attachEvent('on' + type,fn); } else { element['on'+type] = fn; } } function removeEventListener(element, type, fn) { if (element.removeEventListener) { element.removeEventListener(type, fn, false); } else if (element.detachEvent) { element.detachEvent('on' + type, fn); } else { element['on'+type] = null; } } ~~~ # 事件的三个阶段 **onclick只有事件冒泡** 代码只能执行捕获和冒泡其中一个 1. 捕获阶段 ![](https://img.kancloud.cn/41/a6/41a631feb8053542d3c7c1270ab47878_537x424.png) 2. 当前目标阶段, 执行当前点击元素 3. 冒泡阶段 ![](https://img.kancloud.cn/2f/f8/2ff857fa9e24ea02d9683b6cdf105d65_516x415.png) ~~~ box.onclick 只有事件冒泡 attachEvent只有两个参数，只有事件冒泡 ~~~ ~~~ addEventListener 的第三个参数为false的时候：事件冒泡,从最里面到外面点击 addEventListener 的第三个参数为true的时候：事件捕获,从外面点击到里面 ~~~ ~~~ for (var i = 0; i < array.length; i++) { array[i].addEventListener('click', function () { console.log(this.id); }, true); } ~~~ ## 查看事件阶段事件对象.eventPhase属性可以查看事件触发时所处的阶段 `事件的阶段：1 捕获阶段 2 目标阶段 3 冒泡阶段` # 事件委托利用父点击, 子会捕获来做 ~~~ <body> <ul id="ul"> <li>西施</li> <li>貂蝉</li> <li>昭君</li> <li>凤姐</li> <li>芙蓉姐姐</li> </ul> </body> <script type="text/javascript"> //事件委托 var ul = document.getElementById('ul'); ul.onclick = function (e) { // e 事件参数（事件对象）: 当事件发生的时候，可以获取一些和事件相关的数据 // 获取到当前点击的li // e.target 是真正触发事件的对象 // console.log(e.target); // 让当前点击的li高亮显示 e.target.style.backgroundColor = 'red'; } </script> ~~~ # 事件对象的属性和方法 * event.type 获取事件类型 * clientX/clientY 所有浏览器都支持，窗口位置 * pageX/pageY IE8以前不支持，页面位置 * event.target || event.srcElement 用于获取触发事件的元素 * event.preventDefault() 取消默认行为 ~~~ var btn = document.getElementById('btn'); btn.onclick = function (e) { // DOM标准中，是给事件处理函数一个参数 // e就是事件对象 // 在老版本的IE中获取事件对象的方式 window.event // // 处理事件对象的浏览器兼容性 e = e || window.event; // 事件的阶段：1 捕获阶段 2 目标阶段 3 冒泡阶段了解 // console.log(e.eventPhase); // e.target 获取真正触发事件的对象浏览器兼容问题 // 在老版本的IE中 srcElement // 处理兼容性问题 var target = e.target || e.srcElement; console.log(e.target); // ul li里, 获取的是li, 始终是点击的那个 // // e.currentTarget 事件处理函数所属的对象this console.log(e.currentTarget); // ul li里, ul注册的,那就是ul 和this一样 } ~~~ # 阻止事件传播的方式 * 标准方式 event.stopPropagation(); * IE低版本 event.cancelBubble = true; 标准中已废弃 # 常用的鼠标和键盘事件 * onmouseup 鼠标按键放开时触发 * onmousedown 鼠标按键按下触发 * onmousemove 鼠标移动触发 * onkeyup 键盘按键按下触发 * onkeydown 键盘按键抬起触发 ~~~ box.onclick = fn; box.onmouseover = fn; box.onmouseout = fn; function fn(e) { e = e || window.event; switch (e.type) { case 'click': console.log('点击box'); break; case 'mouseover': console.log('鼠标经过box'); break; case 'mouseout': console.log('鼠标离开box'); break; } } ~~~ ## mouseenter 和 mouseover的区别鼠标悬停事件 ~~~ <style> #box1 { width: 300px; height: 300px; background-color: red; } #box2 { width: 150px; height: 150px; background-color: blue; } </style> <body> <div id="box1"> <div id="box2"> </div> </div> <script> // mouseenter 和 mouseover的区别 var box1 = document.getElementById('box1'); var i = 0; // 触发子元素的mouseover，会冒泡到父元素上 box1.onmouseover = function () { i++; console.log(i); } // 此事件不触发事件冒泡 // box1.onmouseenter = function () { // i++; // console.log(i); // } </script> </body> ~~~ # 鼠标位置 ~~~ var box = document.getElementById('box'); box.onclick = function (e) { e = e || window.event; // 获取的鼠标在浏览器的可视区域的坐标 // console.log(e.clientX); // console.log(e.clientY); // 鼠标在当前页面的位置 console.log(e.pageX); console.log(e.pageY); } ~~~ ## 图片跟着鼠标 ~~~ var ts = document.getElementById('ts'); document.onmousemove = function (e) { e = e || window.event; ts.style.left = e.pageX - 10 + 'px'; ts.style.top = e.pageY - 10 + 'px'; } ~~~ # 元素在页面上位置 ~~~ var box = document.getElementById('box'); box.onclick = function (e) { console.log(this.offsetLeft); console.log(this.offsetTop); } ~~~ # 页面滚动出去的距离 ~~~ // e.clientX/e.clientY 鼠标在可视区域中的位置 // e.pageX/e.pageY 鼠标在页面中的位置有兼容性问题从IE9以后才支持 // pageY = clientY + 页面滚动出去的距离 document.onclick = function () { // 输出页面滚动出去的距离 // console.log(document.body.scrollLeft); // console.log(document.body.scrollTop); // documentElement 文档的根元素 html标签 // console.log(document.documentElement); // 有些浏览器是使用这两个属性来获取的 console.log(document.documentElement.scrollLeft); console.log(document.documentElement.scrollTop); } // 获取页面滚动距离的浏览器兼容性问题 // 获取页面滚动出去的距离 function getScroll() { var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft; var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; return { scrollLeft: scrollLeft, scrollTop: scrollTop } } ~~~ # 取消默认的执行行为 ~~~ <a id="link" href="http://www.baidu.com">baidu</a> var link = document.getElementById('link'); link.onclick = function (e) { alert('hello'); // 取消默认行为执行 // return false; // DOM标准方法 // e.preventDefault(); // IE的老版本，非标准方式 // e.returnValue = false; } ~~~