【13. 事件】

最新推荐文章于 2024-07-25 09:24:40 发布

霁月独觞

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量102

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_40940067/article/details/124594958

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

事件

定义
常见事件
事件传播
事件委托
事件对象
案例

定义

事件是浏览器响应用户操作的一种机制
由 事件源 + 事件类型 + 事件处理函数组成
语法1：事件源.on + 事件类型 = 事件处理函数
语法2：事件源.addEventListener('事件类型',事件处理函数,false(默认冒泡, true为捕获))

两种绑定事件的区别：
  on 绑定事件 不能给同一个事件源多次绑定同一个事件
      当多次绑定时候，只会执行最后一个事件，前面的事件都被覆盖
  addEventListener 可以给同一个事件源多次绑定同一个事件
     执行顺序从上到下，先绑定的先执行

常见事件

MDN上的events详解

【1】鼠标事件
    onclick 单击事件,由鼠标按下事件 和鼠标抬起事件组成
    ondblclick 双击事件，两次单击事件组成
    onmousedown 鼠标按下事件
    onmouseup 鼠标抬起事件
    onmouseenter 移入事件
    onmouseleave 移出事件
    onmouseout   移出事件
    onmouseover  移入事件
    onmousemove  移动事件
【2】表单事件
    oninput      输入事件事件
    onfocus      获取焦点事件
    onblur       失去焦点事件
    onchange     表单内容改变事件，输入框的内容跟上一次不一样且失去焦点的时候才会执行
【3】浏览器事件
    onload   页面中所有的静态资源加载完毕之后之前的事件
    onscroll  滚动条滚动事件
    onresize  窗口大小改变事件
【4】键盘事件
    onkeydown  
    onkeyup

事件传播

事件传播机制：（默认为事件冒泡机制）
  【1】事件冒泡：先执行真正触发事件的这个元素，然后在一层一层往上执行,
  直到触发window的同类型事件就停止事件冒泡
 【2】事件捕获：先执行最顶层对象的同类型事件，在往下一层一层执行，
 直到执行到真正触发事件的行到真正触发事件的

阻止冒泡
e.stopPropagation()

阻止默认事件
e.preventDefault()
return false

事件委托

box.onclick = function (e) {
  if (e.target.className == 'aaa') {
    const copy = e.target.cloneNode(true)
    box.appendChild(copy)
  }
}

事件对象

事件对象主要存储的就是 事件的相关信息
事件对象：事件处理函数中 给一个形参(高版本浏览器的写法)
ie浏览器不识别 事件处理函数的参数，window.event 来获取事件对象

鼠标相关信息

button记录按下的鼠标键
button = 0 表示左键
button = 1 表示中间键
button = 2 表示右键

clientX 光标在浏览器可视区域的水平位置
clientY 光标在浏览器可视区域的垂直位置
offsetX 光标在元素上的水平位置
offsetY 光标在元素上的垂直位置

pageX  光标在页面中的水平位置（如果有滚动条的时候被卷去的页面也会计算在内）
pageY  光标在页面中的垂直位置（如果有滚动条的时候被卷去的页面也会计算在内）
box.onmousedown = function (e) {    
  console.log(e)
}

键盘信息

事件源：document input textarea
事件类型 onkeydown onkeyup
keyCode 按下键盘这个键的键码
altKey  是否按下的是alt键
ctrlKey 是否按下的是ctrl
shiftKey 是否按下的是 shift

keycode对照表

在这里插入图片描述

禁用右键菜单

window.onmousedown = function (e) {
  if (e.button === 2) e.preventDefault()
}

// contextmenu 右键菜单事件
window.oncontextmenu = function (e) {
  e.preventDefault()
}

案例

进度条

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>08-进度条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #progress {
            width: 750px;
            height: 40px;
            margin: 100px auto;
        }

        #progress_bar {
            width: 700px;
            height: 100%;
            background-color: #ccc;
            position: relative;
            border-radius: 5px;
        }

        #progress_bar_flg {
            width: 25px;
            height: 50px;
            background-color: red;
            position: absolute;
            left: 0px;
            top: -5px;
            border-radius: 5px;
        }

        #progress_bar_value {
            width: 0px;
            height: 100%;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 5px 0 0 5px;
        }

        #progress_value {
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div id="progress">
        <!--进度条-->
        <div id="progress_bar">
            <!--拖动按钮-->
            <span id="progress_bar_flg"></span>
            <span id="progress_bar_value"></span>
        </div>
        <!--进度值-->
        <span id="progress_value">0%</span>
    </div>

    <script>
        /* 
            【1】获取所需要的元素
            【2】给progress_bar_flg 绑定鼠标按下事件
            【3】在window中移动的时候 progress_bar_flg的left 和 progress_bar_value 的width跟随鼠标移动
                +   当值达到100% 的时候不能在往右边移动
                +   当值达到0的时候不能在往左边移动
            【4】计算progress_value的值
            【5】当鼠标抬起来的时候 应该清除window的移动事件
        */
        var bar = document.querySelector('#progress_bar');
        var bar_flg = document.querySelector('#progress_bar_flg');
        var bar_value = document.querySelector('#progress_bar_value');
        var value = document.querySelector('#progress_value');

        bar_flg.onmousedown = function () {
            window.onmousemove = function (e) {
                // e.clientX 获取光标在浏览器可视区域最左边的距离
                // bar_flg 相当于父元素定位
                // x = e.clientX - 父元素到浏览器可视区域最左边的距离 - 本身盒子宽度的一半
                var x = e.clientX - bar.offsetLeft - bar_flg.offsetWidth / 2;
                if (x <= 0) {
                    x = 0;
                }
                if (x >= bar.offsetWidth - bar_flg.offsetWidth) {
                    x = bar.offsetWidth - bar_flg.offsetWidth

                }
                bar_flg.style.left = x + 'px';
                bar_value.style.width = x + 'px';

                // 计算progress_value的值：x/bar的宽度 * 100
                // x 最大值为675
                var val = x / (bar.offsetWidth - bar_flg.offsetWidth) * 100;
                value.innerHTML = val.toFixed(2) + '%';
            }
        }

        window.onmouseup = function () {
            window.onmousemove = null;
        }
    </script>
