JavaScript的DOM事件详解

更新时间:2023-04-04 23:54:44 阅读：评论：0

1、事件对象

【获取事件对象】

什么是事件对象：是个对象，这个对象里有事件触发时的相关信息。事件对象的语法

元素.addeventlistener('click',function(e){})

【事件对象常用属性】

type：获取当前的事件类型clientx/clienty：获取光标相对于浏览器可见窗口左上角的位置offtx/offty：获取光标相对于当前dom元素左上角的位置key：用户按下的键盘的值

【案例】：

<!doctype html><html lang="en"><head>    <meta chart="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.querylector('img')        document.生物科研addeventlistener('moumove', function (e) {            img.style.top = e.pagey-40 + 'px'            img.style.left = e.pagex-50 + 'px'        })    </script></body></html>

2、事件流

【解释】：事件流是指事件完整执行过程中的流动路径

【图解】：

【说明】：

捕获阶段是从父到子冒泡阶段是从子到父

【什么是事件冒泡】：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。

事件冒泡是默认存在的。

【案例解释】

<!doctype html><html lang="en"><head>    <meta chart="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.querylector('.father')        let son = document.querylector('.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的根元素开始去执行对应的事件。

【语法】

dom.addeventlistener(事件类型,事件处理函数,是否使用捕获机制)

【说明】

addeventlistener第三个参数传入true代表是捕获阶段触发若传入fal代表冒泡阶段触发，默认就是fal原来的写法没有捕获只有冒泡阶段

【阻止事件的流动】

语法：

事件对象.stoppropagation()

说明：

阻止事件的流动，在捕获和冒泡阶段都有效mouover 和 mouout 会有冒泡效果mouenter 和 mouleave 没有冒泡效果(推荐)

【阻止事件的默认行为】

语法：

e.preventdefault()

3、事件委托

【解释】：将事件委托于其他元素进行处理。

【优点】：给父级元素添加事件可以极大的优化性能

【原理】：利用事件冒泡的特点，给父级元素添加事件，子元素可以触发

【语法】：事件对象.target可以获取得到真正触发事件的元素

4、综合案例

**【需求】：**点击录入按钮，可以增加学生信息

<!doctype html><html lang="en"><福建高考成绩公布;head>  <meta chart="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/ur.css"></head><body>  <h1>新增学员</h1>  <div class="info">    姓名：<input type="text" class="uname">    年龄：<input type="text" class="age">    性别: <lect name="gender" id="" class="gender">      <option value="男">男</option>      <option value="女">女</option>    </lect>    薪资：<input type="text" class="salary">    就业城市：<lect name="city" id="" class="city">      <option value="北京">北京</option>      <option value="上海">上海</option>      <option value="广州">广州</option>      <option value="深圳">深圳</option>      <option value="曹县">曹县</option>    </lect>    <button class="add">录入</button>  </div>  <h1>就业榜</h1>  <table>    <thead>      <tr>        <th>学号</th>        <th>姓名</th>        <th>年龄</th>        <th>性别</th>        <th>薪资</th>        <th>就业城市</th>        <th>操作</th>      </tr>    </thead>    <tbody>    </tbody>  </table>  <script>    //准备好数据后端的数据    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.querylector('tbody');    // 获取录入按钮    let add = document.querylector('.add');    // 获取表单元素    let uname = document.querylector('.uname')    let age = doc卫风作品ument.querylector('.age')    let gender = document.querylector('.gender')    let salary = document.querylector('.salary')    let city = document.querylector('.city')    // 封装渲染数据的左传是什么体函数    function render() {      // 清空原来的数据      tbody.innerhtml = ''      for (let i = 0; i < arr.length; i++) {        // 创建tr        let tr = document.createelement('tr');        // 添加数据        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)        // 复原表单数据        uname.value = age.value = salary.value = ''      }    }    // 调用页面加载函数    render();    // 添加数据操作    add.addeventlistener('click', function () {      // 获取表单的数据 添加到数组      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>