當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
【JavaScript-事件】target和this的区别？如何阻止冒泡事件？常见的鼠标事件和键盘事件有哪些？
生活随笔
收集整理的這篇文章主要介紹了
【JavaScript-事件】target和this的区别？如何阻止冒泡事件？常见的鼠标事件和键盘事件有哪些？
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
- 💂 個人主頁：Aic山魚?
-
?個人社區：山魚社區
- 💬 如果文章對你有幫助，歡迎關注、點贊、收藏(一鍵三連)和訂閱專欄
目錄
前言
1.e.target與this的區別
2.阻止默認行為
3.阻止冒泡事件*
4.事件委托
5.鼠標點擊事件
5.1鼠標事件禁止頁面文本復制
5.2鼠標點擊獲取坐標
5.3鼠標跟隨事件
6.鍵盤事件
總結
前言
在我們進行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 指向的就是1iconsole.log(e.target);// 綁定ul，那么this指向的就是我們所綁定的ulconsole.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.禁止選中文字selectstartdocument.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 updocument.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>總結
?
?點贊👍：您的贊賞是我前進的動力！
收藏?：您的支持我是創作的源泉！
評論?：您的建議是我改進的良藥！
山魚🦈社區:歡迎大家加?山魚社區? ！
總結
以上是生活随笔為你收集整理的【JavaScript-事件】target和this的区别？如何阻止冒泡事件？常见的鼠标事件和键盘事件有哪些？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 量子笔记：量子纠缠祛魅，贝尔纠缠态
- 下一篇： 计算机硬件 软件和用户的关系,大家都知道