第七次网页前端培训笔记（JS P24-26）

Aurora_Cherish

于 2022-02-10 16:42:49 发布

阅读量355

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/Aurora_Cherish/article/details/122858953

版权

3、基础语法

3.10 内置对象

3.10.1 String

3.10.2 Math

3.10.3 Date

月：从0到11，所以要记得加1

3.11 对象

对象，就是一种无序的数据集合，有若干个“键值对”构成，这种“键值对”的格式称为JSON格式

3.11.1 对象的创建

字面量形式创建对象

var 对象名 = {}; // 空对象
var 对象名 = {
    键:值,
    键:值,
    ...
};

通过new Object创建

var 对象名 = new Object();// 空对象

通过Object对象的create方法创建

var 对象名 = Object.create(null);// 空对象
var 对象名 = Object.create(对象);

对象的操作

获取对象的属性（不存在的属性，显示undefined）
设置对象的属性（存在的属性，修改属性值；不存在的属性，添加属性值）

3.11.2 对象的序列化和反序列化

3.11.3 this（谁调用函数，this指代谁）

直接调用函数，this代表的全局的window对象
调用对象中的函数，this代表的是对象本身

4、JS事件

4.1 作用

4.2 事件中的几个名词

<!-- onload事件：当文档（HTML页面）加载完毕后执行 -->
	<body onload="loadWindow()">
	</body>
	
	<script type="text/javascript">
	
		function loadWindow() {
			console.log("文档加载完毕...");
		}
		
	</script>

4.3 事件类型

事件类型为：鼠标事件、键盘事件、HTML事件

几个常用事件：onclick、onblur、onfocus、onchange、onmouseover、onmouseout、onkeyup、onkeydown

4.4 事件流和事件模型

事件在元素节点和根节点之间按特定的顺序传播，这个传播过程称为DOM事件流

事件顺序有两种类型：事件捕获（IE的事件流，由具体到不具体）和事件冒泡（Netscape的事件流，由文档到具体）

DOM事件流：

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段

4.5 事件处理程序（事件绑定方式）

4.5.1 HTML事件处理程序

<button type="button" onclick="alert('Hello')">按钮1</button>

4.5.2 DOM0级事件处理程序

先获取事件源，在给事件源绑定事件，不能同时给元素绑定相同事件多次

/* DOM0级事件处理程序 */
<button type="button" id="btn2">按钮2</button>

/* DOM0级事件 */
// 事件源：获取事件源
var btn2 = document.getElementById("btn2");
console.log(btn2);
// 事件类型：给事件源绑定指定事件     事件函数：事件触发后要执行的代码
btn2.onclick = function() {
	console.log("按钮2被点击了...");
}

4.5.3 DOM2级事件处理程序

/* DOM2级事件处理程序 */
<button type="button" id="btn3">按钮3</button>

/* DOM2级事件 */
// 事件源：获取事件源（按钮）
var btn3 = document.getElementById("btn3");
// 添加事件监听
btn3.addEventListener("click",function() {
	console.log("按钮3被点击了...");
},false);
		
btn3.addEventListener("mouseout",btnFunction,false);
function btnFunction() {
	console.log("鼠标离开按钮3了...");
}
		
btn3.addEventListener("click",function() {
	console.log("按钮3被点击了2...");
},false);

注：通过id属性值获取节点对象 document.getElementById("id属性值");

Aurora_Cherish

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第七次网页前端培训笔记（JS P24-26）

3、基础语法3.10 内置对象3.10.1 String3.10.2 Math3.10.3 Date月：从0到11，所以要记得加13.11 对象对象，就是一种无序的数据集合，有若干个“键值对”构成，这种“键值对”的格式称为JSON格式3.11.1 对象的创建字面量形式创建对象 var 对象名 = {}; // 空对象var 对象名 = { 键:值, 键:值, ...}; 通过new Object创建 var .
复制链接

扫一扫