在移动端新增了touch事件，因为手指的行为叫做“触摸”， 鼠标的行为叫做“点击”
但是它仍然支持点击事件，有300ms的延迟，检测是否双击
移动端的三个事件
touchstart：触摸开始
绑定方式：
dom.addEventListener(“touchstart”, fn)
touchmove: 触摸移动
绑定方式：
dom.addEventListener(“touchmove”, fn)
touchend: 触摸结束
绑定方式:
dom.addEventListener(“touchend”, fn)
事件对象
在touchstart和touchmove事件中获取手指相关信息的属性: e.touches
// 获取元素
var box = document.getElementById("box");
// 为box注册touchstart事件
box.addEventListener("touchstart", function(e) {console.log(e);// 在touchstart事件获取手指相关信息的属性: e.touchesconsole.log(e.touches[0].clientX);console.log(e.touches[0].clientY);
})// 注册touchmove事件
box.addEventListener("touchmove", function(e) {// 在touchmove事件中，获取手指相关信息的属性: e.touchesconsole.log(e.touches[0].clientX);console.log(e.touches[0].clientY);
})在touchend事件中获取手指信息的相关属性叫做: e.changedTouches
// 注册touchend事件
box.addEventListener("touchend", function(e) {// 在touchend事件中获取手指相关信息的属性: e.changedTouchesconsole.log(e.changedTouches[0].clientX);console.log(e.changedTouches[0].clientY);
})动画事件和过度事件
当一个元素过度完成之后会触发一个事件: transitionend事件
<style type="text/css">* {margin: 0;padding: 0;}#box {position: absolute;width: 100px;height: 100px;background-color: red;left: 0;top: 0;transition: all 1s;}#box.cur {left: 100px;}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
// 获取元素
var box = document.getElementById("box");// 两秒之后添加类名
setTimeout(function() {box.setAttribute("class", "cur");
}, 2000)// 当一个元素过度完成之后会触发一个事件
box.addEventListener("transitionend", function() {console.log("过度完成");
})动画事件
当一个元素动画开始的时候会触发一个事件: animationstart
#box {position: absolute;width: 100px;height: 100px;background-color: red;left: 0;top: 0;/*动画的调用*/animation: donghua 1s ease 2s 3 alternate;}/*动画的定义*/@keyframes donghua {from {left: 0;}to {left: 100px;}}// 获取元素
var box = document.getElementById("box");// 动画开始事件
box.addEventListener("animationstart", function() {console.log("动画开始");
})当一个元素动画结束之后会触发一个事件: animationend事件
#box {position: absolute;width: 100px;height: 100px;background-color: red;left: 0;top: 0;/*动画的调用*/animation: donghua 1s ease 2s 3 alternate;}/*动画的定义*/@keyframes donghua {from {left: 0;}to {left: 100px;}}// 动画结束事件
box.addEventListener("animationend", function() {console.log("动画结束");
})touchstart touchmove touchend 实现轮播图
<div class="banner" id="banner"><ul id="carousel"><li><img src="images/banner0.jpg" alt="" /></li><li><img src="images/banner1.jpg" alt="" /></li><li><img src="images/banner2.jpg" alt="" /></li><li><img src="images/banner3.jpg" alt="" /></li><li><img src="images/banner4.jpg" alt="" /></li><li><img src="images/banner0.jpg" alt="" /></li></ul></div>css
/*头部部分完成*/
.banner {position: relative;max-width: 540px;min-width: 320px;height: 107px;width: 100%;margin: 0 auto;overflow: hidden;/*background: url(../images/banner.jpg) no-repeat;*//*background-size: 100% 100%;*/
}/*滚动轮播图的布局关键: ul的宽度要足够的宽，所有的图片要并排在一起*/
.banner #carousel {position: absolute;width: 600%;height: 100%;left: 0;top: 0;
}.banner #carousel li {float: left;width: 16.66%;
}.banner #carousel li img {width: 100%;height: 100%;
}#carousel {transition: all 1s;}<script type="text/javascript">/* 实现轮播图banner 的高度自适应 */// 获取元素var banner = document.getElementById("banner");// 计算图片的比例 图片大小宽高var r = 768 / 154;// 获取当前视口的宽var width = document.documentElement.clientWidth;// console.log(width);// 计算比例var height = width / r;// console.log(height);// 赋值给bannerbanner.style.height = height + "px";/* 轮播图动画效果 */var carousel = document.getElementById("carousel");var length = carousel.getElementsByTagName("li").length - 1;// 定义信号量var idx = 0;// 定义中转量var left = 0;// 定义锁 函数节流var lock = true;// 为carousel注册touchstart事件carousel.addEventListener("touchstart", function(e) {// 函数节流 防止用户频繁首次滑动if (!lock) {return;}// 在touchstart事件中取消过度 首次滑动屏幕先把过渡取消掉this.style.transition = "none";// 获取手指首次触摸屏幕相关的信息left = e.touches[0].clientX;})// 为了让图片跟随手指移动为carousel去注册touchmove事件carousel.addEventListener("touchmove", function(e) {// 函数节流 防止用户频繁滑动if (!lock) {return;}// 获取手指移动时候的位置var x = e.touches[0].clientX;// 当idx===0并且还是往右滑动，此时应该显示最后一张图片if (idx === 0 && x > left) {// 改变carousel的定位left值carousel.style.left = -width * length + x - left + "px";return;}// 改变carousel的定位值 让图片开始滑动到指定的位置carousel.style.left = -width * idx + x - left + "px";})// 为carousel注册touchend事件 手指离开屏幕的事件carousel.addEventListener("touchend", function(e) {// 函数节流if (!lock) {return;}// 把锁关闭 lock = false;// 在手指离开屏幕的时候要加上过度this.style.transition = "all 1s";// 获取手指离开之后的位置var x = e.changedTouches[0].clientX;// 判断手指滑动的方向if (x > left) {// 说明是往右滑动，图片应该从左侧出现，相当于左按钮点击事件// 左按钮点击事件的策略: 先验证， 再拉动// 改变信号量idx--;// 验证if (idx < 0) {idx = length - 1;}} else if (x < left) {// 说明往左滑动，图片应该从右侧出现，相当于右按钮点击事件// 右按钮点击事件的策略: 先拉动， 再验证// 改变信号量idx++;// 边界判断}// 拉动carousel.style.left = -width * idx + "px";})// 给carousel注册过度完成事件carousel.addEventListener("transitionend", function() {if (idx > length - 1) {// 取消过度carousel.style.transition = "none";idx = 0;carousel.style.left = -width * idx + "px";}console.log("过渡完成")// 开锁lock = true;})</script>
