基本上所有的PC端事件移动端都可以用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100vw;
height: 50vh;
background-color: orange;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
//基本上所有的PC端事件移动端都可以用
var div = document.getElementsByTagName("div")[0];
/*div.onclick = function(){
this.style.backgroundColor = "green";
}*/
div.onmouseover = function(){
this.style.backgroundColor = "blue";
}
</script>
</body>
</html>移动端特有的事件
ontouchstart 手指按下
ontouchmove 手指移动
ontouchend 手指抬起
ontouchcancel 移动端发生了触摸中断, 这个事件不容易在浏览器的模拟器中模拟, 实际中用的很少。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100vw;
height: 50vh;
background-color: orange;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
//基本上所有的PC端事件移动端都可以用
var div = document.getElementsByTagName("div")[0];
//移动端事件我们通过DOM2级进行绑定
/*div.ontouchstart = function(){
this.innerText += "手指按下";
}*/
//div.addEventListener(事件名称(不加on),执行函数,是否捕获)
//div.attachEvent(事件名称(加on),执行函数)
div.addEventListener("touchstart",function(){
this.innerText = "手指按下";
},false)
</script>
</body>
</html>移动端事件监听
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100vw;
height: 50vh;
position: absolute;
left: 0;
top: 0;
background-color: rgba(255,0,0,0.5);
}
a{
font-size: 10vw;
}
</style>
</head>
<body>
<div></div>
<a href="http://baidu.com">百度一下</a>
<script type="text/javascript">
//基本上所有的PC端事件移动端都可以用
var div = document.getElementsByTagName("div")[0];
/*ontouchstart//手指按下
ontouchmove//手指移动
ontouchend//手指抬起
ontouchcancel//手指抬起*/
//移动端事件我们通过DOM2级进行绑定
/*div.ontouchstart = function(){
this.innerText += "手指按下";
}*/
//div.addEventListener(事件名称(不加on),执行函数,是否捕获)
//div.attachEvent(事件名称(加on),执行函数)
div.addEventListener("touchstart",function(){
this.style.backgroundColor = "rgba(0,255,0,0.5)"
},false)
/*div.onclick = function(){
this.style.backgroundColor = "rgba(0,255,0,0.5)";
}*/
</script>
</body>
</html>
