重学Javascript基础（十) DOM中的事件处理

文章	分类	评论
261	4	34

01.事件处理的方案选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 直接在html中编写JavaScript代码（了解） -->
     <button onclick="console.log('按钮1发生了点击~')">按钮1</button>
     <button class="btn2">按钮2</button>
     <button class="btn3">按钮3</button>

     <script>
        // 1.获取元素对象
        var btn2El = document.querySelector(".btn2")
        var btn3El = document.querySelector(".btn3")

        // 2.onclick属性
        function handleClick01(){
            console.log("按钮2发生了点击~")
        }
        function handleClick02(){
            console.log("按钮2的第二个处理函数")
        }
        btn2El.onclick = handleClick01
        btn2El.onclick = handleClick02

        // 3.addEventListener(推荐)
        btn3El.addEventListener("click",function(){
            console.log("第一个btn3的事件监听~")
        })
        btn3El.addEventListener("click",function(){
            console.log("第二个btn3的事件监听~")
        })
        btn3El.addEventListener("click",function(){
            console.log("第三个btn3的事件监听~")
        })
     </script>
</body>
</html>

02.事件冒泡和事件捕获

<!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>
        .box {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 200px;
          height: 200px;
          background-color: orange;
        }
    
        .box span {
          width: 100px;
          height: 100px;
          background-color: red;
        }
      </style>
</head>
<body>
    <div class="box">
        <span></span>
    </div>

    <script>
        // 1.获取元素
        var spanEl = document.querySelector("span")
        var divEl = document.querySelector("div")
        var bodyEl = document.body

        // 2.绑定点击事件
        // spanEl.onclick = function(){
        //     console.log("span元素发生了点击~")
        // }
        // divEl.onclick = function(){
        //     console.log("div元素发生了点击~")
        // }
        // bodyEl.onclick = function(){
        //     console.log("body元素发生了点击~")
        // }

        // 默认情况下是事件冒泡
        spanEl.addEventListener("click",function(){
            console.log("span元素发生了点击~冒泡")
        })
        divEl.addEventListener("click",function(){
            console.log("div元素发生了点击~冒泡")
        })
        bodyEl.addEventListener("click",function(){
            console.log("body元素发生了点击~冒泡")
        })

        // 设置希望监听事件捕获的过程
        spanEl.addEventListener("click",function(){
            console.log("span元素发生了点击~捕获")
        },true)
        divEl.addEventListener("click",function(){
            console.log("div元素发生了点击~捕获")
        },true)
        bodyEl.addEventListener("click",function(){
            console.log("body元素发生了点击~捕获")
        },true)
    </script>
</body>
</html>

03.事件对象的属性解析

<!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>
        .box {
          display: flex;
          width: 200px;
          height: 200px;
          background-color: orange;
        }
    
        span {
          width: 100px;
          height: 100px;
          background-color: #f00;
        }
      </style>
</head>
<body>
    <div class="box">
        <span class="btn">
          <button>按钮</button>
        </span>
      </div>
    
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <script>
        var divEl = document.querySelector("div")
        var btnEl = document.querySelector(".btn")

        // btnEl.onclick = function(){
        //     console.log("按钮发生了点击~")
        // }

        divEl.onclick = function(event){
            // 1.偶尔会使用
            console.log("事件类型：",event.type)
            console.log("事件阶段：",event.eventPhase)

            // 2.比较少使用
            console.log("事件元素中位置",event.offsetX,event.offsetX)
            console.log("事件客户端中位置",event.clientX,event.clientY)
            console.log("事件页面中位置",event.pageX,event.pageY);
            console.log("事件在屏幕中位置",event.screeX,event.screeY)

            // 3.target/currentTarget
            console.log(event.target)
            console.log(event.currentTarget)
            console.log(event.currentTarget === event.target)
        }
      </script>
</body>
</html>

04.事件对象的方法解析

<!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>
        .box {
          display: flex;
          width: 200px;
          height: 200px;
          background-color: orange;
        }
    
        .box span {
          width: 100px;
          height: 100px;
          background-color: #f00;
        }
      </style>
