day11 事件上

day11 事件上

概述

事件是指代一个东西的操作被另外一个东西进行监听的一个过程(事件),这个过程可以完成对应的操作(处理函数).事件监听器是一个标准的观察着模式(observe)

示例(标准)

点击按钮触发一个操作改变按钮的颜色

  • 事件名 点击

  • 执行对象 按钮

  • 处理对象 js引擎

  • 处理函数 改变按钮颜色

事件模式

内联模式(嵌入到标签中)
<!--内联模式相当于直接帮你执行代码,以浏览器本身来执行 window来执行-->
<!--里面直接嵌入代码-->
<button onclick='alert('你好')'>点击弹窗</button>
<!--在里面调用函数,以代码的形式进行执行-->
<button onclick='headerClick()'>点击弹窗</button>
<script>
    function headerClick(){
        alert('你好')
    }
</script>
脚本模式 (分离与标签中)
<button class="btn">脚本模式</button>
    <button class="btn1">脚本模式1</button>
    <script>
        var btn = document.querySelector('.btn')
        btn.onclick = function(){
            console.log('hello world')
            console.log(this)
        }
        document.querySelector('.btn1').onclick = sayHello
        function sayHello(){
            alert('hello')
        }
内联模式与脚本模式区别

  • 内联模式相当于属性赋值 里面的代码是window对象帮你执行的 二脚本模式里面的this执行当前的调用元素

  • 脚本模式看不见调用函数 内联模式是可以直接看见执行的函数

事件名的分类

事件的构成

触发对象.on+事件名=处理函数

