这是我参与 8 月更文挑战的第 29 天，活动详情查看： 8月更文挑战

感激相遇你好我是阿ken

作者：请叫我阿ken
链接：juejin.cn/user/109118…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

🌊🌈关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。

🌊🌈关于内容：

6.4_事件基础

在获取到元素后，如果需要为元素添加交互行为，这就需要用到事件来实现。

例如，当鼠标指针经过导航栏中的某一项时，自动展开二级菜单，或者在阅读文章时，选中文本后自动弹出分享、复制等选项。

6.4.1_事件概述

在开发中，JavaScript 帮助开发者创建带有交互效果的页面，是依靠事件来实观的。

事件是指可以被 JavaScript 侦测到的行为，是一种 " 触发-响应 " 的机制。

这些行为指的就是页面的加载、鼠标单击页面、鼠标指针滑过某个区域等具体的动作，它对实现网页的交互效果起着重要的作用。

6.4.2_事件三要素

在学习事件时，我们需要对一些非常基本又相当重要的概念有一定的了解。 事件由事件源、事件类型和事件处理程序这 3 部分组成，又称为事件三要素，具体解释如下。

(1) 事件源: 触发事件的元素。

(2) 事件类型: 如 click 单击事件。

(3) 事件处理程序: 事件触发后要执行的代码 ( 函数形式 )，也称事件处理函数。

以上三要素可以简单理解为 " 谁触发了事件 " " 触发了什么事件 " " 触发事件以后要做什么 " 。

在开发中，为了让元素在触发事件时执行特定的代码，需要为元素注册事件，绑定事件处理函数。具体步骤是，首先获取元素，其次注册事件，最后编写事件处理代码。

案例：演示事件的使用 —— 为按钮绑定单击事件，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>

<button id="btn">单击</button>

<script>

    // 第1步:获取事件源
	var btn = document.getElementById('btn');
	 
	// 第2步:注册事件btn.onclick
	btn.onclick = function() {
		// 第3步:添加事件处理程序(采取函数赋值形式)
		alert('弹出');
	}
	
</script>

</body>
</html>

在这里插入图片描述

上述代码中，定义了一个 id 为 btn 的 < button>标签。
通过 getElementById() 的方式获取事件源 btn 。
给事件源 btn 注册事件，语法为 " btn.on 事件类型 "，事件类型 click 表示单击事件，这步操作实际上是为 btn 的 onclick 属性赋值一个函数，这个函数就是事件中处理程序。

通过浏览器打开上述案例代码，使用鼠标单击页面中的按钮，就会弹出个警告框，说明页面中的按钮已经绑定了单击事件。在事件处理函数中，我们可以编写其他想要在事件触发时执行的代码。另外，事件类型除了 click，还有很多其他的类型，具体会在后面的章节进行详细讲解。

6.5_操作元素

在 Javascript 中，DOM 操作可以改变网页内容、结构和样式。

接下来我们将会讲解如何利用 DOM 操作元素的对象属性，改变元素的内容、属性和样式。

6.5.1_操作元素内容

操作元素内容的常用属性：

属性	说明
element.innerHTML	设置或返回元素开始和结束标签之间的 HTML，包括 HTML 标签，同时保留空格和换行
element.innerText	设置或返回元素的文本内容，在返回的时候会去除 HTML 标签和多余的空格、换行，在设置的时候会进行特殊字符转义
element.textContent	设置或者返回指定节点的文本内容，同时保留空格和换行

上述表中的属性在使用时有一定的区别，innerHTML 在使用时会保持编写的格式以及标签样式；而 innerTest 则是去掉所有格式以及标签的纯文本内容；textContent 属性在去掉标签后会保留文本格式。

案例：分别利用 innerHTML、innerText、textContent 属性在控制台输出一段 HTML 文本，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>

<div id="box">
	
	The first parapraph...
	<p>
		The second Paragraph...
		<a href="#">third</a>
	</p>
	
</div>

</body>
</html>

6.5.2_操作元素属性

