前言
在我们进行target和this的使用中如何区分this的指向问题呢？
怎么才能阻止冒泡事件？
在js中常用的鼠标事件和键盘事件，在实开发中会遇到很多的地方需要用到这些比如mousemove，keydown等，本篇就来了解一下这些吧！
1.e.target与this的区别
简单来说就是this指向的是绑定事件的元素，e.target返回的是所触发事件的元素
<script> // e.target返回的是触发事件的对象(元素) this返回的是绑定事件的对象(元素) var div = document.querySelector('div'); div.addEventListener('click', function (e) { console.log(e.target); console.log(this); }) var ul = document.querySelector('ul'); ul.addEventListener('click', function (e) { // e. target 指向我们点击的那个对象谁触发了这个事件我们点击的是li e. target 指向的就是1i console.log(e.target); // 绑定ul，那么this指向的就是我们所绑定的ul console.log(this); }) </script>
2.阻止默认行为
<body> <div>666</div> <a href="https://www.baidu.com/">666</a> <form action="https://www.baidu.com/"> <input type="submit" value="提交" name="sub"> </form> <script> var div = document.querySelector('div'); div.addEventListener('click', fn); div.addEventListener('mouseover', fn); div.addEventListener('mouseout', fn); function fn(e) { console.log(e.type); } // e.preventDefault()该方法阻止默认事件(默认行为)标准比如不让链接跳转 var a = document.querySelector('a'); a.addEventListener('click', function (e) { e.preventDefault(); }) // 利用return也能进行一个阻止默认事件 特点return后面的代码不执行 只能用于传统的方式哦 a.onclick = function (e) { return false; } </script>
注意:return false;只能用在传统的方法上，并且它后面的代码不执行
3.阻止冒泡事件*
为什么要阻止冒泡事件？
事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到到DOM最顶层节点。
事件冒泡本身的特性,会带来的部分坏处需要我们灵活使用。
标准写法:利用事件对象里面的stopPropagation()方法
<body> <div class="father"> <div class="son"></div> </div> <script> var son = document.querySelector('.son'); son.addEventListener('click', function (e) { alert('son'); e.stopPropagation(); }, false); var father = document.querySelector('.father'); father.addEventListener('click', function () { alert('father') }, false); </script> </body>
4.事件委托
原理：不给每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。
<body> <ul> <li>小li小li，漂亮的lili</li> <li>小li小li，漂亮的lili</li> <li>小li小li，漂亮的lili</li> <li>小li小li，漂亮的lili</li> <li>小li小li，漂亮的lili</li> </ul> <script> // 事件委托的核心原理:给父节点添加侦听器，利用事件冒泡影响每一个子节点 var ul = document.querySelector('ul'); ul.addEventListener('click', function (e) { e.target.style.backgroundColor = 'chartreuse'; }) </script> </body>
5.鼠标点击事件
5.1鼠标事件禁止页面文本复制
contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单
禁止选中文字selectstart
<body> 我的地盘我做主！ <script> // 1. contextmenu 我们可以禁用右键菜单 document.addEventListener('contextmenu', function (e) { e.preventDefault(); }) // 2.禁止选中文字selectstart document.addEventListener('selectstart', function (e) { e.preventDefault(); }) </script> </body>
5.2鼠标点击获取坐标
<body> <script> document.addEventListener('click', function (e) { // client返回鼠标相对于浏览器窗口可视区的坐标 console.log(e.clientX); console.log(e.clientY); // page返回鼠标相对于文档页面的坐标 console.log(e.pageX); console.log(e.pageY); // screen返回鼠标相对于电脑屏幕的X坐标 console.log(e.screenX); console.log(e.screenY); }) </script> </body>
5.3鼠标跟随事件
注：不要忘记给img一个绝对定位哦
<style> img { position: absolute; top: 20px; width: 80px; height: 80px; } </style> </head> <body> <img src="./img/shanyu.jpg" alt=""> <script> var pic = document.querySelector('img'); document.addEventListener('mousemove', function (e) { // 1.mousemove只要鼠标移动1px就会触发这个事件 var x = e.pageX; var y = e.pageY; pic.style.left = x - 30 + 'px'; pic.style.top = y - 30 + 'px'; }) </script> </body>
6.键盘事件
使用addEventListener不需要加on
<body> <script> // 这三个的执行顺序为down press up document.addEventListener('keyup', function () { console.log('弹起来！'); }) //2. keydown 按键按下的时候触发不识别功能键比如ctrl shift 左右箭头啊 document.addEventListener('keydow', function () { console.log('把down按下去！'); }) //2. keypress 按键按下的时候触发不识别功能键比如ctrl shift 左右箭头啊 document.addEventListener('keyup', function () { console.log('把press按下去！'); }) </script> </body>
