javascript
【JavaScript-事件】target和this的区别？如何阻止冒泡事件？常见的鼠标事件和键盘事件有哪些？
- 💂 個(gè)人主頁：Aic山魚?
-
?個(gè)人社區(qū)：山魚社區(qū)
- 💬 如果文章對(duì)你有幫助，歡迎關(guān)注、點(diǎn)贊、收藏(一鍵三連)和訂閱專欄
目錄
前言
1.e.target與this的區(qū)別
2.阻止默認(rèn)行為
3.阻止冒泡事件*
4.事件委托
5.鼠標(biāo)點(diǎn)擊事件
5.1鼠標(biāo)事件禁止頁面文本復(fù)制
5.2鼠標(biāo)點(diǎn)擊獲取坐標(biāo)
5.3鼠標(biāo)跟隨事件
6.鍵盤事件
總結(jié)
前言
在我們進(jìn)行target和this的使用中如何區(qū)分this的指向問題呢？
怎么才能阻止冒泡事件？
在js中常用的鼠標(biāo)事件和鍵盤事件，在實(shí)開發(fā)中會(huì)遇到很多的地方需要用到這些比如mousemove，keydown等，本篇就來了解一下這些吧！
1.e.target與this的區(qū)別
簡(jiǎn)單來說就是this指向的是綁定事件的元素，e.target返回的是所觸發(fā)事件的元素
<script>// e.target返回的是觸發(fā)事件的對(duì)象(元素) this返回的是綁定事件的對(duì)象(元素)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 指向我們點(diǎn)擊的那個(gè)對(duì)象誰觸發(fā)了這個(gè)事件我們點(diǎn)擊的是li e. target 指向的就是1iconsole.log(e.target);// 綁定ul，那么this指向的就是我們所綁定的ulconsole.log(this);})</script>2.阻止默認(rèn)行為
<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()該方法阻止默認(rèn)事件(默認(rèn)行為)標(biāo)準(zhǔn)比如不讓鏈接跳轉(zhuǎn)var a = document.querySelector('a');a.addEventListener('click', function (e) {e.preventDefault();})// 利用return也能進(jìn)行一個(gè)阻止默認(rèn)事件 特點(diǎn)return后面的代碼不執(zhí)行 只能用于傳統(tǒng)的方式哦a.onclick = function (e) {return false;}</script>注意:return false;只能用在傳統(tǒng)的方法上，并且它后面的代碼不執(zhí)行
3.阻止冒泡事件*
為什么要阻止冒泡事件？
事件冒泡:開始時(shí)由最具體的元素接收,然后逐級(jí)向上傳播到到DOM最頂層節(jié)點(diǎn)。
事件冒泡本身的特性,會(huì)帶來的部分壞處需要我們靈活使用。
標(biāo)準(zhǔn)寫法:利用事件對(duì)象里面的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.事件委托
原理：不給每個(gè)子節(jié)點(diǎn)單獨(dú)設(shè)置事件監(jiān)聽器,而是事件監(jiān)聽器設(shè)置在其父節(jié)點(diǎn)上,然后利用冒泡原理影響設(shè)置每個(gè)子節(jié)點(diǎn)。
<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>// 事件委托的核心原理:給父節(jié)點(diǎn)添加偵聽器，利用事件冒泡影響每一個(gè)子節(jié)點(diǎn)var ul = document.querySelector('ul');ul.addEventListener('click', function (e) {e.target.style.backgroundColor = 'chartreuse';})</script> </body>5.鼠標(biāo)點(diǎn)擊事件
5.1鼠標(biāo)事件禁止頁面文本復(fù)制
contextmenu主要控制應(yīng)該何時(shí)顯示上下文菜單,主要用于程序員取消默認(rèn)的上下文菜單
禁止選中文字selectstart
<body>我的地盤我做主！<script>// 1. contextmenu 我們可以禁用右鍵菜單document.addEventListener('contextmenu', function (e) {e.preventDefault();})// 2.禁止選中文字selectstartdocument.addEventListener('selectstart', function (e) {e.preventDefault();})</script> </body>5.2鼠標(biāo)點(diǎn)擊獲取坐標(biāo)
<body><script>document.addEventListener('click', function (e) {// client返回鼠標(biāo)相對(duì)于瀏覽器窗口可視區(qū)的坐標(biāo)console.log(e.clientX);console.log(e.clientY);// page返回鼠標(biāo)相對(duì)于文檔頁面的坐標(biāo)console.log(e.pageX);console.log(e.pageY);// screen返回鼠標(biāo)相對(duì)于電腦屏幕的X坐標(biāo)console.log(e.screenX);console.log(e.screenY);})</script> </body>5.3鼠標(biāo)跟隨事件
注：不要忘記給img一個(gè)絕對(duì)定位哦
<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只要鼠標(biāo)移動(dòng)1px就會(huì)觸發(fā)這個(gè)事件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>// 這三個(gè)的執(zhí)行順序?yàn)閐own press updocument.addEventListener('keyup', function () {console.log('彈起來！');})//2. keydown 按鍵按下的時(shí)候觸發(fā)不識(shí)別功能鍵比如ctrl shift 左右箭頭啊document.addEventListener('keydow', function () {console.log('把down按下去！');})//2. keypress 按鍵按下的時(shí)候觸發(fā)不識(shí)別功能鍵比如ctrl shift 左右箭頭啊document.addEventListener('keyup', function () {console.log('把press按下去！');})</script> </body>總結(jié)
?
?點(diǎn)贊👍：您的贊賞是我前進(jìn)的動(dòng)力！
收藏?：您的支持我是創(chuàng)作的源泉！
評(píng)論?：您的建議是我改進(jìn)的良藥！
山魚🦈社區(qū):歡迎大家加?山魚社區(qū)? ！
總結(jié)
以上是生活随笔為你收集整理的【JavaScript-事件】target和this的区别？如何阻止冒泡事件？常见的鼠标事件和键盘事件有哪些？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 量子笔记：量子纠缠祛魅，贝尔纠缠态
- 下一篇： BJSubwayPen -- 北京地铁路