web前端—前端三剑客之JS(15)：BOM之事件类型、鼠标事件、键盘事件

最新推荐文章于 2024-03-06 09:00:00 发布

觅远

最新推荐文章于 2024-03-06 09:00:00 发布

阅读量469

点赞数

文章标签： js javascript dom

本文链接：https://blog.csdn.net/JBY2020/article/details/118559458

版权

鼠标键盘事件：https://blog.csdn.net/JBY2020/article/details/110148757

三种事件类型

事件绑定

Obj.on+事件名称=function(){}

特点：

事件绑定同一个对象只能给同一个事件绑定唯一一个事件处理函数.如果绑定第二个,第一个会被清除掉.因为本质上只是给对象的on事件属性上添加了一个函数
事件绑定函数得this指向当前调用(触发)事件的主体对象(元素)
在绑定事件之前, 事件属性的处理函数默认是null
清除事件的方式只需要将此事件的触发函数改成null

on这种方式绑定的事件是DOM 0级事件：

优点: 兼容所有的浏览器，因为它是最原始的事件，js出来的那一天事件都是这么绑定的。
缺点: 这种绑定事件的方法，一个对象只能绑定一个事件，不能绑定多个事件。

事件监听

Obj.addEventListener(“事件名称”,function(){},布尔值)

事件监听接受两个参数( 三个 ) 第一个是需要监听的事件类型, 第二个是事件的触发的回调函数, 第三个是是否事件冒泡
事件类型不需要加on+事件类型,直接事件类型即可.
一次可以绑定多个事件, 相互之间不影响.并且触发顺序就是绑定顺序
事件监听处理函数得this指向当前调用(触发)事件的主体对象
取消事件监听用对应的方式,removeEventListener,传入的参数要和添加的参数完全一致

事件的监听方式是DOM2级事件

有名函数是可以直接取消绑定事件，但是匿名事件处理函数是没法取消绑定事件的

addEventListener不兼容低版本的IE浏览器，在低版本的IE浏览器中使用: attachEvent和deleteEvent

事件委托

当我们需要绑定事件的时候，需要给事件添加绑定或者监听，当事件触发的时候，我们会对事件的主体进行操作。但如果有大量dom对象需要绑定事件，并且事件的处理函数是同一个时就需要使用事件委托。通过监听公共父元素的形式监听事件。

<!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>
    <div style="width: 300px;height: 300px;background-color: chartreuse;" class="box1">
        <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>
    </div>
    <script>
        let ul = document.querySelector('ul');
        let li = document.querySelectorAll('li');
        function fn(ev) {
            if (ev.target.localName == 'li'){
                console.log(ev.target.innerText);
            } 
        }
        ul.addEventListener('mousemove',fn);
    </script>
</body>
</html>

在事件处理函数fn中, 咱们可以通过事件对象来进行识别和判断触发事件的对象,从而达到事件处理的目的。识别触发事件的对象是用e.target（当前触发函数的DOM对象）来控制的。比如：再一个DOM结构中有ul>li*100这样的结构，我们对ul进行监听，比如鼠标移入事件。当我们将鼠标移动到ul下面的li时，会触发ul的鼠标移入事件(因为li是在ul中，所以也会触发。事件捕捉)。然后对此事件的target与自己设定的目标元素进行判断, 是否符合要求。

鼠标事件

焦点事件

blur：在元素失去焦点时触发。这个事件不会冒泡；
focus：在元素获得焦点时触发。这个事件不会冒泡；
focusin：在元素获得焦点时触发。这个事件与HTML 事件focus 等价，但它会冒泡
focusout：在元素失去焦点时触发。这个事件是HTML 事件blur 的通用版本。

当焦点从页面中的一个元素移动到另一个元素，会依次触发下列事件：

(1) focusout 在失去焦点的元素上触发； (2) focusin 在获得焦点的元素上触发； (3) blur 在失去焦点的元素上触发； (4) focus 在获得焦点的元素上触发；

<!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>
    <div style="width: 300px;height: 300px;background-color: chartreuse;" class="box1">
        <input class="ip1" type="text" style="width: 100px;" placeholder="请输入用户名">
        <input class="ip2" type="text" style="width: 100px;" placeholder="请输入密码">
    </div>

    <script>
        var box1 = document.querySelector('.box1');
        var ip1 = document.querySelector('.ip1');
        var ip2 = document.querySelector('.ip2');
  
        // ip1.addEventListener(
        //     'blur',function (ev) {
        //         console.log('1获得焦点');
        //         console.log(ev);
        //     }
        // )
        ip1.addEventListener(
            'focusin',function (ev) {
                console.log('1获得焦点');
            }
        )
        ip1.addEventListener(
            'focusout',function (ev) {
                console.log('1失去焦点');
            }
        )
        ip2.onfocus = function () {
            console.log('2获得焦点');
        }
        ip2.onblur = function () {
            console.log('2失去焦点');
        }
    </script>