</body>

</html>

拖拽回放

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            overflow: hidden;
        }

        body,
        div,
        h2,
        p {
            margin: 0;
            padding: 0;
        }

        body {
            color: #fff;
            background: #000;
            font: 12px/2 Arial;
        }

        p {
            padding: 0 10px;
            margin-top: 10px;
        }

        span {
            color: #ff0;
            padding-left: 5px;
        }

        #box {
            position: absolute;
            width: 300px;
            height: 150px;
            background: #333;
            border: 2px solid #ccc;
        }

        #box h2 {
            height: 25px;
            line-height: 25px;
            cursor: move;
            /*手型：移动*/
            background: #222;
            border-bottom: 2px solid #ccc;
            text-align: right;
            padding: 0 10px;
        }

        #box h2 a {
            color: #fff;
            font: 12px/25px Arial;
            text-decoration: none;
            outline: none;
        }
    </style>
</head>

<body>
    <div id="box">
        <h2>
            <a href="#">点击回放拖动轨迹</a>
        </h2>
        <p><strong>Drag:</strong><span>false</span></p>
        <p><strong>offsetLeft:</strong><span id="t1">0</span></p>
        <p><strong>offsetTop:</strong><span id="t2">0</span></p>
    </div>

    <script>
        var box = document.querySelector('#box');
        var h2 = document.querySelector('#box h2');
        var a = document.querySelector('#box h2 a');

        var arr = []; //用来记录 移动的轨迹
        h2.onmousedown = function (event) {
            window.onmousemove = function (e) {
                var obj = {};
                var x = e.clientX - event.offsetX;
                var y = e.clientY - event.offsetY;
                obj.x = x;
                obj.y = y;
                arr.push(obj);
                box.style.left = x + 'px';
                box.style.top = y + 'px';
                t1.innerText = box.style.left
                t2.innerText = box.style.top
            }
        }

        // 给a绑定点击事件
        a.onclick = function () {
            var timer = setInterval(function(){
                if(!(arr.length)){
                    clearInterval(timer);
                }
                box.style.left = arr.shift().x + 'px';
                box.style.top = arr.shift().y + 'px';     

                t1.innerText = box.style.left
                t2.innerText = box.style.top
            },10)
        }

        a.onmousedown = function(e){
            e.stopPropagation();
        }
        window.onmouseup = function () {
            window.onmousemove = null;
        }
        
    </script>
</body>

</html>

放大镜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
          *{margin: 0;padding: 0;}
          .box1{
              width: 300px;
              height: 300px;
              background: url(../day_4事件2/刘永乐1.7/img/small_2.jpg) no-repeat center ;
              background-size: 300px;
              position: relative;
          }
          .mark{
              width: 100px;
              height: 100px;
              display: none;
              background-color: white;
              opacity: .5;
              position: absolute;
              left: 0;
              top: 0;
          }
          
          .box2{
              width: 200px;
              height: 200px;
              position: absolute;
              left: 400px;
              top: 70px;
              border: 2px dashed green;
              overflow: hidden;
              display: none;
              border-radius: 50%;
          }
          .box2 img{
              position: absolute;
              left: 0;
              top: 0;
              width: 1200px;
              height: 1200px;
              display: block;

          }
        
    </style>
</head>
<body>
    <div class="box1">
        <div class="mark"></div>
    </div>
    <div class="box2">
        <img src="../day_4事件2/刘永乐1.7/img/small_2.jpg" alt="">
    </div>
    <script>
        var box1  = document.querySelector('.box1');
        var mark = document.querySelector('.mark');
        var box2 = document.querySelector('.box2');
        var img = document.querySelector('.box2 img');

        box1.onmouseover = function(){
            mark.style.display = 'block';
            box2.style.display = 'block';


        }
        box1.onmouseout = function(){
            mark.style.display = 'none';
            box2.style.display = 'none';
        }

        box1.onmousemove = function(e){
            var x = e.clientX - mark.offsetWidth/2 - box1.offsetLeft;
            var y = e.clientY - mark.offsetHeight/2 - box1.offsetTop;

            if(x <= 0){
                x = 0;
            }
            if(x >= box1.offsetWidth - mark.offsetWidth){
                x = box1.offsetWidth - mark.offsetWidth;
            }
            if(y <= 0){
                y = 0;
            }
            if(y >= box1.offsetHeight - mark.offsetHeight){
                y = box1.offsetHeight - mark.offsetHeight;
            }
            mark.style.left = x + 'px';
            mark.style.top = y + 'px';

            img.style.left = (x) *-5 -150+ 'px' ;
            img.style.top = (y)*-5 -150  + 'px';

        }
    </script>
</body>
</html>