" />

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript的DOM事件詳解

 更新時間：2022年02月11日 16:01:02   作者：執(zhí)手天涯@  
這篇文章主要為大家詳細介紹了JavaScript的DOM事件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

1、事件對象

【獲取事件對象】

  • 什么是事件對象：是個對象，這個對象里有事件觸發(fā)時的相關(guān)信息。
  • 事件對象的語法
元素.addEventListener('click',function(e){})

【事件對象常用屬性】

  • type：獲取當前的事件類型
  • clientX/clientY：獲取光標相對于瀏覽器可見窗口左上角的位置
  • offsetX/offsetY：獲取光標相對于當前DOM元素左上角的位置
  • key：用戶按下的鍵盤的值

【案例】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <img src="./images/tianshi.gif" alt="">
    <script>
        let img = document.querySelector('img')
        document.addEventListener('mousemove', function (e) {
            img.style.top = e.pageY-40 + 'px'
            img.style.left = e.pageX-50 + 'px'
        })
    </script>
</body>
</html>

2、事件流

【解釋】： 事件流是指事件完整執(zhí)行過程中的流動路徑

【圖解】：

請?zhí)砑訄D片描述

【說明】：

  • 捕獲階段是從父到子
  • 冒泡階段是從子到父

【什么是事件冒泡】 ：當一個元素的事件被觸發(fā)時，同樣的事件將會在該元素的所有祖先元素中依次被觸發(fā)。

事件冒泡是默認存在的。

【案例解釋】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            margin: 100px auto;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        let fa = document.querySelector('.father')
        let son = document.querySelector('.son')
        fa.addEventListener('click', function () {
            alert('我是爸爸')
        }, true)
        son.addEventListener('click', function () {
            alert('我是兒子')
        }, true)
        document.addEventListener('click', function () {
            alert('我是爺爺')
        }, true)
        // btn.onclick = function() {}
    </script>
</body>
</html>

【事件捕獲概念】： 從DOM的根元素開始去執(zhí)行對應的事件。

【語法】

DOM.addEventListener(事件類型,事件處理函數(shù),是否使用捕獲機制)

【說明】

  • addEventListener第三個參數(shù)傳入true代表是捕獲階段觸發(fā)
  • 若傳入false代表冒泡階段觸發(fā)，默認就是false
  • 原來的寫法沒有捕獲只有冒泡階段

【阻止事件的流動】

語法：

事件對象.stopProPagation()

說明：

  • 阻止事件的流動，在捕獲和冒泡階段都有效
  • mouseover 和 mouseout 會有冒泡效果
  • mouseenter 和 mouseleave 沒有冒泡效果(推薦)

【阻止事件的默認行為】

語法：

e.preventDefault()

3、事件委托

【解釋】： 將事件委托于其他元素進行處理。

【優(yōu)點】： 給父級元素添加事件可以極大的優(yōu)化性能

【原理】： 利用事件冒泡的特點，給父級元素添加事件，子元素可以觸發(fā)

【語法】： 事件對象.target可以獲取得到真正觸發(fā)事件的元素

4、綜合案例

**【需求】：**點擊錄入按鈕，可以增加學生信息

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/user.css">
</head>
<body>
  <h1>新增學員</h1>
  <div class="info">
    姓名：<input type="text" class="uname">
    年齡：<input type="text" class="age">
    性別: <select name="gender" id="" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    薪資：<input type="text" class="salary">
    就業(yè)城市：<select name="city" id="" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="廣州">廣州</option>
      <option value="深圳">深圳</option>
      <option value="曹縣">曹縣</option>
    </select>
    <button class="add">錄入</button>
  </div>
  <h1>就業(yè)榜</h1>
  <table>
    <thead>
      <tr>
        <th>學號</th>
        <th>姓名</th>
        <th>年齡</th>
        <th>性別</th>
        <th>薪資</th>
        <th>就業(yè)城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <script>
    //準備好數(shù)據(jù)后端的數(shù)據(jù)
    let arr = [
      { stuId: 1001, uname: '歐陽霸天', age: 19, gender: '男', salary: '20000', city: '上海' },
      { stuId: 1002, uname: '令狐霸天', age: 29, gender: '男', salary: '30000', city: '北京' },
      { stuId: 1003, uname: '諸葛霸天', age: 39, gender: '男', salary: '2000', city: '北京' },
    ]
    // 獲取元素
    let tbody = document.querySelector('tbody');
    // 獲取錄入按鈕
    let add = document.querySelector('.add');
    // 獲取表單元素
    let uname = document.querySelector('.uname')
    let age = document.querySelector('.age')
    let gender = document.querySelector('.gender')
    let salary = document.querySelector('.salary')
    let city = document.querySelector('.city')
    // 封裝渲染數(shù)據(jù)的函數(shù)
    function render() {
      // 清空原來的數(shù)據(jù)
      tbody.innerHTML = ''
      for (let i = 0; i < arr.length; i++) {
        // 創(chuàng)建tr
        let tr = document.createElement('tr');
        // 添加數(shù)據(jù)
        tr.innerHTML = `
        <td>${arr[i].stuId}</td>
        <td>${arr[i].uname}</td>
        <td>${arr[i].age}</td>
        <td>${arr[i].gender}</td>
        <td>${arr[i].salary}</td>
        <td>${arr[i].city}</td>
        <td>
          <a href="javascript:" id=${i}>刪除</a>
        </td>
        `
        tbody.appendChild(tr)
        // 復原表單數(shù)據(jù)
        uname.value = age.value = salary.value = ''
      }
    }
    // 調(diào)用頁面加載函數(shù)
    render();
    // 添加數(shù)據(jù)操作
    add.addEventListener('click', function () {
      // 獲取表單的數(shù)據(jù) 添加到數(shù)組
      arr.push({
        stuId: arr[arr.length - 1].stuId + 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value
      })
      render();
    })
    // 刪除操作
    tbody.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        arr.splice(e.target.id, 1)
        render()
      }
    })
  </script>
