文章目錄

事件
- 事件注冊
- - 傳統方式
  - 事件監聽方式
- 事件洗掉
DOM事件流
事件物件
- 事件物件的使用
- 常用屬性和方法
- - e.target和this區別
  - 阻止默認行為
  - 阻止事件冒泡
  - 事件委托
- 滑鼠事件
- - 滑鼠事件物件
- 鍵盤事件
- - 鍵盤事件物件
- 綜合案例：快遞單號放大顯示

事件

事件注冊

傳統方式

dom物件.事件名=事件處理程式

唯一性：同一個物件的同一個事件只能注冊一個處理程式，后面注冊的程式會將前面注冊的程式覆寫掉

事件監聽方式

由于不同瀏覽器采用的事件流實作方式不同，事件監聽的實作存在兼容性問題，通常根據瀏覽器的內核，可以把瀏覽器劃分為兩大類

① 標準瀏覽器（W3C）

eventTarget.addEventListener(type, callback, [capture])

type：dom物件系結的事件型別，如click、change、focus 不帶on
callback：事件的處理程式
[capture]：可選引數，指定事件處理方式，默認為false，表示冒泡階段完成事件處理，true為捕獲階段完成事件處理（事件流中詳講）

② 早期IE內核瀏覽器（如IE 6~IE 8）

eventTarget.attachEvent(type, callback)

type：onclick、onfocus 要帶on
callback同上：

不唯一性：給同一個DOM物件的同一個事件添加多個事件處理程式

注冊事件兼容性解決代碼：

function addEventListener(element, eventName, fn) {
      // 判斷當前瀏覽器是否支持 addEventListener 方法
      if (element.addEventListener) {
        element.addEventListener(eventName, fn);  // 第三個引數 默認是false
      } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, fn);
      } else {
        // 相當于 element.onclick = fn;
        element['on' + eventName] = fn;
 }

事件洗掉

傳統：eventTarget.οnclick=null
早期：eventTarget.detachEvent(type,callback)
標準：eventTarget.removeEventListener(type,callback)