</head>
<body>
    <a href="http://www.baidu.com">百度一下</a>

    <div class="box">
      <span>
        <button>按钮</button>
      </span>
    </div>
    <script>
        // 1.阻止默认行为
        var aEl = document.querySelector("a")
        // aEl.onclick = function(event){
        //     console.log("a元素发生了点击~")
        //     event.preventDefault()
        // }

        // 2.阻止事件进一步传递
        var btnEl = document.querySelector("button")
        var spanEl = document.querySelector("span")
        var divEl = document.querySelector("div")

        divEl.addEventListener("click",function(event){
            console.log("div的事件捕获监听~")
            event.stopPropagation()
        },true)
        spanEl.addEventListener("click",function(){
            console.log("span的事件捕获监听~")
        },true)
        btnEl.addEventListener("click",function(event){
            console.log("button的事件捕获监听~")
            // event.stopPropagation()
        },true)

        divEl.addEventListener("click",function(){
            console.log("div事件的冒泡监听~")
            event.stopPropagation()
        })
        btnEl.addEventListener("click",function(){
            console.log("button的事件冒泡监听~")
        })
    </script>
</body>
</html>

05.事件处理函数中this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <button>按钮</button>
      </div>
    <script>
        var btnEl = document.querySelector("button")
        var divEl = document.querySelector("div")

        divEl.onclick = function(event){
            console.log(this)
            console.log(event.currentTarget)
            console.log(divEl)
            console.log(this === divEl)
        }

        // divEl.addEventListener("click",function(){
        //     console.log(this)
        // })
    </script>
</body>
</html>

06.EventTarget-remove

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <script>
        var btnEl = document.querySelector("button")
        // // 1.将监听函数移除的过程
        // var foo = function(){
        //     console.log("监听到按钮的点击")
        // }
        // btnEl.addEventListener("click",foo)

        // // 需求：过5s钟后,将这个事件监听移除掉
        // setTimeout(function(){
        //     btnEl.removeEventListener("click",foo)
        // },5000)

        // 这种做法是无法移除的
        btnEl.addEventListener("click",function(){
            console.log("btn监听的处理函数~")
        })

        setTimeout(function(){
            btnEl.removeEventListener("click",function(){})
        },5000)

        // 举个例子
        // var obj1 = {name: "obj1"}
        // var obj2 = {name: "obj2"}
        // var obj3 = {name: "obj3"}
        // var arr = [obj1, obj2, obj3]

        // function removeArr(obj){
        //     var index = arr.findIndex(function(item){
        //         return item === {}
        //     })
        //     arr.splice(index,1)
        // }

        // removeArr({})
    </script>
</body>
</html>

07.EventTarget-dispatch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // eventtarget就可以实现类似于事件总线的效果
        window.addEventListener("coderwhy",function(){
            console.log("监听到coderwhy的呼唤~")
        })

        setTimeout(function(){
            window.dispatchEvent(new Event("coderwhy"))
        },5000)
        
    </script>
</body>
</html>

08.事件委托-案例练习01

<!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>
        .active {
          color: red;
          font-size: 20px;
          background-color: orange;
        }
      </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
      </ul>
    <script>
        // 1.每一个li都监听自己的点击,并且有自己的处理函数（自己的函数）
        // var liEls = document.querySelectorAll("li")
        // for(var liEl of liEls){
        //     // 监听点击
        //     liEl.onclick = function(event){
        //         event.currentTarget.classList.add("active")
        //     }
        // }

        // 2.统一在ul种监听
        var ulEl = document.querySelector("ul")
        ulEl.onclick = function(event){
            console.log("点击了某一个li",event.target)
            event.target.classList.add("active")
        }

        // 3.新需求：点击li变成active，其他的取消active
        var ulEl = document.querySelector("ul")
        var activeLiEl = null
        ulEl.onclick = function(event){
            // 1.将之前的active移除掉
            // for(var i = 0;i<ulEl.children.length;i++){
            //     var liEl = ulEl.children[i]
            //     if(liEl.classList.contains("active")){
            //         liEl.classList.remove("active")
            //     }
            // }

            // 1.找到active的li，移除掉active
            // var activeLiEl = ulEl.querySelector(".active")
            // if(activeLiEl){
            //     activeLiEl.classList.remove("active")
            // }

            // 1.变量记录的方式
            // edge case
            if(activeLiEl){
                activeLiEl.classList.remove("active")
            }

            // 2.给点击的元素添加active
            event.target.classList.add("active")
            
            // 3.记录最新的active对应的li
            activeLiEl = event.target
        }
    </script>
</body>
</html>

09.事件委托-案例练习02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <button data-action="search">搜索~</button>
        <button data-action="new">新建~</button>
        <button data-action="remove">移除~</button>
        <button>1111</button>
    </div>

    <script>
        var boxEl = document.querySelector(".box")
        boxEl.onclick = function(event){
            var btnEl = event.target
            var active = btnEl.dataset.action 
            switch(active){
                case "remove":
                    console.log("点击了移除按钮")
                    break
                case "new":
                    console.log("点击了新建按钮")
                    break
                case "search":
                    console.log("点击了搜索按钮")
                    break
                default:
                    console.log("点击了其他")
            }
        }
    </script>