在 DOM 中，HTML 属性操作是指使用 JavaScript 来操作一个元素的 HTML 属性。一个元素包含很多的属性，例如，对于一个 img 图片元素来说，我们可以操作它的 src、title 属性等；或者对于 input 元素来说，我们可以操作它的 disabled 、 checked 、 selected 属性等。

案例：如何操作常用元素属性及表单元素属性。

1. img 元素的属性操作

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>

<button id="flower">鲜花</button>
<button id="grass">四叶草</button><br>
<img src="#" alt="" title="四叶草">

<script>
	
	// 1.获取元素
	var flower = document.getElementById('flower');
	var grass = document.getElementById('grass');
	var img = document.getElementById('img');
	
	// 2.注册事件处理程序
	flower.onclick = function() {
		img.src = '#';
		img.title = '鲜花';
	}
	
	grass.onclick = function() {
		img.src = '#';
		img.title = '四叶草';
	}
	
</script>

</body>
</html>

上述代码中，通过 querySelector() 方法获取元素。
为 flower 和 grass 事件源添加 onclick 事件。在处理程序中，通过 " 元素对象.属性名 " 来获取属性的值，通 " 元素对象.属性名 = 值 " 的方式设置图片的 src 和 title 属性。

2. 表单 input 元素的属性操作

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>

<button>按钮</button>
<input type="text" value="输入内容" />

<script>
	
	// 1.获取元素
	var btn = document.querySelector('button');
	var input = document.querySelector('input');
	
	// 2.注册事件处理程序
	btn.onclick = function() {
		input.value = '被点击了!'; // 通过value来修改表单里面的值
		this.disabled = true; // this指向的是时间函数的调用者btn
	}
	
</script>

</body>
</html>

在这里插入图片描述
点击一下 " 按钮 "：

上述代码中，通过querySelector() 方法获取元素。
为 btn 添加 onclick 事件。在处理程序中，通过 " 元素对象.属性名 = 值 " 的方式设置 input 文本框的 disabled 和 value 属性。最后结果为，当单击按钮后，input 的文本内容变为 ” 被点击了! " 。

6.5.4_操作元素样式

操作元素样式有两种方式，一种是操作 style 属性，另一种是操作 className 属性。下面我们分别进行讲解。

1. 操作style属性

除了前面讲解的元素内容和属性外，对于元素对象的样式，可以直接通过 " 元素对象style. 样式属性名 " 的方式操作。样式属性名对应 CSS 样式名，但需要去掉 CSS 样式名里的半字线 " - " ，并将半字线后面的英文的首字母大写。
例如，设置字体大小的样式名 font-size，对应的样式属性名为 fontSize。

常用 style 属性中 CSS 样式名称：

名称	说明
background	设置或返同元素的背景属性
backgroundColor	设置或返回元素的背景色
display	设置或返同元素的显示类型
fontSize	设置或返回元素的字体大小
height	设置或返回元素的高度
left	设置或返回定位元素的左部位置
listStyleType	设置或返回列表项标记的类型
overflow	设置或返回如何处理呈现在元素框外面的内容
textAlign	设置或返回文本的水平对齐方式.
textDecoration	设置或返回文本的修饰
textIndent	设置成返回文本第一行的缩进
transform	向元素应用2D或3D转换

案例：如何对元素的样式进行添加，

<body>

<div id="box"></div>

<script>
	
	var ele = document.querySelector('#box');
	ele.style.width = '100px';
	ele.style.height = '100px';
	ele.style.transform = 'rotate(7deg)';
	
</script>

</body>

上述第 4 ~ 6 行代码用于为获取的 ele 元素对象添加样式，其效果相当于在 CSS 中添加以下样式。

	#box {
		width: 100px;
		height: 100px;
		transform: rotate(7deg);
	}

2. 操作 className 属性

在开发中，如果样式修改较多，可以采取操作类名的方式更改元素样式，语法为 " 元素对象.className " 访问 className 属性的值表示获取元素的类名，为 className 属性赋值表示更改元素类名。如果元素有多个类名，在 className 中以空格分隔。

案例：如何使用 className 更改元素的样式。

(1) 编写 html 结构代码，具体示例如下。

