事件的基础与案例

目录

        一、什么是事件

        二、事件绑定

        三、事件类型

        四、事件传播

        五、案例一：鼠标跟随案例

        六：案例二、轮播图案例

---

一、什么是事件

        对于前端：通过代码的方式和页面中的某些内容做好的一个约定。

        对于用户：触发指定行为的时候，就会执行的代码段。

二、事件绑定

        约定的事情，也就是事件绑定。

        事件绑定三要素：

                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">&lt;</div>
    <div class="right">&gt;</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>

        到现在就完成了轮播图了，各位赶快去试试吧！如果遇到什么问题，欢迎在下方留言或者私信我，看到了就会回的~