假期已经学了10天，但是事情一直比较多，马上大三了，做你认为有意义的事！
这是js学习的最后一部分：
自定义对象：
在Js中，除了Array、Date、Number等内置对象外，开发者可以通过Js代码创建自己的对象。它也称为JSON对象。
自定义对象有三种创建方式：
网页示例：包括三个按钮，每个按钮点击以后会弹出三个alert(); 里面的话是用来测试的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo1_JSON对象</title>
<script type="text/javascript">
//1.采用直接量的方式创建对象
function f1() {
var student = {"name":"徐静", "age":20, "work":function(){alert("我爱学习");} };
alert(student.name);
alert(student.age);
student.work();
}
//2.采用内置构造器创建对象
function f2() {
var teacher = new Object();
teacher.name = "燕富成";
teacher.age = 21;
teacher.work = function() {
alert("我最帅");
}
alert(teacher.name);
alert(teacher.age);
teacher.work();
}
//3.采用自定义构造器创建对象
function Coder(name, age, work) {
this.name = name;
this.age = age;
//this指代当前对象，.job是给此对象增加job属性， =work是将参数work赋值给此属性
this.job = work;
}
function f3() {
var coder = new Coder("lisa", 20, function() {
alert("我想学jQuery");
});
alert(coder.name);
alert(coder.age);
coder.job();
}
</script>
</head>
<body>
<input type="button" value="按钮1" onclick="f1();">
<input type="button" value="按钮2" onclick="f2();">
<input type="button" value="按钮3" onclick="f3();">
</body>
</html>
其中自定义构造器会在工作中经常使用，它指明了该对象具有的属性，非常直观。
事件绑定
通过给标签绑定事件，可以在用户对网页进行操作的时候触发，动态显示网页。绑定事件的方法有两种：
1.直接定义：标签上直接定义，获取事件，需要在定义的函数里传入event参数，event是浏览器生成的，只需要调用即可。
2.后绑定事件：在页面加载之后调用window.onload 方法，获取元素之后，给元素绑定事件，这里浏览器自动传入event，直接函数接收。
网页示例：两个按钮，在控制台输出。Chrome浏览器按F12打开控制台。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo2_后绑定事件</title>
<script type="text/javascript">
//1.直接定义事件
function f1(e) {
console.log("aaa");
console.log(e);
}
//2.后绑定事件,浏览器自动传入event，直接接收就好
window.onload = function() {
var btn = document.getElementById("btn2");
btn.onclick = function(e) {
console.log("bbb");
console.log(e);
};
}
</script>
</head>
<body>
<input type="button" value="按钮1" onclick="f1(event);"/>
<input type="button" value="按钮2" id="btn2"/>
</body>
</html>JS的事件处理机制
当我点击一个按钮时，会由内向外的触发他的父类，爷爷类的事件，这叫做冒泡。
当我给带有图片的div加入单击事件以后，通过事件对象获取事件源，可以对该div内的所有标签绑定单击事件。
比如一个计算器，当它有很多个按钮的时候，我们不可能一个一个按钮去绑定单击事件，这时我们就可以通过给div绑定单击事件来解决这个问题。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo3_事件传播机制</title>
<style type="text/css">
div {
width: 500px;
border: 1px solid red;
padding: 30px;
}
p {
border: 1px solid red;
padding: 30px;
}
</style>
<script type="text/javascript">
function f1(event) {
alert("按钮");
//停止冒泡,为了兼容浏览器,需要判断
if(event.stopPropagation) {
event.stopPropagation();
}else {
event.cancelBubble = true;
}
}
//通过事件对象获取事件源
function f2(e) {
var obj = e.srcElement || e.target;
console.log(obj);
}
</script>
</head>
<body>
<div onclick="alert('div');">
<p onclick="alert('p');">
<input type="button" value="按钮" onclick="f1(event);"/>
</p>
</div>
<div onclick="f2(event);">
<a href="#">顶部</a>
<img src="../img/01.jpg"/>
<span>abc</span>
</div>
</body>
</html>由于不同的浏览器所给的event对象的方法也不一样，为了兼容浏览器，在停止冒泡和获取事件源的时候都要进行判断。
谢谢你看到这里！写作仓促，有疏漏之处还请评论指正，共同探讨进步！