一、移动端的事件
移动端新增了“touch”触摸事件，因为手指的行为叫触摸， 而鼠标的行为叫点击
依然支持点击事件，只是有300ms的延迟，为了检测是否双击
举例：
1 // 获取元素 2 var box = document.getElementById("box"); 3 // 获取当前时间 4 var date = new Date(); 5 // 绑定click事件 6 box.onclick = function() { 7 // 改变文字颜色 8 this.style.color = "white"; 9 console.log(new Date() - date); 10 } 11 12 13 // touchstart事件 14 box.addEventListener("touchstart", function() { 15 // 改变文字颜色 16 this.style.color = "blue"; 17 console.log(new Date() - date); 18 }) |
输出：
1 |
这两个数值就是两个事件执行的毫秒值差
1.1 移动端的三个事件
移动端添加了触摸事件分别是：
触摸开始事件：touchstart
绑定方式：
1 dom.addEventListner(“touchstart”, function() { 2 3 console.log(“触摸开始”) 4 } ) |
结果：
1 |
触摸移动事件：touchmove
绑定方式：
1 // touchmove 2 box.addEventListener("touchmove", function() { 3 console.log("触摸中"); 4 }) |
结果：
1 |
触摸结束事件: touchend
绑定方式：
1 // touchend 2 box.addEventListener("touchend", function() { 3 console.log("触摸结束"); 4 }) |
结果:
1 |
1.2 事件对象
1 |
touchstart和touchmove可以通过e.touches来获取手指相关信息
1 // touchstart 2 box.addEventListener("touchstart", function(e) { 3 // console.log(e); 4 // 查看手指相关信息 5 console.log(e.touches[0].clientX); 6 console.log(e.touches[0].clientY); 7 }) |
输出：
1 |
touchmove:
1 // touchmove 2 box.addEventListener("touchmove", function(e) { 3 // console.log(e); 4 console.log(e.touches[0].clientX); 5 }) |
输出：
1 |
touchend获取手指想关信息的属性通过e.changedTouches来获取
1 // // touchend 2 box.addEventListener("touchend", function(e) { 3 // 查找手指相关信息 4 // console.log(e); 5 console.log(e.changedTouches[0].clientX); 6 console.log(e.changedTouches[0].clientY); 7 }) 8 |
输出：
1 |
下午复习：
移动端的事件:
touchstart： 触摸开始事件
touchmove：触摸移动事件
touchend: 触摸结束事件
事件对象：
获取手指相关信息
touchstart和touchmove 中 可以通过e.touches 来获取手指的位置
touchend事件中，获取手指信息不是通过e.touches而是通过e.changedTouches来获取
二、过度事件和动画事件
当一个元素过度完成之后，会触发一个事件： 过度完成事件
举例：
1 2 // 过度事件 3 box.addEventListener("transitionend", function() { 4 console.log("过度完成"); 5 }) |
2.1 动画事件
当一个元素动画执行的时候会触发两个事件：
DOM结构：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 #box { 12 position: absolute; 13 width: 100px; 14 height: 100px; 15 background-color: red; 16 left: 0; 17 top: 0; 18 animation: go 1s linear 0s 3 alternate; 19 } 20 @keyframes go { 21 from { 22 left: 0; 23 } 24 to { 25 left: 100px; 26 } 27 } 28 29 </style> 30 </head> 31 <body> |
动画开始：
1 // 动画开始 2 box.addEventListener("animationstart", function() { 3 console.log("动画开始了"); 4 }) |
动画结束：
1 // 动画结束 2 box.addEventListener("animationend", function() { 3 console.log("动画结束了"); 4 }) |
三、zepto
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。
官网: http://www.css88.com/doc/zeptojs_api/
下载：http://zeptojs.com/zepto.min.js
zepto是模块化：如果想要使用animate函数 必须下载fx模块， 如果需要使用移动端的事件必须下载touch模块
3.1 模块化
zepto天生不具备animate函数，如果想要使用需要下载fx模块
在没有下载之前：
1 |
zepto.js:
1 |
在下载fx模块之后：
1 |
zepto.js:
1 |
3.2 touch模块
touch模块添加了一些自定义的事件：
tap: 触碰
doubleTap: 双击
singleTap: 单击
longTap: 长按 750ms之后执行
swipe: 滑动
swipeLeft: 左滑
swipeRight: 右滑
swipeUp: 上滑
swipeDown: 下滑
四、百度地图
自学方式
假如在工作中领导交给我们一个任务， 在页面中显示地图并显示自己公司的位置
既然是要显示地图，就要找对应的地图api,
现成的地图有: 百度地图， 高德地图， 谷歌地图
搜1：
点击：
3：
4：
5：
6：
7：
8：创建完成之后
有了密钥之后我们就可以开发了
按照demo提示
9：
扫描下方二维码添加微信：haomei0452，领取 前端资料、项目实战视频教程 ！
爱创课堂是一家专门做前端培训的机构，由百度高级工程师，《JavaScript设计模式》作者张容铭老师亲自授课，全程20个项目实战，真正做到学习完即可到企业正常工作！
我们前端课程的五大优势：
1. 名师亲自授课，根据企业需求 实时跟进课程大纲，保证学员学到的都是最新的、企业最需要的前端知识点
2. 采取小班教学、上二休一的模式（一个班20—30人，保证老师可以照顾到每一位同学，学员有充足的时间练习）
3. 签订就业协议，帮助学员制作简历，投递简历，模拟面试，不用担心就业问题，目前学员平均就业薪资12K
4. 免费学习一周，不满意不收取任何费用
5. 与中国石油，中国电信，软通等知名企业合作，进行企业内训，并进行学员就业推荐
