js的事件

最新推荐文章于 2024-04-28 10:55:39 发布

2201_75904766

最新推荐文章于 2024-04-28 10:55:39 发布

阅读量104

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/2201_75904766/article/details/128822460

版权

JS的事件
什么是事件？
一个事件的组成

=>触发谁的事件：事件源
=>触发什么事件：事件类型
=>触发后做什么：事件处理函数
bth.onclick = function(){}
触发谁的事件 ->bth ->事件源就是 bth
触发什么事件 -> onclick ->事件类型就是 click(为什么不加上 on，先欠着，后续在解释)
触发后做什么事 -> function(){} ->这个事件的处理函数

常见的事件(了解)
浏览器事件
onload:页面全部资源加载完毕
onscroll：浏览器页面滚动的时候
鼠标事件：

<body>
    <div>
        <div class="box"></div>
    </div>
    <script>
        //0.获取元素
        var oDiv = document.querySelector('div')
        console.log(oDiv)
        //1.左键单击
        oDiv.onclick = function () {
            console.log('单击元素时触发')
        }

        //2.双击事件       300ms  内连续点击两次鼠标
        oDiv.ondblclick = function () {
            console.log('双击元素时触发')
        }
        //3.右键事件
        oDiv.oncontextmenu = function () {
            console.log('鼠标右键单击时触发')
        }
        //4.鼠标按下事件   鼠标左键按下的时候触发(哪怕鼠标没有抬起也会触发)
        oDiv.onmousedown = function () {
            console.log('鼠标按下时触发')
        }

        //5.鼠标抬起事件     鼠标左键抬起的时候触发
        oDiv.onmouseup = function () {
            console.log('鼠标抬起时触发')
        }

        //6.鼠标移入事件  鼠标移入元素的时候触发    注意：移入子级盒子时，也会触发
        oDiv.onmouseover = function () {
            console.log('onmouseover 移入事件触发')
        }

        //7.鼠标移入事件  鼠标移出元素的时候触发    注意：移入子级盒子时，也会触发
        oDiv.onmouseout = function () {
            console.log('onmouseout 移出事件触发')
        }
        //8.鼠标移入事件2  鼠标移入元素的时候触发
        oDiv.onmouseenter = function () {
            console.log('onmouseenter 移入事件触发')
        }

        //9.鼠标移出事件2   鼠标移出元素的时候触发   注意：移出鼠标到盒子时并不会触发
        oDiv.onmouseleave = function () {
            console.log('onmouseleave 移入事件触发')
        }
        //10.鼠标移动事件   鼠标在 oDiv 元素内部  移动的时候会触发
        oDiv.onmousemove = function () {
            console.log('鼠标移动事件触发~~~')
        }
    </script>
</body>

键盘事件
1.document 当前文档
2.input 输入框

 //1.键盘抬起事件
         document.onkeyup = function () {
             console.log('任意按下，一个按钮抬起时会触发')
         }

        //2.键盘按下事件
        document.onkeydown = function () {
            console.log('键盘任意一个按键被按下')
        }

        //3.键盘按下抬起事件
        document.onkeypress = function () {
        console.log('键盘任意按键按下抬起时触发')
        }

表单事件

<body>
    <input type="text">
    <script>
        //0.获取元素
        var inp = document.querySelector('input')

        //1.获取焦点事件
        inp.onfocus = function () {
            console.log('当前文本框获得焦点')
        }

        //2.失去焦点事件
        inp.onblur = function () {
            console.log('当前文本框失去焦点')
        }
        //3.文本框内容改变时触发   触发1次 按下回车才触发
        inp.onchange = function () {
            console.log('当前文本框内容发生改变')
        }
        //4.文本框输入内容时触发  触发多次
        inp.oninput = function () {
            console.log('当前文本框正在输入内容')
        }
    </script>
</body>

什么是事件对象
当触发一个事件以后，对该事件的一些描述信息
比如：
=>鼠标点击时的坐标
=>触发键盘事件时按下的那个按钮

每一个事件都会有一个对象来描述这些信息，我们就把这个对象叫做事件对象

浏览器给我们一个'黑盒子',叫做window.event 就是对事件信息的所有描述

语法：元素.οnclick= function(){
console.log(window.event.X轴的坐标信息)
console.log(window.event.Y轴的坐标信息)
}

缺点：这个东西有兼容性问题，在低版本的IE 里面能用，但在高版本的 IE 和chrome 里面是不好使

