移动端首先要书写meta标签
<meta type="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maxium-scale=1.0,minium-scale=1.0 />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
移动端touch事件 和 鼠标点击事件
移动端的事件是新增的，touch事件也叫触摸事件。因为手指的行为叫触摸。鼠标的行为叫点击。
鼠标的点击事件依然支持，只是有300ms的延迟。
为什么要有300ms的延迟，为了检测是否是双击。
当绑定了onclick 和 touchstart事件的时候， 首先是touchstart事件先触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- meta标签比较特殊， 它的功能很多， 所以需要两个属性， name、 content属性， name属性是规定meta标签起到了什么作用， content是描述name属性的具体作用 -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 40px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
你好
</div>
<script type="text/javascript">
// 我们要点击div让文字颜色改变为白色，
// 在pc端我们首先想到，给元素添加onclick事件，
// 获取元素
// 获取当前事件
var date = new Date();
var div = document.getElementById("container");
// 添加onclick事件
div.onclick = function() {
// 文字变白
console.log("点击事件：我的颜色要变白了")
this.style.color = "white";
console.log(new Date() - date);
}
// 触摸事件
div.addEventListener("touchstart", function() {
// 文字颜色变为蓝色
this.style.color = "blue";
console.log("touch事件：我的颜色要变白了")
console.log(new Date() - date);
}, false)
// 总结： 当绑定了onclick 和 touchstart事件的时候， 首先是touchstart事件先触发，
</script>
</body>
</html>
移动端touch事件
touchstart（）触摸开始事件
touchmove（）触摸移动事件
touchend（）触摸结束事件
注：touch事件需要用DOM2级进行事件绑定，DOM1级事件绑定不上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
width: 100%;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
// 获取元素
var box = document.getElementById("box");
////touch事件需要用dom2级事件绑定 dom1级绑定不上
// box.touchstart = function () {
// console.log("dom1级触摸");
// }
// 添加触摸事件
box.addEventListener("touchstart", function() {
console.log("触摸开始")
})
// 添加移动事件
box.addEventListener("touchmove", function() {
console.log("触摸中……")
})
// 添加结束事件
box.addEventListener("touchend", function() {
console.log("触摸结束")
})
</script>
</body>
</html>
touch事件的事件对象event
touchstart 和 touchmove 可以通过event.thouches 来获取手指信息
touchend事件不能通过event.thouches来获取手指信息，是因为此时手指已经离开了屏幕，所以要通过event.changedTouches来获取手指的信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
width: 100%;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
// 获取元素
var box = document.getElementById("box");
// 添加触摸事件
box.addEventListener("touchstart", function(e) {
// 想要获取手指信息
console.log("触摸开始")
console.log(e)
console.log("触摸时候的手指x坐标是： " +e.touches[0].clientX)
console.log("触摸时候的手指y坐标是： " +e.touches[0].clientY)
})
// 添加移动事件
box.addEventListener("touchmove", function(e) {
console.log("触摸中……");
console.log(e)
console.log("触摸时候的手指x坐标是： " +e.touches[0].clientX)
console.log("触摸时候的手指y坐标是： " +e.touches[0].clientY)
})
// 添加结束事件
box.addEventListener("touchend", function(e) {
console.log("触摸结束");
//e.touches[0].clientX获取不到手指信息
// console.log("触摸结束时候的手指x坐标是： " + e.touches[0].clientX)
console.log(e)
// console.log(e.changedTouches[0].clientX)
console.log("触摸结束时候的手指x坐标是： " + e.changedTouches[0].clientX)
console.log("触摸结束时候的手指y坐标是： " + e.changedTouches[0].clientY)
})
</script>
</body>
</html>
过渡事件 和 动画事件
当一个元素过渡开始时候，不会执行transionstart 事件，过渡开始没有transionstart 事件
当一个元素过渡完成时候，会执行transionend 事件
当一个元素动画开始的时候，会触发animationstart 事件
当一个元素动画结束的时候，会触发animationend 事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
transition: all 1s ease 0s;
}
#box.cur {
left: 100px;
}
#box1 {
position: absolute;
top: 100px;
left: 0;
width: 100px;
height: 100px;
background-color: blue;
/* animation: go 1s ease 1s 3 alternate; */
}
/*定义动画*/
@keyframes go {
form {
left: 0px;
}
to {
left: 100px;
}
}
</style>
</head>
<body>
<div id="box"></div>
<div id="box1"></div>
<script type="text/javascript">
// 获取元素
var box = document.getElementById("box");
var box1 = document.getElementById("box1");
// 1s之后，让box添加过度效果
setTimeout(function() {
box.setAttribute("class", "cur");
}, 1000)
// 过渡事件
box.addEventListener("transitionend", function() {
console.log("过渡完成")
})
// 过渡事件没有开始事件
box.addEventListener("transitionstart", function() {
console.log("过渡开始")
})
// 动画开始事件
box1.addEventListener("animationstart", function() {
console.log("动画开始")
})
// 动画结束事件
box1.addEventListener("animationend", function() {
console.log("动画结束")
})
</script>
</body>
</html>