JS事件事件最重要的概念就是事件源事件名监听器处理程序01 事件流就是事件传播描述的是从页面中接收事件的顺序如果单击了某个按钮它们认为单击事件不仅仅发生在按钮上甚至单击了整个页面IE事件流是事件冒泡流Netscape是事件捕获流其实不同的就是事件的触发时机是在捕获阶段触发事件还是在冒泡阶段触发事件02 事件冒泡和事件捕获的概念事件冒泡事件由当前最具体的元素接收然后逐级向上传播到较为不具体的节点文档documentdiv idbox/div // 点击box点击事件会向上传播box的每一层父级都会触发它们身上的点击事件 script const box document.getElementById(box); box.onclick function () { box.innerHTML divbr; } // 获取body document.body.onclick function () { box.innerHTML bodybr; } // 获取html document.documentElement.onclick function () { box.innerHTML htmlbr; } // 获取document document.onclick function () { box.innerHTML documentbr; } // 获取window window.onclick function () { box.innerHTML windowbr; } /script事件捕获事件由不太具体的节点更早的接收事件而最具体的节点应该最后接收到事件逐级向下传播div idbox/div script const box document.getElementById(box) box.addEventListener(click, function () { box.innerHTML boxbr },true) // addEventListener的第三个参数用来控制事件触发时机在捕获阶段true还是在冒泡阶段false这个参数还可以时一个对象 /* { capture: true, // 是否捕获阶段执行 once: true, // 是否只执行一次 passive: true // 是否阻止preventDefault } */ document.body.addEventListener(click, function () { box.innerHTML bodybr },true) ​ document.documentElement.addEventListener(click, function () { box.innerHTML htmlbr },true) ​ document.addEventListener(click, function () { box.innerHTML documentbr },true) ​ window.addEventListener(click, function () { box.innerHTML windowbr },true) /script03 三种事件处理程序的绑定方式关于三种方式的this指向问题body button classbtnClick Me/button script const btn document.querySelector(.btn) // btn.onclick function () { // console.log(this) // 当前dom对象 // } ​ // btn.onclick () { // console.log(this) // window // } ​ // btn.addEventListener(click,function() { // console.log(this) // 当前dom对象 // }) ​ btn.addEventListener(click,() { console.log(this) // window }) /script /body1、HTML事件处理程序!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style #app{ width: 200px; height: 100px; background-color: pink; } /style /head body div idapp onclickconsole.log(event)/div div idapp2 onclicktest(event)/div script function test(e){ console.log(e) } /script /body /html// 只要是html事件处理程序浏览器都会对简单代码语句进行包装因为这里面实际上都是字符串是不能执行的函数调用语句也是的实际上也只是一个函数调用语句的字符串 // 下面是对两种形式的包装方式 element.onclick function(event) { test(event); // 把你写在 onclick 里的字符串代码直接塞到这里执行 }; element.onclick function(event) { console.log(event); }; // 所以这种方式也可以看作是通过外层包装函数的第一个参数接收事件对象2、DOM0级事件处理程序!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style #app { width: 200px; height: 100px; background-color: pink; } /style /head body div idapp /div ​ script const box document.getElementById(app) box.onclick function(e){ // 这种方式相当于是给执行的dom对象属性绑定方法所以这里的this指向当前dom对象 console.log(this) // 这里的全局事件对象event就是浏览器已经维护好的可以直接使用在window对象上 console.log(event) // 当然这里也是可以通过事件处理程序的第一个参数来接收事件对象 console.log(e) } /script /body /html3、DOM2级事件处理程序!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style #app{ width: 200px; height: 100px; background-color: pink; } /style /head body div idapp/div script const box document.getElementById(app) box.addEventListener(click,function(e){ console.log(this) // 这里明显没有传递参数所以这里的event还是window上的全局事件对象 console.log(event) // 当然这里也是可以通过事件处理程序的第一个形参来接收事件对象 console.log(e) }) /script /body /html04 事件绑定的兼容写法!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body button idbtn你过来呀/button script // DOM2级事件处理程序addEventListener,ie不支持需要使用attachEvent const btn document.getElementById(btn) // btn.addEventListener(click,fn) // btn.attachEvent(onclick,fn) addEvent(btn,click,function(){ console.log(this) }) // 定义兼容性绑定函数,attachEvent中的this指向window,也需要做兼容处理 function addEvent(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false) }else if(element.attachEvent){ element.attachEvent(on type,function(){ handler.call(element) }) } } /script ​ /body /html05事件调用顺序!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style #box{ width: 200px; height: 200px; background-color: pink; } /style /head body div idbox onclickthis.innerHTML html\n/div script // 如果同时出现html级事件处理程序和DOM0级事件处理程序html级会被覆盖掉 const box document.getElementById(box) box.onclick function(){ this.innerHTML DOM0\n } ​ box.addEventListener(click,function(){ this.innerHTML DOM2\n }) /script ​ /body /html06事件目标对象!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style typetext/css .item { width: 100px; height: 80px; background-color: lightblue; margin: 50px 10px; } /style /head body ul idbox li classitem1/li li classitem2/li /ul script const box document.getElementById(box) box.onclick function(e){ e e || window.event // 1、currentTarget 事件绑定的元素 console.log(e.currentTarget) // 2、target 事件触发的元素 console.log(e.target) // 3、srcElement 事件触发的元素兼容性好 console.log(e.srcElement) ​ // this 指向事件绑定的元素 console.log(e.currentTarget this) console.log(e.target this) ​ // 兼容性处理 let target e.target || e.srcElement } /script ​ /body /html07 事件代理事件委托!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title事件代理/title style * { margin: 0; padding: 0; } ul { list-style: none; overflow: hidden; margin-top: 50px; } ul li { float: left; width: 100px; height: 30px; background-color: lightblue; text-align: center; line-height: 30px; margin: 0 10px; color: #fff; } /style /head body ul li1/li li2/li li3/li li4/li li5/li /ul script window.onload function () { const ul document.querySelector(ul) setTimeout(() { const item document.createElement(li) item.innerHTML 6 ul.appendChild(item) }, 100) ​ // 获取所有li元素这里只获取了原来的5个li元素新增的li元素没有添加事件监听所以不会触发事件 // const lis document.querySelectorAll(li) // lis.forEach(item { // item.addEventListener(mouseover,function () { // this.style.backgroundColor red // }) // item.addEventListener(mouseout,function () { // this.style.backgroundColor lightblue // }) // }) ​ // 给未来的li添加事件监听这里使用事件代理 ul.addEventListener(mouseover,function (e) { if(e.target.tagName LI){ e.target.style.backgroundColor red } }) ul.addEventListener(mouseout,function (e) { if(e.target.tagName LI){ e.target.style.backgroundColor lightblue } }) } /script /body /html08 事件冒泡阻止冒泡!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title事件冒泡/title ​ /head body button idbtn stylewidth: 200px; height: 30px;点击我/button input typetext idtest script // 两个属性两个方法 bubbles cancelBubble stopPropagation() stopImmediatePropagation() // 1、bubble 返回一个布尔值表示当前事件是否冒泡注意大部分事件都是冒泡事件但是focus blur scroll事件不是冒泡事件 const btn document.getElementById(btn) const test document.getElementById(test) ​ btn.addEventListener(click,function(e){ console.log(e.bubbles) // true }) test.addEventListener(focus,function(e){ console.log(e.bubbles) // false }) // 2、cancelBubble 取消事件冒泡,也不能阻止同一事件的其他监听函数执行 btn.addEventListener(click,function(e){ e.cancelBubble true }) // 3、stopPropagation() 取消事件冒泡ie8不支持但是它无法阻止同一事件的其他监听函数执行 // 4、stopImmediatePropagation() 取消事件冒泡ie8不支持但是它可以阻止同一事件的其他监听函数执行 btn.addEventListener(click,function(e){ e e || window.event // e.stopImmediatePropagation() this.innerHTML 阻止冒泡 }) btn.addEventListener(click,function(e){ console.log(按钮的另一个监听函数执行了) }) document.body.onclick function(){ console.log(这里打印就是冒泡了没打印就是没有冒泡) } /script /body /html09 取消默认事件!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title取消默认事件/title /head body !-- 这两种方式都是让浏览器执行一段“返回空值”的代码骗过浏览器让其不跳转 -- a hrefjavascript:;返回空值取消默认事件/a a hrefjavascript:void(0);void(0)取消默认事件/a a hrefhttp://www.baidu.com idbaidu事件对象取消默认事件/a ​ script // 事件对象的两个方法来阻止默认行为 var a document.getElementById(baidu); a.onclick function(e) { e e || window.event; // 阻止默认行为 ie8不支持 // e.preventDefault(); // 阻止默认事件兼容ie8以下的浏览器 // e.returnValue false; // 兼容写法 if(e.preventDefault) { e.preventDefault(); } else { e.returnValue false; } // 这样也可以阻止默认行为,兼容了所有浏览器 return false } /script /body /html10事件对象中的坐标位置!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title鼠标事件对象属性/title style #box{ width: 200px; height: 200px; background-color: red; } /style /head body div idparent div idbox/div /div script var box document.getElementById(box); box.onclick function(event){ // 相对于浏览器有效窗口的坐标也就是相对于body的坐标 console.log(event.clientX); console.log(event.clientY); // 相对于我电脑显示器的坐标 console.log(event.screenX); console.log(event.screenY); // 相对于浏览器页面的距离包括滚动条 console.log(event.pageX); console.log(event.pageY); // 相对于当前事件源的偏移坐标 console.log(event.offsetX); console.log(event.offsetY); } ​ /script /body /html