目录
一、什么是事件
对于前端:通过代码的方式和页面中的某些内容做好的一个约定。
对于用户:触发指定行为的时候,就会执行的代码段。
二、事件绑定
约定的事情,也就是事件绑定。
事件绑定三要素:
1、事件源:和谁做好约定。
2、事件类型:约定一个什么行为。
3、事件处理函数:当用户触发该行为时,执行什么代码。
事件语法:
事件源.on事件类型=事件处理函数。
三、事件类型
鼠标事件:
1、click:鼠标单击(左键)
2、dbclick:鼠标双击
3、contextmenu:鼠标右键单击
4、mouseup:鼠标抬起
5、mousedown:鼠标按下
6、mouseover:鼠标经过
7、mouseout:鼠标移出
8、mouseenter:鼠标移入
9、mouseleave:鼠标移出
10、mousemove:鼠标移动
键盘事件:
1、keydown:键盘按下
2、keyup:键盘按键松开
3、keypress:键盘键入
浏览器事件:
1、load:加载完毕
2、scroll:滚动
3、resize:窗口改变大小
触摸事件:
1、touchstart:触摸开始
2、touchmove:触摸移动
3、touchend:触摸结束
4、touchcancel:触摸取消
表单事件:
1、focus:获得焦点
2、blur:失去焦点
3、change:值改变
4、select:选中
5、submit:提交
6、reset:重置
7、input:输入
简单的小练习:
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<div></div>
<input type="text" />
// 1、获取元素
var div=document.getElementsByTagName("div")
//2、绑定点击事件
//注意,上面获取元素使用的是标签名,返回的结果是数组类型
div[0].onclick=function(e){
// 3、点击的时候执行的代码
console.log("别点我!")
}
//表单事件
var inp=document.querySelector("input")
inp.onfocus=function(){
console.log("获得焦点")
}
inp.onblur=function(){
console.log("失去焦点")
}
//获取键盘输入的按键是哪一个
document.addEventListener("keydown",function(e){
alert(e.keyCode)
})
四、事件传播
什么是事件传播呢?简单的说就是浏览器响应事件的机制(冒泡机制)。浏览器窗口是最先知道事情的发生,事件响应机制共分为三个阶段:
开始事件传播------------------
1、捕获阶段:从window按照结构子级的顺序传递到目标;
2、目标阶段:准确触发事件的元素接收到的行为;
3、冒泡阶段:从目标按照结构父级的顺序传递到window
事件传播结束------------------
事件对象:指的是当事件触发的时候,一个描述该事件信息的对象数据类型,也就是参数。
事件源:也就是在目标阶段准确触发事件的元素。
接下来用一个图简单解释一下(画的比较丑,各位见谅):
假设我们点击的是inner部分:
<style>
.outer {
width: 100px;
height: 100px;
background-color: pink;
margin: 0 auto;
}
.center {
width: 80px;
height: 80px;
background-color: green;
}
.inner {
width: 50px;
height: 50px;
background-color: orange;
}
ul {
width: 300px;
height: 300px;
background-color: skyblue;
margin: 0 auto;
list-style: none;
display: flex;
}
ul > li {
flex-direction: column;
height: 50px;
background-color: pink;
margin-right: 20px;
margin-top: 20px;
cursor: pointer;
}
</style>
<div class="outer">
<div class="center">
<div class="inner"></div>
</div>
</div>
<ul>
<li style="flex: 1">1</li>
<li style="flex: 1">2</li>
<li style="flex: 1">3</li>
</ul>
//获取需要的元素
var outer=document.querySelector(".outer")
var center=document.querySelector(".center")
var inner=document.querySelector(".inner")
//给每个变量绑定点击事件
outer.onclick=function(){
alert("我是outer")
}
center.onclick = function () {
alert("我是center");
};
inner.onclick = function (e) {
alert("我是inner");
};
当你仅仅是这样写的时候,你尝试一下点击最里面的一层,也就是inner这一层,你会发现,不只是inner这一个弹框出现了,当你点击按钮之后,也出现了center和outer的弹框,这就是事件的冒泡机制。
我们肯定是不想出现这样的情况的,那么如何阻止冒泡事件的发生呢?很简单,加上一句代码:e.stopPropagation()
inner.onclick = function (e) {
alert("我是inner");
// 阻止事件传播
e.stopPropagation();
};
这里的参数e就是事件对象了,事件对象的stopPropagation方法能够阻止冒泡机制的发生。
在这里还简单的说一下事件委托,原理就是通过利用冒泡机制来实现的:
// 事件委托
// 获取ul元素
var ul = document.querySelector("ul");
ul.onclick = function (e) {
// 获取事件源,即点击的是哪一个元素
// console.log(e.target);
if (e.target.tagName === "LI") {
console.log("你点击的是li");
}
};
上面的代码也就是将本应该绑定在li标签上的事件绑定在了ul标签上,这就是事件委托(可以和jQuery的事件委托相比较一下)。
在了解上述的基础知识之后,接下来做两个简单的小案例。
五、案例一:鼠标跟随案例
基本要求:无论鼠标移动到哪里,都会有一个小图标跟随鼠标移动。
素材要求:一张图片。
知识补充:
1、offsetX和offsetY:鼠标相对于事件源的坐标。
2、clientX和clientY:鼠标相对于浏览器可视窗口的坐标。
3、pageX和pageY:鼠标相对于页面文档流的坐标。
光标相对于窗口的坐标点:事件对象.clientX和事件对象.clientY
接下来是代码实现,在查看下列代码之前,请各位尽量的自己试着做一做,看能否实现。
<style>
img {
width: 50px;
height: 50px;
/* 下面三行代码是关键,根据偏移值来实现 */
position: absolute;
top: 0;
left: 0;
}
</style>
<img src="这里填自己的图片路径" />
<script>
var imgBox=documentSelector("img")
//给鼠标移动事件绑定一个方法
document.onmousemove=function(e){
//拿到光标相对于窗口的坐标
var x=e.clientX
var y=e.clientY
//将拿到的坐标赋值给top和left
imgBox.style.top=y+"px"
imgBox.style.left=x+"px"
}
</script>
六:案例二、轮播图案例
要求:使用JS实现轮播图效果,点击左右按钮能切换,点击焦点(图片下方的小圆点)也能切换。
效果:
首先是HTML结构:
<!-- 图片区域 -->
<div class="banner">
<!-- 图片显示 -->
<ul class="imgBox">
<li class="active"><img src="图片地址" /></li>
<li><img src="图片地址" /></li>
<li><img src="图片地址" /></li>
</ul>
<!-- 焦点区域 -->
<ol>
<li class="active"></li>
<li class="active"></li>
<li class="active"></li>
</ol>
<!-- 左右切换按钮 -->
<div class="left"><</div>
<div class="right">></div>
</div>
接下来是CSS:
<style>
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
/*去除默认样式*/
ul,ol{
list-style:none;
}
img{
width:100%;
height:500px;
display:block;
}
.banner{
width:100%;
height:100%;
position:relative;
}
/* 给图片设置样式 */
.banner>ul>li{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
/*透明度为0*/
opacity:0;
transition:opacity 0.5s linear;
}
</style>
样式写到这里的话,运行会效果是一张图片都没显示,咱们继续写:
/*
接着上面的写
*/
.banner > ul > li.active {
opacity: 1;
}
/* 设置焦点区域样式 */
.banner > ol {
width: 200px;
height: 30px;
position: absolute;
left: 30px;
bottom: 30px;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 15px;
}
.banner > ol > li {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: white;
}
.banner > ol > li.active {
background-color: orange;
}
/* 设置左右按钮 */
.banner > div {
width: 40px;
height: 60px;
position: absolute;
top: 50%;
margin-top: -30px;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: white;
cursor: pointer;
}
.banner > div.left {
left: 0;
}
.banner > div.right {
right: 0;
}
到现在为止,样式基本都已经完成的差不多了,接下来需要的就是JS实现功能:
<script>
//需要获取所有的图片和焦点按钮
var imgs=document.querySelectorAll("ul>li")
var points=document.querySelectorAll("ol>li")
// 准备一个变量表示当前是第几张
var index=0
// 这里约定参数为true时切换下一张,参数为false时切换上一张,参数为数字时就切换到第几张
function changeOne(type){
// 让当前这一张消失
imgs[index].className=""
points[index].className=""
//根据参数type传递的值来切换index的值
if(type==true)
{
index++;
}else if(type==false){
index--
}else{
index=type
}
//在改变index的值之后,需要判断index的值是否溢出,否则会切换失败
if(index>=imgs.length)
{
//当index的值越界之后,重新回到第一张
index=0;
}
if(index<0)
{
//如果index小于0,则回到最后一张
index=imgs.length-1
}
//改变index后的显示
imgs[index].className="active"
points[index].className="active"
}
//给轮播图添加一个点击事件,这里使用事件委托,下面这句话加到最前面
var banner=document.querySelector(".banner")
banner.onclick=function(e){
if (e.target.className === "left") {
changeOne(false);
}
if (e.target.className === "right") {
changeOne(true);
}
if (e.target.dataset.name === "point") {
// 给焦点添加点击事件的时候,在焦点部分的HTML代码,给每个li标签添加自定义属性
// 这里的dataset.name就是data-name
// 这里的dataset.index就是data-index
changeOne(e.target.dataset.index);
}
}
// 自动切换
setInterval(function () {
changeOne(true);
}, 3000);
</script>
给焦点区域的代码添加自定义属性,添加自定义属性的目的是为了方便获取点击的是哪个元素:
<!-- 焦点区域 -->
<ol>
<li class="active" data-name="point" data-index="0"></li>
<li data-name="point" data-index="1"></li>
<li data-name="point" data-index="2"></li>
</ol>
到现在就完成了轮播图了,各位赶快去试试吧!如果遇到什么问题,欢迎在下方留言或者私信我,看到了就会回的~