鼠标事件

  • 点击事件 click (先按下再弹起 完成一次点击事件)

  • 按下 mousedown

  • 弹起 mouseup

  • 双击事件 dblclick

  • 鼠标移入 mouseenter (不支持事件冒泡)

  • 鼠标移除 mouseleave

  • 鼠标移入 mouseover

  • 鼠标移除 mouseout

  • 鼠标右键 contextmenu

  • 鼠标移动 onmousemover

    冒泡(从里到外 快)和捕获(从外到里)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div{
                width: 150px;
                height: 150px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div>
            <button>按钮</button>
        </div>
        <script>
            var div = document.querySelector('div')
            //点击事件
            div.onclick = function(){
                console.log('点击事件')
            }
            //双击两次才会触发双击事件
            div.ondblclick = function(){
                console.log('双击事件')
            }
            //按下
            div.onmousedown = function(){
                console.log('按下')
            }
            //弹起
            div.onmouseup = function(){
                console.log('弹起')
            }
            //先按下 --再弹起 --再点击
            
            //并不会向下执行 冒泡从下往上(从里到外) 捕获 从下到上(从外到里)
            div.onmouseenter =function(){
                console.log('移入')
            }
            div.onmouseleave = function(){
                console.log('移出')
            }
            //向下执行 冒泡
            div.onmouseover = function(){
                console.log('移入 over')
            }
            div.onmousout = function(){
                console.log('移出 out')
            }
    ​
            div.oncontextmenu = function(){
                console.log('鼠标右键')
            }
            //鼠标移动(动画之类的)
            div.onmousemover = function(){
                console.log('鼠标移动')
            }
            //移动端没有点击事件 只有触发 touch
        </script>
    </body>
    </html>

    注意事项

    执行顺序 mousedown mouseup click

    mouseenter/mouseleave以及mouseover/mouseout 前者不会发生事件冒泡(子元素不会触发) 后者会发生事件冒泡(子元素会触发)

移动端没有点击事件

键盘事件(key)

  • 按下 keydown

  • 弹起 keyup

  • 按下字符键(非功能键) keypress (包含按下和弹起)

    非功能键触发过程 keydown--keypress--keyup

    window.onkeydown = function(){
        console.log('按下')
    }
    window.onkeyup = function(){
        console.log('弹起')
    }
    window.onkeypress = function(){
        console.log('非功能键按下')
    }

HTML事件

window窗口相关事件

  • load 加载事件

  • unload 卸载事件

  • close 关闭

  • beforeunload 卸载之前

  • beforeprint 打印之前

  • error 错误

  • resize 重新设置大小

  • reset 重新设置位置

  • scroll 滚动栏滚动

  • hashchange hash值变化

  • popstate history的state发生变化

  • ....

window.onload = function(){
            console.log('窗口加载的时候触发')
        }
        window.onunload = function(){
            console.log('窗口卸载的时候触发')
        }
        window.onclose = function(){
            console.log('窗口关闭的时候触发')
        }
        //页面卸载之前触发
        window.onbeforeunload = function(){
            console.log('在卸载之前触发')
        }
        window.onbeforeprint = function(){
            console.log('在打印之前触发')
        }
        window.onerror = function(){
            console.log('窗口出错的时候触发')
        }
        window.onresize = function(){
            console.log('窗口课操作空间大小发生变化的时候触发')
        }
        window.onreset = function(){
            console.log('窗口重新设置位置的时候触发')
        }
        window.onscroll = function(){
            console.log('窗口滚动栏发生变化的时候触发')
        }
        window.onhashchange = function(){
            console.log('hash值发生变化的时候触发')
        }
        window.onpopstate = function(){
            console.log('history中的state发生变化的时候触发')
        }
表单相关事件(输入事件)

  • input 输入

  • change value值发生变化

  • focus 获取焦点

  • blur 失去焦点

  • select 内容被选择

  • submit 提交

  • reset 重置

  • ...

<form action="">
        <input type="text">
        <select name="" id="">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button type="reset">重置结果</button>
        <button type="submit">提交</button>
    </form>
    <script>
        var inp = document.querySelector('input')
        var select = document.querySelector('select')
        var textarea = document.querySelector('textarea')
        //输入事件
        inp.oninput = function(){
            console.log('表单输入')
        }
        //必须先失去焦点
        inp.onchange = function(){
            console.log('值变化')
        }
        //value 改变事件
        select.onchange = function(){
            console.log('value发生变化')
        }
        //获取焦点事件
        inp.onfocus = function(){
            console.log('获取焦点')
        }
        inp.oninput = function(){
            console.log('表单输入')
        }
        //失去焦点
        inp.onblur = function(){
            console.log('失去焦点')
        }
        //选中内容触发事件
        inp.onselect = function(){
            console.log('内容选中触发')
        }
        document.forms[0].onsubmit = function(){
            console.log('提交')
        }
        document.forms[0].onreset = function(){
            console.log('重置')
        }
    </script>

event

概述:事件源对象,他包含了事件触发过程中的内容,以及对应的元素内容,他会默认传入给对应的事件的处理函数

处理函数的arguments

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <script>
        var btn = document.querySelector('button')
        btn.onclick = function(e){ //这个参数e就相当于接收的第一个实参
            console.log(arguments)
            console.log(arguments.length) //1 当前的这和处理函数内容只有一个参数,这个参数就是一个event对象
            //pointerEvent对象 这个东西就是事件源的对象
            console.log(arguments[0])//传入的第一个实参
            //这个地方的e就相当于arguments[0]
            console.log(e)
            console.log(e == arguments[0])
            //这个接收的event对象是存在兼容问题的 使用为了防止兼容问题的参生 我们一般会在里面先写对应的兼容
            e == e || window.event //兼容写法   
        }
        //从上述可以得到对应的处理函数会被默认传递一个参数,这个参数就是对应的事件源对象
        //所以我们就可以直接用对应的形参接收实参的方法 通过传递新参e来接收这个对应的实参event
    </script>
</body>
</html>

对应的处理函数的arguments呼传递一个参数 二这个参数就是对应的事件源对象

这个事件源对象一般使用形参e来表示 一般的兼容写法为 e == e || window.event

event对象里面的相关属性

  • type 触发事件的类型 *

  • target 触发的目标元素 *

  • currentTarget 当前加事件的元素 *

  • button 鼠标点击的按钮

  • screenX screenY 获取当前鼠标在屏幕上的位置

  • pageX pageY 获取当前鼠标在页面上的位置（包含滚动栏位置）

  • clientX clientY 获取当前鼠标在可视区的位置 （不包含滚动栏）

  • offsetX offsetY 获取当前鼠标在目标元素上的位置

  • altKey shiftKey ctrlKey 是否按下对应的功能键 *

  • cancelBubble 取消冒泡 *

  • returnValue 是否执行对应的默认行为 *

  • bubbles 是否冒泡 *

 <div>
        <button>按钮</button>
    </div>
    <script>
        var btn = document.querySelector('button')
        btn.onclick = function(e){
            //兼容写法
            e == e || window.event
            console.log(e)
​
            //对应的属性
            console.log(e.type) //获取对应的事件名
            console.log(e.target) //获取对应的事件目标元素 当你执行事件的目标元素
            console.log('按钮出发了')
            console.log(e.currentTarget) //获取当前加事件的元素
            //位置 鼠标点击的位置
            //获取鼠标点击位置的页面坐标 包含滚动栏
            console.log(e.pageX)
            console.log(e.pageY)
            //获取鼠标在页面可视区的位置 不包含滚动栏 加上导航栏的位置
            console.log(e.clientX)
            console.log(e.clientY)
            //ctrlKey shiftKey altKey 是否按着Ctrl键 是否按着shift键  是否按着alt键
            console.log(e.ctrlKey,e.shiftKey,e.altKey)
            //按着 鼠标左键 鼠标滚轮 鼠标右键 0 1 2 
            console.log(e.button)
            //取消冒泡
            console.log(e.cancelBubble) //默认值为false
            //返回的value值 返回true就可以走 返回false就不能走 走不走对应的默认行为
            console.log(e.returnValue) //默认值true
            //是否冒泡
            console.log(e.bubbles)
        }
        //当你点击对应的div里面的按钮的时候 会触发对应的div事件 那么这个事件被称为冒泡
        document.querySelector('div').onclick = function(e){
            console.log('div触发了')
            console.log(e.target) //获取对应的事件的目标元素 如果是按钮触发的话 那么target会指向对应的按钮
            console.log(e.currentTarget) //获取当前加事件的元素
        }
       
    </script>

键盘相关的event属性

  • key按下的键 返回的是字符串

  • keyCode 按下键的ascii码 (返回大写的ascii码 如果是keypress是事件那么返回对应的ascii码)

  • charCode 字符按下键才有的ascii码 如果是给keypress事件那么对应的keyCode和keyCode是一致的

 window.onkeypress = function(e){
            console.log(e)
            //属于键盘事件的属性
            consloe.log(e.key) //按下的键 返回键的字符串
            console.log(e.keyCode) //按下键的ascii码 返回大写的ascii码
            console.log(e.charCode) //字符键按下才有的ascii 如果给keypress事件那么对应的可以Code和charCode是一致的
        }

 

事件委托机制(事件代理)

概述:事件委托机制就是将自己相关的事件委托给对应的父元素去添加,在内部利用对应的target来指向指向元素的特性来进行相关操作

示例

给所有的li添加一个点击事件点击添加背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* ul{
            list-style: none;
        } */
    </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>
    </ul>
    <script>
        //原本的做法 获取所有的li 遍历添加点击事件
        //利用是事件委托 将对应的点击事件委托给对应的父元素 ul
        var ul = document.querySelector('ul')
        ul.onmouseover = function(e){
            e = e || window.event
            //利用e.target来获取对应的执行元素
            if(e.target.tagName = 'li'){
                //排他思想
                //将所有的li颜色变为白色
                for(var li of ul.children){
                    li.style.backgroundColor = '#fff'
                }
                //给li添加背景颜色
                e.target.style.backgroundColor = 'skyblue'
            }
        }
        //应用场景 如果有多个沟共同元素要添加一个事件 那么可以委托他的父元素来进行代理
        //注意事项 如果需要使用事件委托 那么对应的事件一定要支持事件冒泡(利用事件冒泡来完成)
    </script>
</body>
</html>

注意事项

  • 如果需要使用事件委托 那么对应的事件一定要支持事件冒泡(利用事件冒泡来完成)

  • 如果移入移出功能需要添加点击事件委托 那么必须使用mouseover/mouseout 不能使用mouseenter/mouseleave

posted @   vtuiv9  阅读(48)  评论(0)  编辑  收藏  举报
相关博文：
·  day12事件下
·  day08 bom
·  day11 事件相关笔记
·  学习Js-day11
·  day11事件上
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae