一、移动端的事件
移动端新增了“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. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