</body>
</html>

10.鼠标事件-常见事件演练

<!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>
        .box{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        // 鼠标事件
        var boxEl = document.querySelector(".box")

        boxEl.onclick = function(){
            console.log("click")
        }
        boxEl.oncontextmenu = function(event){
            console.log("点击了右键")
            event.preventDefault()
        }

        // 变量记录鼠标是否是点下去的
        var isDown = false
        boxEl.onmousedown = function(){
            console.log("鼠标按下去")
            isDown = true
        }

        boxEl.onmouseup = function(){
            console.log("鼠标抬起来")
            isDown = false
        }

        boxEl.onmousemove = function(){
            if(isDown){
                console.log("鼠标在div上面移动")
            }
        }
    </script>
</body>
</html>

11.鼠标事件-mouseenter和over

<!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>
        .box {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 200px;
          height: 200px;
          background-color: orange;
        }
    
        .box span {
          width: 100px;
          height: 100px;
          background-color: red;
        }
      </style>
</head>
<body>
    <div class="box">
        <span></span>
    </div>

    <script>
        var boxEl = document.querySelector(".box")
        var spanEl = document.querySelector("span")

        // 1.第一组
        boxEl.onmouseenter = function(){
            console.log("box onmouseenter")
        }
        boxEl.onmouseleave = function(){
            console.log("box onmouseleave")
        }

        spanEl.onmouseenter = function(){
            console.log("span onmouseenter")
        }
        spanEl.onmouseleave = function(){
            console.log("span onmouseleave")
        }

        // 第二组
        // boxEl.onmouseover = function(){
        //     console.log("box onmouseover")
        // }
        // boxEl.onmouseout = function(){
        //     console.log("box onmouseout")
        // }
    </script>
</body>
</html>

12.鼠标事件-enter和over应用

<!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>
        .box {
          background-color: orange;
        }
    
        .box button {
          flex: 1;
          height: 50px;
        }
      </style>
</head>
<body>
    <div class="box">
        <button>删除</button>
        <button>新增</button>
        <button>搜索</button>
      </div>
    <script>
        // 方案一：监听的本身就是button元素
        // var btnEls = document.querySelectorAll("button")
        // for(var i = 0;i<btnEls.length;i++){
        //     btnEls[i].onmouseover = function(event){
        //         console.log(event.target.textContent)
        //     }
        // }

        // 方案二：事件委托
        var boxEl = document.querySelector(".box")
        boxEl.onmouseover = function(event){
            console.log(event.target.textContent)
        }
    </script>
</body>
</html>

13.键盘事件-常见事件演练

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <button>搜索</button>
    <script>
        var inputEl = document.querySelector("input")
        var btnEl = document.querySelector("button")

        // inputEl.onkeydown = function(){
        //     console.log("onkeydown")
        // }
        // inputEl.onkeypress = function(){
        //     console.log("onkeypress")
        // }
        // inputEl.onkeyup = function(event){
        //     console.log(event.key,event.code)
        // }

        // 1.搜索功能
        btnEl.onclick = function(){
            console.log("进行搜索功能",inputEl.value)
        }

        inputEl.onkeyup = function(event){
            if(event.code === "Enter"){
                console.log("进行搜索功能",inputEl.value)
            }
        }

        // 2.按下s的时候，搜索自动获取焦点
        document.onkeyup = function(event){
            if(event.code === "KeyS"){
                inputEl.focus()
            }
        }
    </script>
</body>
</html>

14.表单事件-常见事件演练

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
      <form action="/abc">
        <input type="text">
        <textarea name="" id="" cols="30" rows="10"></textarea>
    
        <button type="reset">重置</button>
        <button type="submit">提交</button>
      </form>
      <script>
        var inputEl = document.querySelector("input")

        // // 1.获取焦点和失去焦点
        // inputEl.onfocus = function(){
        //     console.log("input获取到了焦点")
        // }
        // inputEl.onblur = function(){
        //     console.log("input失去了焦点")
        // }

        // // 2.内容发生改变/输入内容 
        // // 输入的过程：input
        // // 内容确定发生改变（离开）：change
        inputEl.oninput = function(){
            console.log("input事件正在输入内容",inputEl.value)
        }
        inputEl.onchange = function(){
            console.log("change事件内容发生改变",inputEl.value)
        }

        // 3.监听重置和提交
        var formEl = document.querySelector("form")
        formEl.onreset = function(event){
            console.log("发生了重置事件")
            event.preventDefault()
        }
        formEl.onsubmit = function(event){
            console.log("发生了提交事件")
            // axios库提交
            event.preventDefault()
        }
      </script>
</body>
</html>

15.加载事件-文档加载监听

<!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>
        .box {
          width: 200px;
          height: 200px;
        }
      </style>
</head>
<body>
    <script>
        // 注册事件监听
        window.addEventListener("DOMContentLoaded",function(){
            // 1.这里可以操作box，box已经加载完毕
            // var boxEl = document.querySelector(".box")
            // boxEl.style.backgroundColor = "orange"
            // console.log("HTML内容加载完毕")

            // 2.获取img对应的图片的宽度和高度
            var imgEl = document.querySelector("img")
            console.log("图片的宽度和高度：",imgEl.offsetHeight,imgEl.offsetHeight)
        })

        window.onload = function(){
            console.log("文档中所有资源都加载完毕")
            // var imgEl = document.querySelector("img")
            // console.log("图片的宽度和高度：",imgEl.offsetWidth,imgEl.offsetHeight)
        }

        window.onresize = function(){
            console.log("创建大小发生改变时")
        }
    </script>
</body>
</html>

感谢大家观看,我们下次见

什么是作用域链以及作用域链在javascript中的作用是什么？ - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]回顾如何定义作用域链如何定义'作用域'？说明不同类型的作用域作用域链Scope Chain是JavaScript中的一个基本概念，它属于确定当前执行代码的上下文变量的查找和访问机制。在作用域的构建基于词法作用域的解构，即变量和函数的可见性由它们在源代码中的位置决定。在JavaScript中，每个执行上下文如函数执行上下文都绑有一个与之关联的作用域链。这个作用域就是一个包含多个环境记录Environ[...]