所以我们要换一种使用方式：
就是在每一个事件处理函数的形参外置，默认第一个就是事件对象

事件监听

addEventListener
语法：元素.addEventListener('事件类型'，事件处理函数，第三个形参)
第三个形参先欠着，后序会详细讲解，因为有默认值，所以我们

注意：这里的事件类型，全部都一样不需要加 on

执行代码顺序会按照我们的注册的顺序执行(也就是代码书写的顺序)

<body>
    <div></div>
    <script>
        //0.获取元素
        var box = document.querySelector('div')

        box.addEventListener('click', function () {
            console.log('绑定的第一个事件')
        })
        box.addEventListener('click', function () {
            console.log('绑定的第三个事件')
        })
        box.addEventListener('click', function () {
            console.log('绑定的第二个事件')
        })
    </script>
</body>

事件传播
事件传播就是指当一个元素的子节点触发事件时，他的父级节点也会触发相同的事件
也就是说点击子节点就相当于点在了父节点上

例：
点击子盒子，会触发子盒子的点击事件
也是点击在父盒子上也会触发父盒子的点击事件
也是点击在body上也会触发body的点击事件
也是点击在HTML上也会触发HTML的点击事件
也是点击在document上也会触发document的点击事件
也是点击在window上也会触发window的点击事件
页面上任何一个元素触发事件，都会一层一层的导致window的相同事件触发

注意点：
1、只会传播同类事件，如果是点击事件，那么只会触发父级或者父级的父级他们注册的点击事件，其他类型的事件不会触发
2、只会从点击的元素开始，按照HTML的结构逐层向上触发同类型的事件
3、内部元素不管有没有事件，只要上层元素有该事件，那么上层元素的事件就会触发

事件的冒泡与捕获(面试题) 目标
目标：点击在那个元素上，那么这个事件的目标就是这个元素
事件的冒泡与捕获(面试题)
冒泡：就是从目标的事件处理函数开始，依次向上，一直到window的事件处理函数触发
也就是说从下向上执行的代码事件处理函数
捕获：就是从window的事件处理函数开始，依次向下，一直到目标的事件处理函数触发
也就是说从上向下执行的代码事件处理函数
区别：在事件的传播中，多个同类型的事件处理函数的执行顺序不同

使用捕获方式
addEventListener第三个参数就是决定当前传播方式为捕获还是冒泡
默认第三个参数为false,代表方式为冒泡
如果想以捕获的方式传播，那么给第三个参数传递一个true

事件委托
就是要把我自己做的事委托给别人帮我完成

因为我们的冒泡机制，点击元素的时候，也会同步触发元素的相同事件
所以可以把子元素的事件委托给父元素来做
点击子元素的时候，不管子元素有没有点击事件，只要父元素有点击事件，那么就可以触发父元素的点击事件

target
这个属性是事件对象里的属性，表示你点击的目标
这个target 兼容性有问题。在IE浏览器内需要使用 srcELement 语法: e.srcELement(了解即)

事件委托的优点

页面上本身没有Li，通过代码添却了一些Li
这些Li是没有点击事件的。每次动态的添加Li，还需要丛新给Li绑定一次点击事件
这时使用事件委托比较合适
因为:新加进来的li也是ul的子元素，点击的时候也可以触发ul的点击事件

默认行为

默认行为：不用我们注册，但是自己存在的事情
比如：鼠标右键单击，会弹出一个菜单
点击a标签后，自己会跳转到页面

这些不需要我们注册就能实现的事情，我们叫做默认事件

阻止默认事件
不希望浏览器执行默认事件，比如点击a标签不跳转页面，那么就需要阻止默认事件

两种方式：
1.e.preventDefault() ->非IE浏览器
1.e.returnValue=false ->IE浏览器 (了解即可)

2201_75904766

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的事件

1、只会传播同类事件，如果是点击事件，那么只会触发父级或者父级的父级他们注册的点击事件，其他类型的事件不会触发。点击子元素的时候，不管子元素有没有点击事件，只要父元素有点击事件，那么就可以触发父元素的点击事件。冒泡：就是从目标的事件处理函数开始，依次向上，一直到window的事件处理函数触发。捕获：就是从window的事件处理函数开始，依次向下，一直到目标的事件处理函数触发。每次动态的添加Li，还需要丛新给Li绑定一次点击事件。3、内部元素不管有没有事件，只要上层元素有该事件，那么上层元素的事件就会触发。
复制链接

扫一扫