- 事件
- Event 对象
- 事件冒泡
- 事件委派
- 事件传播
- JSON简介
- ES6 部分特性介绍
w3school HTML 教程 w3school HTML 标签参考手册 MDN HTML 教程 MDN HTML 元素参考 w3school CSS 教程 w3school CSS 参考手册 MDN CSS 教程 MDN CSS 参考手册 w3school JS 教程 MDN JS 教程 阮一峰 JavaScript 教程 阮一峰 ECMAScript 6 教程 在线文档用于查阅参考资料
黑马程序员web前端开发HTML与CSS入门教程 尚硅谷Web前端零基础入门HTML5+CSS3基础教程 黑马程序员JavaScript入门教程 尚硅谷JavaScript基础入门完整版 在线视频学习资源用来辅助学习，帮助理解不太清楚的知识点
HTML 事件可以是浏览器或用户做的某些事情，如页面加载完成；按钮被点击；某个键盘按键被按下；表单输入字段被修改等等 通过 JavaScript 代码，可以向 HTML 元素或页面添加事件处理方法，即监听相应的事件，当且仅当相应的事件发生时才会执行相应的方法
事件需要绑定到相应的HTML 元素上才能够被响应 通常需要与元素的事件属性绑定，事件属性一般以 on 开头，如onclick等
以下是几种常见的绑定事件处理方法的方式，后续我们会分别进行介绍：
// HTML on事件属性添加事件处理方法
<button onclick="handleConfirm">确定</button>
// JS on事件属性添加事件处理方法
<button id="btn">确定</button>
<script>
document.getElementById('btn').onclick = function () {};
</script>
// JS addEventListener方法添加事件处理方法
<button id="btn">确定</button>
<script>
document.getElementById('btn').addEventListener('click', function () {}, false);
</script>- HTML 代码中 通过事件属性中绑定
- JS 代码中 通过 DOM 获取元素的事件属性绑定
处理方法中的 this 指向的是绑定事件的 DOM 对象
- JS 代码中 通过 DOM 获取元素的 addEventListener() 方法为元素绑定事件处理函数
可以绑定多个处理函数，执行顺序为绑定顺序 第一个参数为事件名，不需要前缀 "on" 第二个参数为回调函数 第三个参数为布尔值，表示是否在捕获阶段触发事件，默认 false，一般不需要指定 处理方法中 this 指向绑定事件的对象 可以使用 removeEventListener()方法为元素取消绑定事件处理方法
| onclick | 鼠标点击事件 |
|---|---|
| onmouseover | 鼠标移入事件（包括元素及其后代元素） |
| onmouseout | 鼠标移出事件（包括元素及其后代元素） |
| onkeydown | 键盘按下事件 |
| onload | 页面加载完成事件 |
更多事件可参考 链接
可以根据需要，在JS中主动触发相应的事件
<button id="btn">确定</button>
<script>
document.getElementById('btn').click();
</script>当事件的响应函数被触发时，浏览器会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件的所有信息 不同事件可能会有不同类型的事件对象原型，可参考 链接 最后一列
- Event 也为其他事件原型所继承
- MouseEvent 与鼠标有关的事件
- KeyboardEvent 与键盘有关的事件
- WheelEvent 与鼠标滚轮有关的事件
其他更多事件对象可参考 链接
事件冒泡即事件向上传导，当元素上的事件被触发时，其祖先元素的事件也会被触发 在开发中大部分情况下冒泡是有用的，如果不希望事件冒泡可以通过事件对象来取消冒泡
- 设置传入 Event 对象 cancelBubble 属性 为 true
- 令事件绑定处理方法的返回值为 false
将事件统一绑定给元素共同的祖先元素，这样后代元素的事件触发时，会一直冒泡到祖先元素，通过祖先函数的响应函数来处理事件 事件委派利用了事件冒泡，通过委派可以减少事件绑定次数，提高程序性能 判断触发的事件可以利用 target 属性，它与 currentTarget 属性区别在于，target 是对触发事件的元素的引用，而 currentTarget 是对绑定了事件处理方法的元素的引用
关于事件的传播，微软和网景公司有着不同理解 微软公司认为事件应由内向外传播，即事件触发时，先触发当前元素上事件，再向祖先元素传播。事件应该在冒泡阶段执行 网景公司认为事件应由外向内传播，即事件触发时，先触发当前元素最外层祖先元素的事件，然后向内传播给后代元素。事件应该在冒泡阶段执行 W3C 综合了两个公司的方案，将事件的传播分为了三分阶段：
- 捕获阶段：进行事件捕获，默认不会触发
- 目标阶段：捕获到目标事件，在目标元素上触发事件
- 冒泡阶段
如果希望在捕获阶段触发事件，可以在 addEventListener 中将第三个参数设为 true
JSON 即 JavaScript Object Notation ，一种存储和交换数据的语法，是一种轻量级的数据交换格式，能够轻易地转换为大多数编程语言包括 JavaScript 在内的对象从而可被读取数据 参见 JSON 官网
以下是一个JSON对象的示例
{
"pages": ["pages/index/index", "pages/logs/index"],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
}JSON 数据需写为 键值对 的形式 键名与键值需用冒号分隔 键名必须为字符串且需加双引号 键值可为字符串、数字、对象（JSON 对象）、数组、布尔值、null 字符串必须加且只能加双引号 数字必须是整数或浮点数 布尔值即 true 或 false
- JSON.parse()
将 JSON 字符串转换为 JS 对象(包括数组)
- JSON.stringify()
把 JS 对象转换为 JSON 字符串
可以利用如下 库 的JS文件兼容部分老的浏览器的使用，大多数流行的浏览器均支持 JSON
ES6 既是一个历史名词，可以指代 ES2015 标准；也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等 大多数现代浏览器都支持 ES6 标准 平时开发时可以放心使用 ES6 标准
关于 ES6， 可以参考 ECMAScript 6 教程
之前我们已经提到过 let 与 const 可以像 var 一样声明变量，并且说明使用 let 和 const 比 var 更好
- let 可以声明变量，const 可以声明常量
- 两者均具有块状作用域
- 两者均不允许变量重复声明
- 两者均不存在变量提升情况
特别的，const声明的对象与数组，可以修改其各项内容
var x = 10;
// 此处 x 为 10
{
var x = 6;
// 此处 x 为 6
}
// 此处 x 为 6
let x = 10;
// 此处 x 为 10
{
let x = 6;
// 此处 x 为 6
}
// 此处 x 为 10x ** y 的结果与 Math.pow(x,y) 相同，相当于求x的y次幂的值
x **= 3 等价于 x = x ** 3
相当于函数初始值的概念
function f(x, y = 10) {
// y is 10 if not passed or undefined
return x + y;
}
f(5); // 将返回 15
// 变量解构赋值默认参数：参考 *12变量解构赋值* 内容
function connect({host="baidu.com", usename, password, port}){}
connect({
username: "root",
passowrd: "root",
port: 80
});一般赋初始值形参书写靠后
可以使用 ()=>{} 声名函数 特点
- this 是静态的，this 始终指向函数声名时所在作用域下的 this 值，无论用 call()、apply() 也不会改变
- 箭头函数不能作为构造函数
- 不能使用 arguments 变量
简写
- 当形参只有一个时，可省略小括号
- 当代码体只有一条语句，可省略花括号；此时 return 语句必须省略，函数返回值即此条语句执行结果
let f = (a, b) => {
a *= 2;
b *= 2;
return a + b;
};
let g = a => a ** a;使用
- 适合于 this 无关的回调，如定时器、数组方法回调，可以简化函数书写
let ad = document.getElementById("ad");
ad.addEventListener("click", function(){
setTimeout(()=>{
console.log(this); // 打印 HTML 元素对象
this.style.background = "pink";
}, 1000);
});数组解构
let arr = ["小沈阳", "刘能", "赵四"];
let [xiao, liu, zhao] = arr;
console.log(xiao);
console.log(liu);
console.log(zhao);对象解构
let zhao = {
name: "赵四",
age: 0,
xiaopin: function(){
console.log("我可以演小品");
}
};
let {xiaopin} = zhao;
xiaopin();又称反引号字符串 允许使用反引号```声明字符串 反引号字符串允许换行，允许变量拼接：用 ${} 格式引用变量
// 换行符
let str = `<ul>
<li></li>
<li></li>
</ul>`
// 变量拼接
let name = "狗";
let str = `${name}是我最喜欢的动物`;
console.log(str); // 狗是我最喜欢的动物允许在对象的大括号里面，直接写入变量名和函数名，作为对象的属性和方法
- 属性变量可以直接用变量名声名
- 对象方法可以省去 function 声名
// ES5
let name = "school";
let change = function(){
console.log("你被退学了");
}
let school = {
name: name,
change: change,
improve: function(){
console.log("来这里卷");
}
}
// ES6
let name = "school";
let change = function(){
console.log("你被退学了");
}
let school = {
name,
change,
improve(){
console.log("来这里卷");
}
}将数组或对象转换为逗号分隔的参数序列
let animal = ["小猫", "小狗"];
let people = ["张三", "李四"];
let divs = [];
// 数组合并
let arr1 = [...animal, ...people];
console.log(arr1); // 打印 ["小猫", "小狗", "张三", "李四"]
// 数组克隆
let arr2 = [...animal];
console.log(arr2); // 打印 ["小猫", "小狗"]
// 将伪数组转换为真正数组
let divs = doucments.querySelectorAll("div");
const divArr = [...divs];
console.log(divArr); // 打印 [...]
// 对象属性分离
let params = {
url: '/login/admin',
'Content-Type', 'application/json',
};
let request = (params) => {
wx.request({
...params,
success: function () {}
});
};用于获取函数的实参，旨在替代 arguments
- arguments 是一个类数组对象，没有数组的方法
- rest 参数是一个数组对象
- rest 参数必须放最后
function date(...args){
console.log(args);
}当然，还有很多 ES6 特性，每年都会有令人激动的新的特性出现，这里也不做更多介绍了，大家有兴趣的可以查阅相关资料进一步了解
至此，我们的为之冬令营前端部分就到这里告一段落了，希望大家无论从中学到多少，都能够有所启发，有所收获 未来的学习，大家可以参考群里的前端学习路线，有问题有想法可以随时问我
提交课后作业和笔记可以积累积分，积累积分可以获得奖励 课后作业发我的邮箱[email protected] 发送邮件主题按如下格式前端-姓名-第x周-第x次， 如 前端-陈思远-第1周-第1次 本次课程作业在2月18日之前发送到我的邮箱
参考 B站首页设计，做一个自动轮播图效果
