第十六节：JavaScript 事件（一）

孤安先生

已于 2022-10-28 17:44:35 修改

阅读量90

点赞数

分类专栏：全栈开发学习日记 # 第三章：JavaScript 行为文章标签：前端 javascript js dom

于 2021-04-06 10:03:29 首次发布

本文链接：https://blog.csdn.net/qq_41952539/article/details/112533548

版权

全栈开发学习日记同时被 2 个专栏收录

85 篇文章 12 订阅

订阅专栏

第三章：JavaScript 行为

14 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript事件的触发、三要素（事件源、类型、处理程序）、常用事件如load、click等的实战示例，以及事件绑定、动态绑定、监听、冒泡与捕获、事件委托等高级概念，并提供了解决静态绑定问题的方法。

摘要由CSDN通过智能技术生成

第十六节：JavaScript 事件

概述： 在实际开发中, JavaScript代码是通过用户的某些特定行为（例如: 单击, 双击, 按键等） 来触发的， 用户的行为就叫做：事件。

事件三要素：

事件源（谁）：触发事件的元素

事件类型（什么事件）：例：onclick 点击事件

事件处理程序（做什么）：事件触发后执行的代码（函数形式），事件处理函数

解释：

事件源：HTML中的标签
事件：用户的某些特定行为 (例如: 单击, 双击, 按键等)
给事件源绑定行为： 就是给HTML标签注册一个事件, 一般事件都要结合函数来使用的, 所以事件绑定函数
简单理解：给事件源注册一个事件, 该事件关联一个函数

事件被触发后的响应行为：就是事件被触发后, 执行的 JavaScript 代码, 一般要用函数封装的

3.5.1 常用的事件

事件	说明
onload	页面加载事件：当页面中的内容加载完毕后才会执行
onclick	鼠标点击事件
ondblclick	鼠标双击事件
onfocus	获取鼠标焦点事件
onblur	失去焦点事件
onchange	改变域事，一般是结合下拉列表使用的，例如：经典的三级联动（省市区）
onsubmit	表单提交事件
onkeyup	键盘抬起事件
onkeydown	键盘按下事件
onmouseover	鼠标悬浮事件
onmouseout	鼠标移出事件
onmousemove	鼠标移动事件
oninput	给表单使用，内容发生变化会触发 input 事件

onload：页面加载事件：当页面中的内容加载完毕后才会执行

<input type="button" value="onload事件" >

<script>
	onload function () {
        alert('body内容加载完毕，再显示此弹窗');
    }
</script>

onclick：鼠标点击事件

ondblclick：鼠标双击事件

<input type="button" value="ondblclick" ondblclick="func1()" >

<script>
	function func1() {
        alert('鼠标双击按钮显示此弹窗');
    }
</script>

onfocus：获取鼠标焦点事件

<input type="button" value="onfocus事件" onclick="func()" >

<script>
	function func() {
        alert('onfocus获取鼠标焦点');
    }
</script>

onblur：失去焦点事件

<input type="button" value="onblur事件" onclick="func()" >

<script>
	function func() {
        alert("失去焦点事件");
    }
</script>

onchange：改变域事，一般是结合下拉列表使用的，例如：经典的三级联动（省市区）

onsubmit：表单提交事件

<form action="user.php" method="post" onsubmit="return checkMessage()" >
    <input type="text" name="username" >
    <input type="password" name="password" >
    <input type="submit" value="onsubmit事件" >
</form>

<script>
	function checkMessage() {
       // 校验数据：用户名、密码、邮箱···
       return true;	// 数据全部合法错误信息返回true, 当返回值为true时, form表单才会提交
    }
</script>

onkeyup：键盘抬起事件
onkeydown：键盘按下事件
onmouseover：鼠标悬浮事件
onmouseout：鼠标移出事件

onmousemove：鼠标移动事件

<div onmouseover="funcIn()" onmouseout="funcOut" onmousemove="funcMove">

<script>
    function funcIn() {
        console.log('此时鼠标悬浮在div上');
    }
    function funcOut() {
        console.log('此时鼠标移走了');
    }
    function funcMove() {
        console.log('鼠标在div上移动了···');
    }
</script>

3.5.2 事件定义

<script>
	function tan() {
        alert('点击事件弹窗');
    }
</script>

<input type="button" value="点击事件" onclick="tan()" >

3.5.3 事件绑定（静态绑定）

概述：给 HTML 标签注册一个事件，绑定一个函数，这就叫：事件

好处：不管 JavaScript 代码（函数）写到哪里，都会被触发

弊端：会污染 HTML 源代码（源标签）

<input type="button" value="静态事件绑定" onclick="func()" >

<script>
	function func() {
        alert('测试 静态绑定 点击事件是否成功');
    }
</script>