</body>
</html>

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!  

相關(guān)文章

  • javascript學習指南之回調(diào)問題

    javascript學習指南之回調(diào)問題

    回調(diào)函數(shù)被認為是一種高級函數(shù)，一種被作為參數(shù)傳遞給另一個函數(shù)(在這稱作"otherFunction")的高級函數(shù)，回調(diào)函數(shù)會在otherFunction內(nèi)被調(diào)用(或執(zhí)行)?；卣{(diào)函數(shù)的本質(zhì)是一種模式(一種解決常見問題的模式)，因此回調(diào)函數(shù)也被稱為回調(diào)模式。
    2016-04-04
  • Knockoutjs快速入門(經(jīng)典)

    Knockoutjs快速入門(經(jīng)典)

    Knockoutjs是一個JavaScript實現(xiàn)的MVVM框架.主要有如下幾個功能1. Declarative bindings2. Observables and dependency tracking3. Templating,需要了解的朋友可以參考下
    2012-12-12
  • 深入理解JavaScript系列（19）：求值策略(Evaluation strategy)詳解

    深入理解JavaScript系列（19）：求值策略(Evaluation strategy)詳解

    這篇文章主要介紹了深入理解JavaScript系列（19）：求值策略(Evaluation strategy)詳解,本文講解了一般理論、按值傳遞、按引用傳遞、按共享傳遞（Call by sharing）、按共享傳遞是按值傳遞的特例等內(nèi)容,需要的朋友可以參考下
    2015-03-03
  • javascrpt綁定事件之匿名函數(shù)無法解除綁定問題

    javascrpt綁定事件之匿名函數(shù)無法解除綁定問題

    經(jīng)常聽到有人說，匿名函數(shù)綁定事件不好控制啊，無法解除綁定啊，本文將介紹詳細的解決方法，需要的朋友可以參考下
    2012-12-12
  • JavaScript中的Math.sin()方法使用詳解

    JavaScript中的Math.sin()方法使用詳解

    這篇文章主要介紹了JavaScript中用于四舍五入的Math.sin()方法講解,是JS入門學習中的基礎(chǔ)知識,需要的朋友可以參考下
    2015-06-06
  • 深入剖析JavaScript編程中的對象概念

    深入剖析JavaScript編程中的對象概念

    這篇文章主要介紹JavaScript編程中的對象概念,也是JS面向?qū)ο缶幊痰幕A(chǔ)知識,需要的朋友可以參考下
    2015-10-10
  • JavaScript入門教程(6) Window窗口對象

    JavaScript入門教程(6) Window窗口對象

    他是JavaScript中最大的對象，它描述的是一個瀏覽器窗口。一般要引用它的屬性和方法時，不需要用“window.xxx”這種形式，而直接使用“xxx”。一個框架頁面也是一個窗口。
    2009-01-01
  • JS的get和set使用示例

    JS的get和set使用示例

    巧用get和set，能夠直接操作對象屬性實現(xiàn)讀寫，可以極大的提高編程效率，下面有個不錯的示例，大家可以參考下
    2014-02-02
  • 淺談javascript構(gòu)造函數(shù)與實例化對象

    淺談javascript構(gòu)造函數(shù)與實例化對象

    JavaScript 中的構(gòu)造函數(shù)和其它語言中的構(gòu)造函數(shù)是不同的。 通過 new 關(guān)鍵字方式調(diào)用的函數(shù)都被認為是構(gòu)造函數(shù)。任何JavaScript 函數(shù)都可以用做構(gòu)造函數(shù)，構(gòu)造函數(shù)必須 使用new 運算符作為前綴來創(chuàng)建新的實例。
    2015-06-06
  • js 操作符匯總

    js 操作符匯總

    本文并沒有詳細的介紹js所有的操作符，只是就js在操作符上與其它常用語言不一樣的獨特之處列舉一二，了解了這些，至少不會讓我們在讀一些開源框架js代碼時一頭霧水，并且可以讓我們的js代碼更簡潔、更安全（少出bug）。
    2014-11-11

最新評論