<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<body>
<div class="first">文本</div>
</body>

在这里插入图片描述

上述代码中，第 9 行代码给 div 元素添加 first 类，并在 style 中设置了 first 的样式。

(2) 单击 div 元素更改元素的样式，示例代码如下。

<script>
var test = document.querySelector('div');
test.onclick = function() {
this.className = 'change';
};
</script>

上述代码中，第 2 行代码获取 div 元素存储在 test 对象中。第 3 ~ 5 行代码为 text 对象添加 onclick 单击事件，第 4 行执行事件处理程序使用 thisclassName 给 test 对象设置 change 类名，其中 this 指的是 test 对象。

(3) 在 style 中添加 change 类，样式代码如下。

.change {
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}

在这里插入图片描述

(4) 单击 div 盒子，浏览器预览效果如下图所示。

执行上述代码之后，会直接把原先的类名 first 修改为 change ，如果想要保留原先的类名，可以采取多类名选择器的方式，修收第 (2) 步的第 4 行代码，示例代码如下。

this.className = 'first change';

修改之后，在控制台可查看到 div 元素的类已经修改成了 < div class = " first change "> 文本< /div>，保留了之前的类名。

6.5.5_[案例]显示隐藏文本框内容

案例分析

本案例需要为一个文本框添加提示文本。当单击文本框时，里面的默认提示文字会隐藏，鼠标指针离开文本框，里面的文字会显示出来。

具体实现步骤如下：

(1) 为元素绑定获取文本框焦点事件 onfocus 和失去焦点事件 onblur。

(2) 如果获取焦点时，需要判断表单里面的内容是否为默认文字；如果是默认文字，就清空表单内容。

(3) 如果失去焦点，需要判断表单内容是否为空；如果为空，则表单里边的内容改为默认文字。

代码实现

编写 HTML 结构，完成页面布局，示例代码如下。

<body>
<input type="text" value="手机" style="color:999">
</body>

上述代码中，第 2 行代码给 input 文本框设置了 value 值，默认内容为 " 手机 " ，字体颜色为 " #999 " 。

编写实现获取焦点时效果的 JavaScript 代码，示例代码如下。

<script>

var text = document.querySelector('input'); // 获取元素
text.onfocus = function() {  // 注册获得焦点事件onfocus
if (this.value === '手机') {
this.value = ' ';
this.style.color  = '#333';
};
</script>

上述代码中，第 2 行代码获取 input 元素并存储在 text 对象中。第 3 ~ 8 行代码给 text 元素注册 onfocus 获得焦点事件。其中，第 4 ~ 7 行使用 if 判断语句，如果文本框的值为默认的手机，则清空表单内容，否则改变文本框里面的文字颜色。

接下来我们继续编写实现失去焦点时效果的JavaScript代码，示例代码如下。

text.onblur = function() { // 注册失去焦点事件onblur
if (this.value === '') {
this.value = '手机';
}
// 失去焦点需要把文本框里面的文字颜色变浅色
this.style.color = '#999';
};

上述代码用来给 text 元素注册 onblur 失去焦点事件。其中，第 2 ~ 4 行代码使用 if 语句判断如果文本框的值为空，则表单里边的内容改为默认文字 " 手机 " 。然后用第 6 行代码改变文本框里面的文字颜色。

今日入门学习暂时告一段落
Peace

🌊🌈往期回顾：

【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十八）
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十九）
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（二十）

🌊🌈关于后记：

感谢阅读，希望能对你有所帮助博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我感谢每一位小伙伴不吝赐教

原创不易，「点赞」+「关注」 谢谢支持❤

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（十四）

🌊🌈关于前言：

🌊🌈关于内容：

6.4_事件基础

6.4.1_事件概述

6.4.2_事件三要素

6.5_操作元素

6.5.1_操作元素内容

6.5.2_操作元素属性

1. img 元素的属性操作

2. 表单 input 元素的属性操作

6.5.4_操作元素样式

1. 操作style属性

2. 操作 className 属性

6.5.5_[案例]显示隐藏文本框内容

🌊🌈往期回顾：

🌊🌈关于后记：