注册事件 传统注册方式,使用on开头的,注册事件具有唯一性 方法监听方式 addEventListener() / attachEvent(),特点:同一个元素可以添加多种事件 事件监听方式 addEventListener('事件类型',function(){})
,里面的事件是字符型,不加on
同一个元素同一个事件可以添加多个侦听器(事件处理程序) 兼容性问题
attachEvent(‘事件类型’,function(){}) ie9以前支持 删除事件 传统事件解绑方法 查看实例
1 2 3 4 5 6 7 <script > var divs =document .querySelectorAll('div' ); divs[0 ].onclick = function ( ) { alert('nihao' ); divs[0 ].onclick = null ; } </script >
第二种removeEventListener 查看答案
1 2 3 4 5 divs[1 ].addEventListener('click' ,fn); function fn ( ) { alert('nihao' ); divs[1 ].removeEventListener('click' ,fn) }
第三种使用datch Dom事件流 捕获阶段,当前目标阶段,冒泡阶段 js代码中只能执行捕获或者冒泡其中的一个阶段 onclick和attachEvent只能得到冒泡阶段 addEventListener看第三个参数的设置默认为false,true
表示在事件捕获阶段
调用事件处理程序,false
表示在事件冒泡阶段
调用事件处理程序 传播类型:捕获从外到里,冒泡从里到外 有些事件没有冒泡onblur,onmouseenter,onmouseleave,onfocus 事件对象 侦听函数 小括号里面的当形参来看 有兼容性问题,ie678通过window.event 查看答案
1 2 3 4 5 6 7 8 9 10 11 var divs =document .querySelectorAll('div' );divs[0 ].onclick = function (e ) { console .log(e); e = e || Window.event; } divs[1 ].addEventListener('click' ,fn); function fn (e ) { console .log(e); e = e || Window.event; }
常见事件对象的属性和方法 返回事件
e.target
返回的是触发事件的对象元素 event,兼容性问题e.srcElement
this
返回的是绑定事件的对象 (类似属性currentTarget
,有兼容性问题问题)e.type
调用事件类型,不带on阻止默认事件
e.preventDefault()
有兼容性问题低版本 使用returnValue 可以使用return false,没有兼容性问题,特点 return后面的代码不执行,只限制于传统的注册方式 阻止冒泡
stopPropagation()
,偶遇兼容性问题e.canceBubble = true
非标准的事件委托 重点原理:不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点
常见的鼠标事件 contextmenu
文本菜单selectstart
选中文字查看答案
1 2 3 4 5 6 7 8 9 10 <ul > 我是一段不愿意被复制的文字</ul > <script > var ul = document .querySelector('ul' ); ul.addEventListener('contextmenu' ,function (e ) { e.preventDefault(); }) ul.addEventListener('selectstart' ,function (e ) { e.preventDefault(); }) </script >
鼠标事件对象 click
e.clientX/Y 鼠标在可视区 e.pageX/Y 在页面文档 e.screnX/Y 相对于屏幕 mousemove
原理:获取鼠标的位置,设置元素的样式 查看答案
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <style > img{ position: absolute; width: 20px; } </style > <img src ="https://cloud.mr90.top/hexo/0/jsdelivr.jpeg" alt ="" > <script > var imgc = document .querySelector('img' ) document .addEventListener('mousemove' ,function (e ) { var x = e.pageX; var y = e.pageY; imgc.style.left = x +'px' ; imgc.style.top = y +'px' ; }) </script >
常用的键盘事件 keyup
按键弹起时触发keydown
按下时触发,能识别功能键,优先级高keypress
被按下时触发(不识别功能键ctrl,shift,左右箭头)e.keyCode 得到相应键位的ASCII值,keyup和keydown事件不区分字母大小写,keypress区分大小写 输入快捷键获得焦点实例
1 2 3 4 5 6 7 8 9 10 <input type ="text" > <script > var input = document .querySelector('input' ); document .addEventListener('keyup' ,function (e ) { console .log(e.keyCode); if (e.keyCode === 65 ){ input.focus(); } }) </script >
鼠标获取实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 <style > .box { position: relative; width: 150px; margin: 6.25rem auto; } .con { display: none; position: absolute; top: -25px; margin: 0 0 5px 20px; border-radius: 10px; height: 20px; width: 80px; background-color : #537934 ; color : #000 ; font-size: 10px; padding-left: 5px; padding-top: 2px; } .con :after { content: ''; position: absolute; width: 0; height: 0; border-top : 5px solid #537934 ; border-right: 10px solid transparent; border-left: 10px solid transparent; margin: 10px auto; bottom: -15px; left: 20px; } input { outline: none; border-radius: 5px; width: 150px; height: 20px; padding-left: 4px; border : 2px solid #ccc ; background-color: rgba(139, 187, 50, 0.424); } </style > <body > <div class ="box" > <div class ="con" > </div > <input type ="text" name ="" id ="" placeholder ="请输入内容" > </div > <script > var inputs = document .querySelector('input' ); document .addEventListener('keyup' , function (e ) { if (e.keyCode === 65 ) { inputs.focus(); } }) var box = document .querySelector('.box' ); inputs.addEventListener('keyup' , function ( ) { if (inputs.value == '' ) { box.children[0 ].style.display = 'none' ; } else { box.children[0 ].style.display = 'block' ; box.children[0].innerHTML = inputs.value; } }) inputs.addEventListener('focus' , function ( ) { if (inputs.value !== '' ) { box.children[0 ].style.display = 'block' ; } }) inputs.addEventListener('blur' , function ( ) { box.children[0 ].style.display = 'none' }) </script >