</body>
</html>

点击及移动事件

见：https://blog.csdn.net/JBY2020/article/details/110148757

参考：https://mp.weixin.qq.com/s?src=11&timestamp=1625899029&ver=3181&signature=mvDKn*VpuNce7oL2aonV6s7mCXUc8rSXDcE-3JpCK9hOXnsH2zvgxmYanLBhmuCtP7CUfZFeG-Tn5fQXUHmMkyMvwqB4GbMqETDDVgpD3SzL7KAFHm-ojNpiepQkWMAL&new=1

点击事件

click：按下鼠标（通常是按下主按钮）时触发。
dblclick：在同一个元素上双击鼠标时触发。
mousedown：按下鼠标键时触发。
mouseup：释放按下的鼠标键时触发。
mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次。
mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件（详见后文）。
mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件（详见后文）。
mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件（详见后文）。
mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件（详见后文）。
contextmenu：按下鼠标右键时（上下文菜单出现前）触发，或者按下“上下文菜单键”时触发。

说明：

click事件指的是，用户在同一个位置先完成mousedown动作，再完成mouseup动作。因此，触发顺序是，mousedown首先触发，mouseup接着触发，click最后触发。
dblclick事件则会在mousedown、mouseup、click之后触发。
mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。

复合事件

在按下鼠标时键盘上的某些键的状态也可以影响到所要采取的操作。这些修改键就是Shift、Ctrl、Alt 和Meta（在Windows 键盘中是Windows 键，在苹果机中是Cmd 键），它们经常被用来修改鼠标事件的行为。 DOM 为此规定了4 个属性，表示这些修改键的状态：shiftKey、ctrlKey、altKey 和metaKey。这些属性中包含的都是布尔值，如果相应的键被按下了，则值为true，否则值为false。当某个鼠标事件发生时，通过检测这几个属性就可以确定用户是否同时按下了其中的键。

<!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>
    <div style="width: 300px;height: 300px;background-color: chartreuse;" class="box1"></div>
    <script>
        var box1 = document.querySelector('.box1');
        // 复合事件
        box1.ondblclick = function (ev) {
            if (ev.ctrlKey){
                console.log(ev);
                this.style.width = '500px';    // 双击并且ctrl键被按下修改元素属性
            } 
        }
    </script>
</body>
</html>

滚轮事件

键盘事件

用户在使用键盘时会触发键盘事件,有3 个键盘事件，简述如下：

keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。按下Esc 键也会触发这个事件。
keyup：当用户释放键盘上的键时触发。

虽然所有元素都支持以上3 个事件，但只有在用户通过文本框输入文本时才最常用到。然后就是一些个网页游戏上。

在用户按了一下键盘上的字符键时，首先会触发keydown 事件然后紧跟着是keypress 事件，最后会触发keyup 事件。其中，keydown 和keypress 都是在文本框发生变化之前被触发的；而keyup事件则是在文本框已经发生变化之后被触发的。如果用户按下了一个字符键不放，就会重复触发keydown 和keypress 事件，直到用户松开该键为止。

如果用户按下的是一个非字符键: 那么首先会触发keydown 事件，然后就是keyup 事件；如果按住这个非字符键不放，那么就会一直重复触发keydown 事件，直到用户松开这个键，此时会触发keyup事件。

键码

keyCode属性: 在发生keydown 和keyup 事件时，event 对象的keyCode 属性中会包含一个代码，与键盘上一个特定的键对应。对数字字母字符键，keyCode 属性的值与ASCII 码中对应小写字母或数字的编码相同。因此，数字键7 的keyCode 值为55，而字母A 键的keyCode 值为65——与Shift 键的状态无关。
code属性: 按键的英文名称
key属性:按下的是什么键

键码表

觅远

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端—前端三剑客之JS(15)：BOM之事件类型、鼠标事件、键盘事件

鼠标键盘事件：https://blog.csdn.net/JBY2020/article/details/110148757目录三种事件类型事件绑定事件监听事件委托鼠标事件焦点事件点击及移动事件滚轮事件键盘事件键码表三种事件类型事件绑定Obj.on+事件名称=function(){}特点：事件绑定同一个对象只能给同一个事件绑定唯一一个事件处理函数.如果绑定第二个,第一个会被清除掉.因为本质上只是给对象的on事件属性上添加了一个函数事.
复制链接

扫一扫