第七次网页前端培训笔记(js的对象和事件）

1.对象

1.1对象的创建

JS 创建自定义对象，主要通过三种方式：字面量形式创建对象、通过new Object对象创建 、通过Object对象的create方法创建对象。

1. 字面量形式创建对象

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

2. 通过new Object创建

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

3. 通过Object对象的create方法创建

			var 对象名 = Object.create(null); // 创建空对象
			var 对象名 = Object.create(参考对象); // 以参考对象为模板，创建新的对象

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

1.序列化对象，将对象转为字符串。JSON.stringify(object);
2.反序列化，将一个Json字符串转换为对象。JSON.parse(jsonStr); 

	 	var obj = {
	 		uname:"zhangsan", // 字符串
	 		uage:18, // 数值
	 		islike:true, // 布尔值
	 		sayHello:function(){ // 函数
	 			console.log("Hello...");
	 		},
	 		cats:['大毛','喵喵'], // 数组
	 		dog:{ // 对象
	 			name:"张二狗",
	 			age:1
	 		}
	 	};
		console.log(obj);
		// 序列化对象，将对象转为字符串 JSON.stringify(object);
		var str = JSON.stringify(obj);
		console.log(str);
		// 反序列化，将一个Json字符串转换为对象。JSON.parse(jsonStr);
		var obj2 = JSON.parse(str);
		console.log(obj2);

1.3this

 this指的是，调用函数的那个对象。

        // 在函数中使用
		function test () {
			this.x = 1;
			console.log(this.x);
		}
		test(); // 调用者是window对象
		console.log(x); // 相当于定义在全局对象上的属性
		console.log(this);
		// 在对象中使用
		var o = {
			name : '张三',
			age : 20,
			sayHello : function () {
				console.log(this.name)
				console.log(this)
			}
		}
		o.sayHello(); // 调用者是o这个对象

1.4内置对象

             String
                ◦ charAt(idx)       返回指定位置处的字符
                ◦ indexOf(Chr)       返回指定子字符串的位置，从左到右。找不到返回-1
                ◦ substr(m,n)       返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾。
                ◦ substring(m,n)   返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾。
                ◦ toLowerCase()       将字符串中的字符全部转化成小写。
                ◦ toUpperCase()       将字符串中的字符全部转化成大写。
                ◦ length            属性，不是方法，返回字符串的长度。
            Math
                ◦ Math.random()       随机数 
                ◦ Math.ceil()        向上取整，大于最大整数
                ◦ Math.floor()        向小取整，小于最小整数String 
            Date
                 获取日期
                ◦ getFullYear()       年
                ◦ getMonth()       月
                ◦ getDate()           日
                ◦ getHours()       时
                ◦ getMinutes()       分
                ◦ getSeconds()       秒
                 设置日期
                ◦ setYear()
                ◦ setMonth()
                ◦ setDate()
                ◦ setHours()
                ◦ setMinutes()
                ◦ setSeconds()
                ◦ toLoacaleString()    转换成本地时间字符串
                说明：
                    1. getMonth()：得到的值：0~11（1月~12月）
                    2. setMonth()：设置值时0~11
                    3. toLocaleString()：可根据本地时间把 Date 对象转换为字符串，并返回结果。

2.事件 

2.1事件介绍 

事件 (Event) 是 JavaScript 应用跳动的心脏 ，进行交互，使网页动起来。当我们与浏览器中 Web 页面进行某些类型 的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。 事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。 通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。

2.2事件流和事件模型

我们的事件最后都有一个特定的事件源，暂且将事件源看做是HTML的某个元素，那么当一个HTML元素产生一个事 件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会受到该事件，这个传播过程称为 DOM事件流。

事件顺序有两种类型：事件捕获 和 事件冒泡。

冒泡和捕获其实都是事件流的不同表现，这两者的产生是因为IE和Netscape两个大公司完全不同的事件流概念产生 的。（事件流：是指页面接受事件的顺序）IE的事件流是事件冒泡，Netscape的事件流是事件捕获流。 

       1. 事件冒泡（从小到大）
            事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（文档）

       2.事件捕获（从大到小）
            事件开始时由document对象接受，然后逐级向下传播到具体的节点

2.3 事件处理程序

响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头
            1. HTML事件处理程序

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

            2. DOM 0级事件处理程序
                将一个函数赋值给一个事件处理程序属性
                只能为同一个元素的同一个事件设定一个事件程序（覆盖）

	 		// 通过id属性值获取按钮对象
	 		var btn = document.getElementById("btn");
	 		console.log(btn);
	 		// 给指定元素绑定点击事件
	 		btn.onclick = function(){
	 			console.log("DOM 0级事件处理程序...");
	 		}
	 		btn.onclick = function(){
	 			console.log("test...");
	 		}
	 	}

              3. DOM 2级事件处理程序
                addEventListener()  和  removeEventListener()
                有三个参数：
                    参数1：事件名
                    参数2：处理事件的函数
                    参数3：事件冒泡（false）或捕获（true)

可以为同一个元素的同一个事件设定多个事件程序    document.getElementById("id属性值"); 通过id属性值获取元素对象

		// DOM 2级事件
		var btn2 = document.getElementById("btn2");
		// 给按钮绑定事件监听
		btn2.addEventListener('click',function(){
			console.log("DOM 2级事件...");
		});
		btn2.addEventListener('click',fn);
		function fn(){
			console.log("按钮被点击了...");
		}
		// 移除事件
		btn2.removeEventListener("click",fn);	

2.4常用事件

 常用事件：
            onload：当页面或图像加载完后立即触发
            onblur：元素失去焦点
            onfocus：元素获得焦点
            onclick：鼠标点击某个对象
            onchange：用户改变域的内容
            onmouseover：鼠标移动到某个元素上
            onmouseout：鼠标从某个元素上离开
            onkeyup：某个键盘的键被松开
            onkeydown：某个键盘的键被按下

	 	// onload：当页面或图像加载完后立即触发
		window.onload = function(){
			console.log("页面加载完毕...");
		}
		var uname = document.getElementById("uname");
		// onblur：元素失去焦点
		uname.onblur = function(){
			console.log("文本框失去焦点...");
		}
		// onfocus：元素获得焦点
		uname.onfocus = function(){
			console.log("文本框获得焦点...");
		}
		// onclick：鼠标点击某个对象
		function clickBtn(){
			console.log("按钮被点击了...");
		}
		// onchange：用户改变域的内容
		document.getElementById("city").onchange = function(){
			console.log("下拉框的值改变了...");
		}
		
		var div1 = document.getElementById("div1");
		// onmouseover：鼠标移动到某个元素上
		div1.onmouseover = function(){
			console.log("鼠标悬停...");
		}
		// onmouseout：鼠标从某个元素上离开
		div1.onmouseout = function(){
			console.log("鼠标移开...");
		}
		
		// 	onkeyup：某个键盘的键被松开
		uname.onkeydown = function(){
			console.log("按键按下...");
		}
		// 	onkeydown：某个键盘的键被按下
		uname.onkeyup = function(){
			console.log("按键弹起...");
		}

3.学习资料

b站学习视频https://www.bilibili.com/video/BV1sf4y1k7dr?p=24 文字版资料https://www.runoob.com/js/js-obj-intro.html