16-事件-CSDN博客

本文链接：https://blog.csdn.net/qq_68478665/article/details/126337529

绑定事件
事件流
事件对象扩展
事件委托
事件类型

绑定事件

addEventListene("eventType" ,fun)
element.onEventType = fun：on加事件类型

区别：addEventListene在同一元素上的同一事件类型添加多个事件，不会被覆盖，而onEventType会覆盖；addEventListene可以设置元素在捕获阶段出发事件，而onEventType不能。

    <button>点击</button>
    <script>
        let btn = document.querySelector("button");
        // btn.onclick = function(){
        //     console.log("hello world")
        // }
        // btn.onclick = function(){
        //     console.log("hello javascript")
        // }
        btn.addEventListener("click",function(){
            console.log("今天学习什么呢")
        })
        btn.addEventListener("click",function(){
            console.log("JavaScript")
        })
    </script>

事件流

三个div嵌套，都绑定click事件，点击最内层的元素，事件会从外到内依次全部执行。

首先从外层到内层的事件流向过程叫事件捕获，其次从内层到外层的第二阶段叫做事件冒泡。

事件捕获与事件冒泡：默认情况下，事件会在冒泡阶段执行

addEventListenerListener(eventType,fun,boolean)// 默认false：冒泡阶段触发；true：捕获阶段触发

阻止事件冒泡 e.stopPropagation();

需要在冒泡阶段使用，捕获阶段无效

实现如下功能；点击按钮显示一个容器盒子，点击容器，容器颜色发生改变，点击容器里的按钮，容器隐藏

    .box{
        width: 300px;
        height: 300px;
        background-color: red;
        display: none; 
        /* 初始隐藏  */
    }
    </style>
</head>
<body>
    <button class="show">显示</button>
    <div class="box">
        <button class="end">隐藏</button>

    </div>
    <script>
    let show = document.querySelector(".show");
    let box = document.querySelector(".box");
    let end = document.querySelector(".end");
    show.onclick = function(){
        box.style.display = "block";
    }
    end.onclick = function(e){
        box.style.display = "none";
        e.stopPropagation()
    }
    box.onclick = function(){
        this.style.backgroundColor = "blue"
    }

事件默认行为

去掉事件默认行为：e.preventDefault();or;return false

    // e.preventDefault();
    return false;

事件委托

通过e.target将子元素的事件委托给父级处理

ul列表内通过e.target绑定属性虽然是绑定的ul 但是ul无属性所以给了li，通过ul.removeChild(e.target)删除li元素

    ul.onclick =function(e){
        ul.removeChild(e.target);
    }

：点击的是子级但是绑定事件的父级子级的事件委托给父级处理

事件类型

鼠标事件：点击、移入、移出

键盘事件：keydown 键盘点击 +on

触屏事件：触屏按下touchstart;触屏松开touchend; 触屏按下滑动touchmove；+on

键盘e.kerCoud 获取键盘的键码每个按钮的键码都不同

offset加首字母大写的上下左右来读取元素的偏移值

向左移动可以设置为left+5 向右移动可以设置为left-5 上下同意以此实现自由移动

实现一个跟随方向键移动的元素

    .box{
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        top: 100px;
        left: 100px;
        
    }
    </style>
</head>
<body>
<div class="box"></div>
<script>
    let box = document.querySelector(".box");
    // console.log(box.offsetTop);
    document.onkeydown = function(a){
        // console.log(a.keyCode)
        let coud = a.keyCode;
        switch(coud){
            case 37:box.style.left = box.offsetLeft - 5 +"px" ;break;
            case 38:box.style.top = box.offsetTop - 5 +"px" ;break;
            case 39:box.style.left = box.offsetLeft + 5 +"px" ;break;
            case 40:box.style.top = box.offsetTop + 5 +"px" ;break;
        }
    }