一、前言
1. PC端事件
- 鼠标类：click、mouseover、mouseout、mouseleave、mouseenter、mouseup、mousedown…
- 键盘类：keydown、keyup…
- 其他类：blur、focus、change、load…
2.移动端事件
- 点击事件
- 双击事件
- 滑动事件：上滑、下滑、左滑、右滑
- 长按事件
- 摇一摇、重力感应等
3.click事件
在移动端上使用click事件，会出现300ms延时问题。
var span=document.getElementsByTagName('span')[0];
span.onclick=function(){
alert('点击了span元素');
};
//省略其他代码
300ms延时产生原因
判断用户操作是否为双击事件，在300ms以内再一次点击了屏幕，浏览器则判断为双击操作。没有点击则为单击操作。
二、touch-处理单手操作的事件
1.案例：touch事件.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--引入移动端mate标签-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title>touch事件</title>
<style>
span,div{
border: 1px solid #f00;
}
div{
display: none;
}
</style>
</head>
<body>
<span>span元素</span>
<div>div元素</div>
</body>
</html>
<script>
//需求说明：手指触摸span元素的时候，div元素显示出来。
//手指离开span元素的时候，div隐藏。类似下拉菜单特效。
//获取元素
var span=document.getElementsByTagName('span')[0];
var div=document.getElementsByTagName('div')[0];
span.ontouchstart=function(){
div.style.display="block";
}; //其中因为在移动端为了效果实现，touchstart前面要加on不推荐使用，建议使用addEventlistener函数处理
span.ontouchend=function(){
div.style.display="none";
};
</script>
不推荐使用，建议使用addEventlistener函数处理。
2.运行结果
二、addEventListener函数
addEventListener是一个侦听事件并处理相应的函数。
一般有三个参数，第一个是事件的类型，第二个是侦听到事件后处理事件的函数，第三个参数是事件捕获（值只有两个，true或flase）
1.案例：addEventListener函数.html
最低0.47元/天 解锁文章
1899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