Hary

哈喽，你的SSL好像过期喽

abzzp

@秋风于渭水确实 [[微笑]]

通常会采取哪些措施来确保网站或者应用在不同的浏览器上的兼容性? - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]不同的浏览器存在兼容性问题的核心原因是不同的浏览器可能使用的是不同的浏览器内核。在现代化开发中，大多数的浏览器兼容性问题是可以通过工程化中的配置选项来解决的。1.比如browserslist可以配置目标的浏览器或者Node环境，然后在不同的工具中起作用，比如autoprefixer/babel/postess preset env等，在进行了正确的配置后，开发的Vue或者React项目在进行打包时[...]

BFC的作用是什么呢? - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]在BFC中，box会在垂直方向上一个挨着一个的排布垂直方向的间距由margin属性决定在同一个BFC中，相邻两个box之间的margin会折叠(collapse)在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的然后我们再看一下官方文档中如何说明的？总结BFC是什么？W3C文档讲：在标准流中，我们所有的盒子，不管是块级盒子还是行内盒子，它们都属于某一个FC格式化上下文，块级盒子属于BFC`块级格[...]

什么是FC呢?他是用来干什么的？ - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]什么是FC呢这里我们给出W3C给出的文档，FC文档FC的全称是FormattingContext，元素在标准流里面都是属于一个FC的。那么什么又是IFC，BFC呢？IFC行内元素的布局都属于Inline Formatting,inline level box都是在IFC中布局的BFCBFC英文全称是Block Formatting Context,也就是block level box都是在BFC中[...]

秋风于渭水

这确实是一个盲点，这个还是很有必要的，处理不好会导致网页内的元素出现抖动问题。

defer属性在javascript标签中有什么作用？ - 前端程序员,PHP程序员,全栈程序员-程序员鸡皮

[...]我们知道，当浏览器在执行到script标签的时候，首先会停止构建DOM树，然后下载Javascript文件并且执行，当JavaScript脚本执行完毕之后才会继续解析HTML标签构建DOM树。为什么Javascript程序会这样做呢？原因是我们的Javascript的作用就是操作DOM并且可以修改DOM。如果我们等到HTML执行完成之后再去执行JavaScript就会造成严重的回流和重绘，尤其是现[...]

async属性是什么？它有什么作用？ - 前端程序员,PHP程序员,全栈程序员-程序员鸡皮

[...]async属性和defer属性目标一样它也是为了不让js阻塞DOM树的构建。不过他们两个还是有区别的。async让js脚本的下载和执行是独立的。浏览器不会因为async属性的script脚本的执行而阻塞，这一点和defer属性类似。然而async属性比较任性，只要脚本被浏览器下载完成之后就会立即执行，不会等待在DOMContentLoaded之前执行。所以它不能保证是在DOMContentLoad[...]

城市教堂

我热爱旅游专栏。令人惊艳了解路线。

日	一	二	三	四	五	六
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

程序员鸡皮

站点介绍