洗掉事件兼容性解決代碼：

 function removeEventListener(element, eventName, fn) {
      // 判斷當前瀏覽器是否支持 removeEventListener 方法
      if (element.removeEventListener) {
        element.removeEventListener(eventName, fn);  // 第三個引數 默認是false
      } else if (element.detachEvent) {
        element.detachEvent('on' + eventName, fn);
      } else {
        element['on' + eventName] = null;
 }

DOM事件流

事件流：指當事件發生時，會在發生事件的元素節點與DOM樹根節點之間按照特定的順序進行傳播，這個程序稱之為事件流

網景公司：采用事件捕獲方式
微軟公司：采用事件冒泡方式
W3C：先捕獲（但不處理），后冒泡（逐級處理）

事件冒泡： IE 最早提出，事件開始時由最具體的元素接收，然后逐級向上傳播到到 DOM 最頂層節點的程序

事件捕獲： 網景最早提出，由 DOM 最頂層節點開始，然后逐級向下傳播到到最具體的元素接收的程序

在這里插入圖片描述

JS 代碼中只能執行捕獲或者冒泡其中的一個階段
onclick 和 attachEvent 只能得到冒泡階段
addEventListener(type, callback, [capture]) 第三個引數如果是true，表示在事件捕獲階段呼叫事件處理程式；如果是 false（不寫默認就是false），表示在事件冒泡階段呼叫事件處理程式
有些事件是沒有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave

事件物件

事件物件的使用

事件物件：event

當事件發生后，由系統自動生成，跟事件相關一系列資訊資料的集合存放在event物件中，不需傳遞引數

早期IE內核瀏覽器：var 事件物件 = window.event
W3C內核瀏覽器：dom物件.事件 =function (event) { }

事件物件的兼容性解決：

e=e||window.event;

常用屬性和方法

在這里插入圖片描述

e.target和this區別

e.target回傳的是觸發事件的物件
this回傳的是系結事件的物件

了解： this有個類似寫法：e.currentTarget (兼容性不常用)

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    var ul=document.querySelector('ul');
    ul.addEventListener('click',function(e){
        console.log(this); //回傳ul物件
        console.log(e.target); //回傳li物件
    });
</script>

在這里插入圖片描述

e.target支持IE9以上，處理兼容性問題：

div.onclick = function(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  console.log(target);
}

阻止默認行為

利用事件物件的preventDefault()方法和returnValue屬性，禁止所有瀏覽器執行元素的默認行為

注意： 只有事件物件的cancelable屬性設定為true，才可以使用preventDefault()方法取消其默認行為

阻止默認行為案例：
注冊click事件，阻止a標簽默認事件

<a href="http://www.baidu.com">百度</a>
<script>
    var a = document.querySelector('a')
    //標準瀏覽器
    a.addEventListener('click', function (e) {
        e.preventDefault()
    })
    a.onclick = function (e) {
    	//普通瀏覽器
        e.preventDefault()
        //低版本瀏覽器
        e.returnValue
    }
</script>

阻止事件冒泡

利用事件物件呼叫stopPropagation()方法和設定cancelBubble屬性，實作禁止所有瀏覽器的事件冒泡行為

標準瀏覽器：e.stopPropagation()
非標準瀏覽器： e.cancelBubble = true

兼容性解決代碼：

if(e && e.stopPropagation){
     e.stopPropagation();
}else{
    window.event.cancelBubble = true;
}

事件委托

原理： 不給子元素注冊事件，而是給父元素注冊事件監聽器，利用 冒泡原理 影響到每個子元素

優點： 事件處理代碼在父元素的事件執行，只操作了一次dom，提高了程式的性能

事件委托案例：

思路：給 ul 注冊點擊事件，然后利用事件物件的 target 來找到當前點擊的 li，因為點擊 li，事件會冒泡到 ul 上， ul 有注冊事件，就會觸發事件監聽器

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>
<script>
    var ul = document.querySelector('ul')
    ul.addEventListener('click', function (e) {
        e.target.style.backgroundColor = 'pink'
    })
</script>

滑鼠事件

在這里插入圖片描述
1、禁止滑鼠右擊選單：contextmenu

document.addEventListener('contextmenu', function (e) {
  e.preventDefault();
})

2、禁止滑鼠選中：selectstart

document.addEventListener('selectstart', function (e) {
  e.preventDefault();
})

滑鼠事件物件

MouseEvent：和滑鼠事件相關的一系列資訊集合，用來獲取當前滑鼠的位置資訊
在這里插入圖片描述
IE 6~IE 8瀏覽器中不兼容pageX和pageY屬性，在專案開發時需要對IE 6~IE 8瀏覽器進行兼容處理

var pageX = event.pageX || event.clientX + 
(document.body.scrollLeft || document.documentElement.scrollLeft)
var pageY = event.pageY || event.clientY + 
(document.body.scrollTop || document.documentElement.scrollTop)

滑鼠事件案例：圖片跟隨滑鼠移動

<style>
    img{
        width: 200px;
        height: 180px;
        position: absolute;
        top: 2px;
    }
</style>
<body>
    <img src="./0.jpg" alt="">
    <script>
        var pic = document.querySelector('img')
        document.addEventListener('mousemove', function (e) {
            var x = e.clientX
            var y = e.clientY
            //確保滑鼠位于圖片最中間 都減去圖片長寬一半
            //加單位px
            pic.style.left = x -100+ 'px'
            pic.style.top = y -90+ 'px'
            console.log('(x:' + x + ',y:' + y + ')')
        })
    </script>
</body>

在這里插入圖片描述

鍵盤事件

在這里插入圖片描述

注意：

如果使用addEventListener 不需要加 on ，而普通注冊事件需要加on
keypress和前面2個的區別是，它不識別功能鍵，比如左右箭頭，shift ，ctrl等
三個事件的執行順序是：keydown — keypress — keyup

三者的區別：

keypress事件保存的按鍵值是ASCII碼
keydown和keyup事件保存的按鍵值是虛擬鍵碼
keydown和keypress如果按住不放的話，會重復觸發該對應事件
keyup和keydown事件不區分字母大小寫，keypress區分字母大小寫

鍵盤事件物件

KeyBoardEvent物件：是跟鍵盤事件相關的一系列資訊的集合

keyCode屬性：可以得到相應的ASCII碼值，進而判斷用戶按下了哪個鍵

ASCII表：
在這里插入圖片描述

鍵盤事件案例：輸出用戶按下的鍵

<body>
    搜索： <input type="text">
    
    <script>
        var search = document.querySelector('input')
        document.addEventListener('keyup', function (e) {
            if (e.keyCode === 83) {
                search.focus()
            }
            var n = String.fromCharCode(e.keyCode)
            alert('你按了' + n + '鍵')
        })
    </script>
</body>

在這里插入圖片描述

綜合案例：快遞單號放大顯示

實作功能：input輸入框內容同步顯示到上方的方框中并且失去焦點消失，獲得焦點則出現
在這里插入圖片描述

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .search {
        position: relative;
        width: 178px;
        margin: 100px;
    }

    .con {
        display: none;
        position: absolute;
        top: -40px;
        width: 171px;
        border: 1px solid rgba(0, 0, 0, .2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
        padding: 5px 0;
        font-size: 18px;
        line-height: 20px;
        color: #333;
    }

    .con::before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: 28px;
        left: 18px;
        border: 8px solid #000;
        border-style: solid dashed dashed;
        border-color: #fff transparent transparent;
    }
</style>
<body>
    <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="請輸入您的快遞單號" class="jd">
    </div>
    <script>
        var con=document.querySelector('.con');
        var input=document.querySelector('.jd');
        //注冊keyup事件 不能用keydown和keypress
        input.addEventListener('keyup',function(){
            if(this.value==''){
                con.style.display='none';
            }else{
                con.style.display='block';
                con.innerText=this.value;
            }
        });
        //失去焦點
        input.addEventListener('blur',function(){
            con.style.display='none';
        })
        //獲得焦點
        input.addEventListener('focus',function(){
            if(this.value!==''){
                con.style.display='block';
            }
        });
    </script>
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/286607.html

標籤：其他

上一篇：前端 vue 在可視化大屏領域的作業實踐

下一篇：個人博客系統---基本功能的實作

JavaScript DOM 事件進階

文章目錄

事件

事件注冊

傳統方式

事件監聽方式

事件洗掉

DOM事件流

事件物件

事件物件的使用

常用屬性和方法

e.target和this區別

阻止默認行為

阻止事件冒泡

事件委托

滑鼠事件

滑鼠事件物件

鍵盤事件

鍵盤事件物件

綜合案例：快遞單號放大顯示