在百度里面做个网站怎么做,网站开发生命周期,做金融怎么进基金公司网站,收费小说网站怎么做文章目录 概念一、注册事件#xff08;绑定事件#xff09;1.1 addEventListener事件监听 二、删除事件#xff08;解绑#xff09;三、DOM事件流四、事件对象event4.1 e.target与this与e.currentTarget的区别4.2 事件对象的常见属性 五、阻止事件默认行为及冒泡六、事件委… 文章目录 概念一、注册事件绑定事件1.1 addEventListener事件监听 二、删除事件解绑三、DOM事件流四、事件对象event4.1 e.target与this与e.currentTarget的区别4.2 事件对象的常见属性 五、阻止事件默认行为及冒泡六、事件委托代理、委派七、常用的鼠标事件7.1 常用的鼠标事件7.2 常用的鼠标事件对象7.3 鼠标事件对象案例-跟随鼠标 八、常用的键盘事件8.1 常用键盘事件8.2 键盘事件对象-KeyboadEvent8.3 案例1、模拟京东按下S键聚焦输入框 概念
本节主要目标
了解注册事件的两种方式删除事件的两种方式DOM事件流的三个阶段利用事件对象完成跟随鼠标案例能够封闭阻止冒泡兼容性函数事件委托的原理了解鼠标和键盘事件
一、注册事件绑定事件 什么是注册事件 给元素添加事件称为注册事件或者绑定事件。注册事件有两种方式传统方式和方法监听注册方式 传统注册方式 利用on开头的事件特点注册事件的唯一性同一个元素同一个事件只能设置一个处理函数最后注册的处理函数将会覆盖前面注册的处理函数 方法监听注册方式addEventListener() : 标准推荐方式IE9以上可以特点同一元素同一事件可注册多个依次执行 1.1 addEventListener事件监听
eventTarget.addEventListener(type,listener[,userCapture])eventTarget.addEventListener()方法将指定的监听器注册到eventTarget目标对象上当该对象触发指定的事件时就会执行事件处理函数。该方法接收三个参数 type: 事件类型字符串如click, mouseover,注意不带onlistener: 事件处理函数事件发生时会调用该监听函数useCapture: 可选参数是一个布尔值默认是false
bodybutton监听注册事件/buttonscriptvar btn document.querySelector(button)btn.addEventListener(click,function(){alert(点击触发)})btn.addEventListener(click,function(){alert(第2个监听器触发)})/script
/body二、删除事件解绑
eventTarget.removeEventListener(event, listener[,useCapture])
bodydiv classbtn1传统移除/divdiv classbtn2监听移除/divscriptvar btn1 document.querySelector(.btn1)var btn2 document.querySelector(.btn2)// 传统移除btn1.onclickfunction(){alert(弹完就移除点击)btn1.onclicknull}// 监听移除function fn(){alert(弹完就移除且处理函数需要具名)btn2.removeEventListener(click,fn)}btn2.addEventListener(click,fn)/script
/body三、DOM事件流
事件流描述的是从页面中接收事件的顺序事件发生时会在元察节点之间按照特定的顺序传播这个传捅过程即DOM 事件流DOM事件流分为3个阶段 1、捕获阶段 2、当前目标阶段 3、冒泡阶段注意 Js代码中只能执行捕获或者泡其中的一个阶段onclick 和 attachEvent 只能得到冒泡阶段addEventListener(typelistener[useCapture])第三个参数如果是true,表示在事件捕获阶段调用事件处理程序;如果是 false(不写默认就是alse)表示在事件冒泡阶段调用事件处理程序。实际开发中我们很少使用事件捕获我们更关注事件冒泡有些事件是没有旨泡的比如 onblur、onfocus、onmouseerer、onmouseleave
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.parent {width: 400px;height: 400px;background: pink;}.child {width: 200px;height: 200px;background: purple;margin: 0 auto;}/style/headbodydiv classparentparentdiv classchildchild/div/divscriptlet parent document.querySelector(.parent);let child document.querySelector(.child);// 1、事件捕获addEventListener第3个参数传true, 事件触发顺序从document-parent-childparent.addEventListener(click,function(){alert(这是parent)},true)child.addEventListener(click,function(){alert(这是child)},true)// 2、事件冒泡addEventListener第3个参数传false或不传事件触发顺序从child-parent-document// parent.addEventListener(click,function () {// alert(这是parent);// },// false// );// child.addEventListener(click,// function () {// alert(这是child);// },// false// );// 3、onclick方式绑定事件默认为冒泡// parent.onclick function () {// alert(这是parent);// };// child.onclick function () {// alert(这是child);// };/script/body
/html
四、事件对象event
事件处理函数的第一个默认参数及事件对象event事件对象只有有了事件才会存在它是系统自动创建的事件对象是事件的一系列相关数据的集合跟事件相关的如鼠标点击事件里包含了鼠标相关信息如坐标等。
4.1 e.target与this与e.currentTarget的区别
e.target: 指向触发事件的元素对象e.currentTarget: 指向绑定事件的元素对象this 指向绑定事件的元素对象
bodydiv classparent例子div classchildchild/div/divscriptvar div document.querySelector(.parent)div.addEventListener(click,function(e){// target返回触发事件的元素对象console.log(e.target)// this返回的是绑定事件的元素对象console.log(this)// e.currentTarget返回绑定事件的元素对象console.log(e.currentTarget)})/script
/body4.2 事件对象的常见属性
e.type: 返回事件对象的类型如click,mouseovere.preventDefault: 阻止默认事件e.stopPropagation() : 阻止冒泡
五、阻止事件默认行为及冒泡
e.preventDefault: 阻止事件默认行为e.stopPropagation: 阻止冒泡
bodydiv classparentdiv classchild阻止冒泡示例/div/divscript// 例1阻止冒泡var parent document.querySelector(.parent)var child document.querySelector(.child)parent.addEventListener(click,function(e){alert(parent click)})child.addEventListener(click,function(e){alert(child click!)// 阻止冒泡使parent click事件不被触发e.stopPropagation()})/script
/body阻止默认行为 a hrefhttps://www.baidu.com跳转链接/ascript// 阻止默认行为var alink document.querySelector(a)alink.onclickfunction(e){// 阻止点击链接后的跳转行为e.preventDefault()}/script六、事件委托代理、委派 事件委托也叫事件代理 原理不是每个子节点单独设置事件监听器而是事件监听器设置在其父节点上然后利用冒泡原理影响设置每个子节点。作用只操作了一次DOM提高了程序的性能 bodyulli事件委托原理1/lili事件委托原理2/lili事件委托原理3/lili事件委托原理4/lili事件委托原理5/li/ulscript// 笨办法var ul document.querySelector(ul)var lis document.querySelectorAll(li)for(let i0;ilis.length;i){lis[i].onclickfunction(){this.style.colorred}}// 事件委托ul.onclickfunction(e){let li e.target // 利用事件冒泡原理拿到的target为触发事件的元素对象lie.target.style.colorred}/script
/body七、常用的鼠标事件
7.1 常用的鼠标事件
选中文字事件selectstart右键菜单事件contextmenu点击事件onclick鼠标经过触发:onmouseover鼠标离开事件onmouseout获得鼠标焦点触发onfocus失去鼠标焦点般发onblur鼠标移动触发onmousemove鼠标弹起触发onmouseup鼠标按下触发onmousedown
bodydiv这是一段阻止右键以及不能选中的文字/divscriptvar div document.querySelector(div)div.oncontextmenufunction(e){// 阻止弹出右键菜单e.preventDefault()}div.onselectstart function(e){// 阻止文字选中e.preventDefault()}/script
/body7.2 常用的鼠标事件对象
event对象代表事件的状态跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent 和健盘事件对象 KeyboardEvent常见的鼠标事件对象 e.clientX: 返回鼠标相对于浏览居南口可视区的 X 坐标e.clientY:返回鼠标相对于浏览器窗口可视区的 Y 坐标e.pageX:返回鼠标相对于文档页面的X 坐标 E9 支持e.pageY:返回鼠标相对于文档页面的 Y 坐 E9 支持e.screenX: 返回鼠标相对于电脑屏幕的X坐标e.screenY: 返回鼠标相对于电鹏屏幕的Y 坐标
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody{height: 3000px;}/style
/head
bodyscript// 当页面向下滚动一定距离后点击发现三组值的不同document.addEventListener(click,function(e){// client组返回当前可视区的坐标let clientX e.clientXlet clientY e.clientYconsole.log(clientX,clientY)// page组返回当前文档页面的坐标let pageX e.pageXlet pageY e.pageYconsole.log(pageX,pageY)// screen组返回当前点击电脑屏幕的坐标let screenX e.screenXlet screenY e.screenYconsole.log(screenX,screenY)})/script
/body
/html7.3 鼠标事件对象案例-跟随鼠标
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.follow{position: absolute;user-select: none;}/style
/head
bodydiv classfollow显眼包/divscriptlet follow document.querySelector(.follow)document.addEventListener(mousemove,function(e){let pageX e.pageXlet pageY e.pageYfollow.style.left pageXpxfollow.style.top pageYpx})/script
/body
/html拓展电商网站鼠标移入商品图看大图功能实现基于此原理
八、常用的键盘事件
8.1 常用键盘事件
onkeyup: 键盘松开时onkeydown: 键盘按钮时, 返回键盘代码键盘上真实键的数字onkeypress: 键盘被按下时返回键字符代码ASCII 字符且不识别功能键如ctrl,shift等执行顺序down - press-upkeydown,keypress按下时会一直触发 scriptdocument.addEventListener(keyup,function(){console.log(keyup)})document.addEventListener(keypress,function(){console.log(keypress)})document.addEventListener(keydown,function(){console.log(keydown)})/script8.2 键盘事件对象-KeyboadEvent
e.keyCode: 返回键盘对应的码值注意keydown与keypress不同推荐使用keydowne.key: 返回键盘对应的值 script// 阻止页面CtrlS的默认保存行为document.addEventListener(keydown, function (e) {console.log(e.key,e.keyCode,e)let keyCode e.keyCode// 83为s键码if(keyCode83e.ctrlKey){e.preventDefault();console.log(按下了ctrl s)}})/script8.3 案例
1、模拟京东按下S键聚焦输入框
思路keyup事件keyCode为83时让输入框聚焦focus
bodyinput typetextbutton 搜索/buttonscriptlet search document.querySelector(input)document.addEventListener(keyup,function(e){if(e.keyCode83){search.focus()}})/script
/body
