前言
本文记录我学习JavaScript中对象和事件的知识。
1.内置对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第七次培训</title>
</head>
<body>
<script type="text/javascript">
var str ="Hello World";
console.log(str);
console.log(str.substring(3));
console.log(str.substring(3,5));
console.log(str.toLocaleLowerCase());
console.log(str.toLocaleUpperCase());
console.log(Math.random());
console.log(Math.ceil(1.2));
console.log(Math.floor(1.2));
var date=new Date();
console.log(date);
console.log(date.getFullYear());
console.log(date.getMonth()+1);
console.log(date.getDate());
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
var mstr=date.getMinutes()<10 ? "0"+date.getMinutes():date.getMinutes();
var dateStr=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+mstr;
console.log(dateStr)
console.log(date.toLocaleString())
</script>
</body>
</html>
1.1.String
1.2.Math
1.3.Date
说明:
即用getMonth时要+1
2.对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第七次培训2</title>
</head>
<body>
<script type="text/javascript">
var obj1={};
console.log(obj1);
var obj2={
name:"zhangsan",
age:18
};
console.log(obj2);
var obj3=new Object();
console.log(obj3);
var obj4=Object.create(null);
console.log(obj4);
var obj5=Object.create(obj2);
console.log(obj5);
console.log(obj1.name);
console.log(obj2.name);
console.log(obj3.name);
console.log(obj4.name);
console.log(obj5.name);
obj2.age=20;
console.log(obj2);
obj2.upwd="123456";
console.log(obj2);
console.log("................");
var obj={
name:"zhangsan",
age:18
};
obj.name="lisi"
console.log(obj);
var objToStr=JSON.stringify(obj);
console.log(objToStr);
console.log("................");
var jsonStr='{"name":"zhangsan","pwd":"123456","age":18}';
jsonStr.name="lisi"
console.log(jsonStr);
var strToObject=JSON.parse(jsonStr);
console.log(strToObject);
function test(){
console.log("这是一个方法...");
console.log(this);
}
test();
var o ={
name:"zhangsan",
age:18,
sayHello:function(){
console.log("你好呀！");
console.log(this);
}
}
o.sayHello();
</script>
</body>
</html>
)对象(object)是JavaScript的核心概念，也是最重要的数据类型。JavaScript 的所有数据都可以被视为对象。JavaScript提供多个内建对象，比如String、Date、Array等等。对象是带有属性和方法的特殊数据类型
简单说，所谓对象，就是一种无序的数据集合，由若干个""键值对”(key-value)构成。通过JavaScript我们可以创建自己的对象。JavaScript对象满足的这种""键值对""的格式我们称为JSON格式，以后会见得非常多
2.1.对象的创建
JS创建目定义对象，主要通过三种方式∶字面量形式创建对象、通过new Object对象创建、通过 Object对象的create方法创建对象。
1.字面量形式创建
2.new Object创建
3.通过object对象的create方法创建
var 对象名=object.create( null);//空对象
var对象名=object.create(对象);
2.2.对象的操作
1.获取对象的属性（如果属性不存在则获取null）
对象名.属性名；
2.设置对象的属性
对象名.属性名 = 值；（如果存在则修改属性值，如果属性不存在则添加属性值）
2.3.对象的序列化和反序列化
序列化，即将JS对象序列化为字符串;
反序列化，即将字符串反序列化为JS对象JS中通过调用JSON方法，可以将对象序列化成字符串，也可以将字符串反序列化成对象。
2.4.this
this是JavaScript语言的一个关键字。
它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。
谁调用函数，this指代谁
1.在函数中使用this
在函数中使用this属于全局性调用，代表全局对象，通过window对象来访问。
2.在对象中使用this
this代表的是对象本身。
3.事件
注：Json中代码是顺序执行的，所以建议Script写在后面
事件(Event)是JavaScript应用跳动的心脏，进行交互，使网页动起来。当我们与浏览器中Web页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是web浏览器中发生的事情，比如说某个Web页面加载完成，或者是用户滚动窗口或改变窗口大小。
通过使用JavaScript，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。
3.1.作用
3.2.事件中的名词
例如：
当我们用户在页面中进行的点击动作，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称，即: click、mousemove、load等都是事件名称，具体的执行代码处理，响应某个事件的函数。
3.3.事件类型
常用事件：
3.4.事件流和事件模型
我们的事件最后都有一个特定的事件源，暂且将事件源看做是HTML的某个元素，那么当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会受到该事件，这个传播过程称为DOM事件流。
事件顺序有两种类型:事件捕获和事件冒泡。
冒泡和捕获其实都是事件流的不同表现，这两者的产生是因为IE和Netscape两个大公司完全不同的事件流概念产生的。(事件流:是指页面接受事件的顺序)IE的事件流是事件冒泡，Netscape 的事件流是事件捕获流。
3.4.1.事件冒泡
IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点(文档)。例如下面的:
也就是说，click事件首先在div元素上发生，而这个元素就是我们单击的元素。然后，click事件沿DOM树向上传播，在每一级节点上都会发生，直到传播到document 对象
所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别
3.4.2.事件捕获
3.4.3.DOM事件流
"DOM2级事件"规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获阶段，为截获事件提供了机会。然后是实际的目标接收到事件，最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
3.5.事件处理程序
事件就是用户或浏览器自身执行的某种动作。例如click、load和mouseover都是事件的名字，而响应某个事件的函数就叫做事件处理程序（或事件侦听器)。事件处理程序的名字以"on"开头，因此click事件的事件处理程序就是 onclick，为事件指定处理程序的方式有好几种。
注：通过id属性值获取节点对象：document.getElementById("id属性值");
3.5.1.HTML事件处理程序
某个元素支持的每种事件，都可以用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码:
<input type="button" value="Press me" onclick="alert ( ' thanks' );"/>
缺点：耦合度较高
3.5.2.DOM0级事件处理程序
通过JavaScript 指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种方式被所有现代浏览器所支持。例如:
<body>
<button id="myBtn">按钮</ button><script type="text / javascript">
var btn = document. getElementById( ' myBtn ' );btn.onclick = function(){
console. log ( 'you click a button ' );
}
</script></ body>
以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。而且，只能为同一个元素的同一个事件设定一个处理程序（覆盖)，也可以通过删除DOMo级方法指定的事件处理程序，只要将属性值设为null即可:
btn.onclick = null;
注：要先获取事件源，再给事件源判定事件，不能同时给元素绑定相同事件多次。
3.5.3.DOM2级事件处理程序
"DOM2级事件""定义了两个方法，用于处理指定和删除事件处理程序的操作: addEventListener()和
removeEventListener()。所有 DOM节点都包含这两个方法，并且他们都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，则表示在捕获阶段调用事件处理程序;如果是false则表示在冒泡阶段调用事件处理程序。
绑定：事件源.addEventListener("事件类型”,执行函数，true)
总结
本次笔记主要记录了内置对象，对象，和JS事件的相关知识
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