3.5.4 事件派发（动态绑定）

概述：通过 DOM 对象，获取指定的事件源（就是 HTML 标签），然后动态给它注册一个事件，绑定一个函数

好处：不会污染 HTML 源代码（源标签）

弊端：JavaScript 代码（函数）写到事件源的上方，不会被触发，写到事件源的下发才会被触发

原因：代码从上往下执行，执行到这里按钮还是没有创建，所以无法触发事件
解决方案：通过 onload() 方法解决该问题，即：用 onload() 方法包裹要执行的事件
onload () 页面加载事件：当页面中的内容加载完毕后，才会执行

<!-- 通过 onload() 方法解决：写在标签上方 不会被触发问题 -->
<script>
	onload = function() {
        
        var b1 = document.getElementById("b1");
        b1.oncolck = function() {
        	alert("通过onload()方法解决后的静态绑定");
        }
        
    }
</script>

<input type="button" id="b1" value="动态绑定事件" >

<!-- 写到标签下方 才会被触发 -->
<script>
	// 1. 获取要添加事件的标签
    var b1 = document.getElementById('b1');
    // 2. 给该标签（按钮）注册一个时间，关联一个函数即可
    b1.onclick = function () {
        alert('测试 动态绑定 单击时间是否成功');
    }
</script>

3.5.5 事件监听

addEventListener

作用：同一个元素可以注册多个点击事件，按照注册顺序执行

/ 语法格式：
addEventListener('事件类型', function() {
    // 事件处理程序
}, 冒泡/捕获);

addEventListener('click', function () {
    alert('事件监听');
});

参数3 是boolean，不写默认值是 false，会执行冒泡，true 会执行捕获

<div></div>


<script>
	let div = querySelector('div');
    
    btn.addEventListener('click', function () {
        // 获取标签名
        console.log(event.target.nodeName);
        // 获取标签类名
        console.log(event.target.classList);
        // 标签文本内容
        console.log(event.target.innerHTML);
    });
</script>

3.5.6 事件冒泡

冒泡：从点击的元素开始，向上(父元素)查找元素, 是否有绑定事件，有会执行

<div class='grand'>
	<div class='father'>
    	<div class="son"></div>
    </div>
</div>


<script>
	grand.addEventListener('click', function() {
        alert('grand');
    }, false);
    father.addEventListener('click', function() {
        alert('father');
    }, false);
    son.addEventListener('click', function() {
        alert('son');
    }, false);
    
    // 会从子元素往父元素执行点击事件，这叫事件冒泡
</script>

3.5.7 事件捕获

捕获：从祖元素开始，向点击的元素进行查找元素, 是否有绑定事件，有会执行

<div class='grand'>
	<div class='father'>
    	<div class="son"></div>
    </div>
</div>


<script>
	grand.addEventListener('click', function() {
        alert('grand');
    }, true);
    father.addEventListener('click', function() {
        alert('father');
    }, true);
    son.addEventListener('click', function() {
        alert('son');
    }, true);
    
    // 会从祖元素往子元素执行点击事件，这叫事件捕获
</script>

3.5.8 事件委托

给父元素创建点击事件，可以委托给子元素

<div class="shortcut">
    <ul>
        <li><a href="#">我的订单</a></li>
        <li></li>
        <li><a href="#" class="arrow-down">我的品优购</a></li>
        <li></li>
        <li><a href="#">品优购会员</a></li>
        <li></li>
        <li><a href="#">企业采购</a></li>
        <li></li>
        <li><a href="#" class="arrow-down">关注品优购</a></li>
        <li></li>
        <li><a href="#" class="arrow-down">客户服务</a></li>
        <li></li>
        <li><a href="#" class="arrow-down">网站导航</a></li>
    </ul>
</div>

<script>
	// 1. 获取父元素
    let shortcut = document.querySelector('.shortcut');
    // 2. 给父元素绑定点击事件
    shortcut.addEventListener('click', function (event) {
        // 获取当前点击元素的标签名
        console.log(event.target.nodeName);
        
        // 选中a标签弹窗，注意：a 标签要大写
        event.target.nodeName == 'A' && alert('选中a标签');
    });
</script>

3.5.9 删除事件

removeEventListener

<!-- onclick 的删除事件 -->

<button>点击</button>

<script>
    let btn = document.querySelector('button');
    
    // onclick 创建点击事件
	btn.onclick = function () {
        alert('点击事件');
        // 删除点击事件
        btn.onclick = null;
    }
</script>

<!-- 事件监听的删除事件 -->

<button>点击</button>

<script>
    let btn = document.querySelector('button');
    
    // 事件监听 创建点击事件
	btn.addEventListener('click', fn);
    
    function fn () {
        alert(123);
        // 删除点击事件
        btn.removeEventListener('click', fn);
    }
</script>