js-事件高级

最新推荐文章于 2022-09-26 20:29:59 发布

前端笨鸟

最新推荐文章于 2022-09-26 20:29:59 发布

阅读量200

点赞数

分类专栏： js学习笔记文章标签： js

本文链接：https://blog.csdn.net/qq_41670147/article/details/103262907

版权

js学习笔记专栏收录该内容

24 篇文章 6 订阅

订阅专栏

注册事件（绑定事件）

1.1注册事件概述
给元素添加事件，称为注册事件或者绑定事件。
注册事件有俩种方式：传统方式和方法监听注册方式
传统注册事件
● 利用on开头的事件 onclick
● <button onclick="alert('hi~')"></button>
● btn.οnclick=function(){};
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
方法监听注册方式
●w3c标准（推荐方式）
● addEventListener()是一个方法。注意：IE9之前的IE不支持此方法，可使用attachEvent()代替。
特点：同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行。
1.2 addEventListener事件监听方式

eventTarget.addEventListener(type, listener[, useCapture])

eventTarget.addEventListener()方法将制定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的时间时，就会执行时间处理函数。
该方法接受三个参数：
● type：时间类型字符串，比如click、mouseover，注意这里不要带on
● Listener：事件处理函数，事件发生时，会调用该监听函数
● useCapture：可选参数，是一个布尔值，默认是false。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</he**加粗样式**ad>

<body>
    <button>方法监听注册事件</button>
    <script>
        var btn = document.querySelector('button');
        //事件侦听注册事件
        //(1) addEventListener里面的事件类型是字符串，注意加引号，而且不带on
        //(2) 同一个元素同一个事件可以添加多个侦听器（事件处理程序）
        btn.addEventListener('click', function() {
            alert(22);
        })
        btn.addEventListener('click', function() {
            alert(33);
        })
    </script>
</body>

</html>

2、删除事件（解绑事件）

2.1删除事件的方式
1、传统注册方式

eventTarget.onclick=null;

2、方法监听注册方式

eventTarget.removeEventListener(type,lisener[, useCapture]);

具体使用：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: tomato;
            text-align: center;
            line-height: 100px;
            border-bottom: 1px solid #fff;
            color: #fff;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
            alert(11);
            //传统方式删除事件
            divs[0].onclick = null;
        };
        //removeEventListener 删除事件
        divs[1].addEventListener('click', fn);

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
    </script>
</body>

</html>

3.DOM事件流

事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
DOM事件流分为3个阶段：
1、捕获阶段
2、当前目标阶段
3、冒泡阶段
● 事件冒泡：IE最早提出，事件开始时由最具体的元素接受，然后逐级向上传播到DOM最顶层节点的过程。
● 事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。
在这里插入图片描述
注意：
1.JS代码中只能执行捕获或者冒泡其中的一个阶段
2.onclick和attachEvent只能得到冒泡阶段
3.addEventListener(type,listener[,useCapture])第三个参数如果是true,表示在事件捕获阶段调用事件处理程序；如果是false(不写默认为false)，表示在事件冒泡阶段调用事件处理程序。
4.实际开发中很少使用事件捕获，更关注时间冒泡
5.有些事件是没有冒泡的，比如onblur、onfocus、onmouseover、onmouseleave
6.事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: darkorange;
            margin: 200px auto 0;
            padding: 50px;
        }
        
        .son {
            width: 200px;
            height: 200px;
            background: crimson;
            font-size: 28px;
            color: #fff;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        //dom 事件流 三个阶段
        //1.JS代码中只能执行捕获或者冒泡其中的一个阶段
        //2.onclick只能得到冒泡阶段
        //3.捕获阶段如果addEventListener第三个参数是true那么则处于捕获阶段document->html->body->father->son
        // var son = document.querySelector('.son');
        // son.addEventListener('click', function() {
        //     alert('son')
        // }, true)
        // var father = document.querySelector('.father');
        // father.addEventListener('click', function() {
        //     alert('father')
        // }, true);
        //输出结果先弹出father，再弹出son
        //4.冒泡阶段 如果addEventListener第三个参数是false或者省略不写，则处于冒泡阶段son->father->body->html->document
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son')
        }, false)
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father')
        }, false);
        //输出结果先弹出son，再弹出father
    </script>

</body>

</html>

事件对象

4.1什么是事件对象**

eventTarget.onclick = function(event) {}
eventTarget.addEventListener('click', function(event){})
//event 就是事件对象，在实际开发中一般比较喜欢写成e或者evt

官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态
简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

4.2事件对象的使用语法

eventTarget.onclick = function(event){
	//event就是时间对象，比较喜欢写成e或者evt
}
eventTarget.addEventListener('click', function(event){
	//event就是时间对象，比较喜欢写成e或者evt
})

event是个形参，系统帮忙设定为事件对象，不需要传递实参过去。
当注册事件时，event对象就会被系统自动创建，并以此传递给事件监听器（事件处理函数）

4.3事件对象本身的获取存在兼容问题：

1.在标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获取到。
2.在IE6~8中，浏览器不会给方法传递参数，如果需要的话，需要到window.event中获取查找。
解决：
e = e || window.event;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: deeppink;
            color: #fff;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div>123</div>
    <script>
        var div = document.querySelector('div');
        // div.onclick = function(event) {
        //     console.log(event);

        // };
        div.onclick = function(e) {
           // console.log(e);
            //支持ie678写法
           // console.log(window.event);
            //兼容性写法
            e = e || window.event;
            console.log(e);
        };
        //1.event 是一个事件对象，写到侦听函数的小括号里面，当形参来看
        //2.事件对象只有有了事件才会存在，它是系统自动创建的，不需要专递参数
        //3.事件对象是事件的一系列相关数据的集合，跟事件相关的比如鼠标点击里面就包含了鼠标的相关信息及鼠标坐标。如果是键盘事件里面包含的键盘事件的信息，例：判断用户按下那个键。
        //4.事件对象也可以自命名，例如：event、evt、e，一般情况下用e较多
        //5.事件对象也有兼容性问题ie6、7、8不支持，需要通过window.event，兼容性的写法e = e || window.event;
    </script>
</body>

</html>

4.4事件对象的常见属性和方法

事件对象属性方法	说明
e.target	返回触发事件的对象（标准）
e.srcElement	返回触发事件的对象（非标准_E6~8使用）
e.type	返回事件的类型比如click、mouseover，注意不带on
e.stopPropagation	阻止冒泡（标准）
e.cancelBubble	该属性组织冒泡（非标准 IE6~8使用）
e.returnValue	该属性阻止默认事件（默认行为）非标准IE~8使用，例如：不让链接跳转
e.prevenDefault	该方法阻止默认事件（默认行为）标准，例如：不让链接跳转

e.target返回触发事件的对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>

<body>
    <div>234</div>
    <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <script>
        //常见事件对象的属性和方法
        //1、e.target返回的是触发事件的对象（元素），this返回的是绑定事件的对象（元素）
        //2、区别：e.target点击了那个元素，就返回那个元素，this那个元素绑定了点击事件，就返回那个元素
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);

        });
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            //给ul绑定了事件，那么this就指向ul
            console.log(this);
            //e.target指向点击的对象，谁触发指向谁，点击的是li，e.target指向的就是li
            console.log(e.target);
        });
        //注意以上方法有兼容性问题，解决方法(了解)
        div.onclick = function(e) {
            e = e || window.event;
            var target = e.target || e.srcElement;
            console.log(target);

        }
    </script>
</body>

</html>

e.type返回事件的类型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>123</div>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        //常见事件对象的属性和方法
        //1、返回事件类型
        var div = document.querySelector('div');
        div.addEventListener('click', fn);
        div.addEventListener('mouseover', fn);
        div.addEventListener('mouseout', fn);

        function fn(e) {
            console.log(e.type);

        }
    </script>
</body>

</html>

e.prevenDefault 阻止默认行为（事件）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>123</div>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        //阻止默认行为（事件）放链接不跳转或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
            e.preventDefault(); //dom  标准写法
        });
        //传统方式
        a.onclick = function(e) {
            //普通浏览器 e.preventDefault(); 方法
            e.preventDefault();
            //低版本浏览器ie678 returnValue 属性
            e.returnValue;
            //以上均有兼容性问题，可以利用return false阻止默认行为且无兼容性问题。特点：return后面的代码不执行而且只限于传统的注册方式onclick,暂不支持addEventListener
            return false;
        }
    </script>
</body>

</html>

阻止事件冒泡

阻止事件冒泡的俩种方式

事件冒泡：开始时由最具体的元素接受，然后逐级向上传播到DOM最顶层节点。
事件冒泡本身的特性，会带来一定的坏处，也会带来一定好处，需要灵活掌握。
阻止冒泡事件
标准写法：利用事件对象里面的stopPropagation()方法

e.stopPropagation();    //stop 停止  Propagation传播

非标准写法：IE6-8利用事件对象cancelBubble属性

e.cancelBubble = true;  //非标准 cancel取消  bubble泡泡

具体使用：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: darkorange;
            margin: 200px auto 0;
            padding: 50px;
        }
        
        .son {
            width: 200px;
            height: 200px;
            background: crimson;
            font-size: 28px;
            color: #fff;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        //dom 事件流 三个阶段
        //1.JS代码中只能执行捕获或者冒泡其中的一个阶段
        //2.onclick只能得到冒泡阶段
        //3.捕获阶段如果addEventListener第三个参数是true那么则处于捕获阶段document->html->body->father->son
        // var son = document.querySelector('.son');
        // son.addEventListener('click', function() {
        //     alert('son')
        // }, true)
        // var father = document.querySelector('.father');
        // father.addEventListener('click', function() {
        //     alert('father')
        // }, true);
        //输出结果为弹出son
        //4.冒泡阶段 如果addEventListener第三个参数是false或者省略不写，则处于冒泡阶段son->father->body->html->document
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
            e.stopPropagation(); //标准
            e.cancelBubble = true; //非标准 IE6~8
        }, false)
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
            e.stopPropagation(); //标准
        }, false);
        //输出结果弹出father
    </script>

</body>

</html>

5.2阻止事件冒泡的兼容性解决方案

if (e && e.stopPropagation) {
                e.stopPropagation();
} else {
    window.event.cancelBubble = true;
}

6、事件委托（代理、委派）

事件委托
事件委托也成为事件代理，在jQuery里面称为事件委派。
事件委托的原理
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
例如：ul、li的案例，给ul注册（绑定）点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。
事件委托的作用
只操作一次DOM，提高了程序的性能。
案例：高亮效果，滑过变色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>你好你好，选我变色</li>
        <li>你好你好，选我变色</li>
        <li>你好你好，选我变色</li>
        <li>你好你好，选我变色</li>
        <li>你好你好，选我变色</li>
        <li>你好你好，选我变色</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('mouseover', function(e) {
            e.target.style.backgroundColor = 'pink';
        });
        ul.addEventListener('mouseout', function(e) {
            e.target.style.backgroundColor = '';
        })
    </script>
</body>

</html>

案例：选中变色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>你好你好，点我变色</li>
        <li>你好你好，点我变色</li>
        <li>你好你好，点我变色</li>
        <li>你好你好，点我变色</li>
        <li>你好你好，点我变色</li>
        <li>你好你好，点我变色</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        // ul.addEventListener('mouseover', function(e) {
        //     e.target.style.backgroundColor = 'pink';
        // });
        // ul.addEventListener('mouseout', function(e) {
        //     e.target.style.backgroundColor = '';
        // })
        ul.addEventListener('click', function(e) {
            for (var i = 0; i < lis.length; i++) {
                lis[i].style.backgroundColor = '';
            }
            e.target.style.backgroundColor = 'pink';
        });
    </script>
</body>

</html>

7、常用的鼠标事件

7.1常用的鼠标事件

1.禁止鼠标右键菜单
contextmenu主要控制应该合适显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu', function(e){
e.preventDefault();
})

2、禁止鼠标选中（selectstart开始选中）

 document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })

具体使用：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>哈哈哈哈，右击被禁止了吧！！！！</div>
    <div>哈哈哈哈，选中也被禁止了吧！！！！</div>
    <script>
        //1、contextmenu 禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
            })
            //2、禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })
    </script>
</body>

</html>

7.2鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段主要是用鼠标事件做mouseEventnt和监盘事件对象keyboardEvent。

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标 IE9+ 支持
e.clientY	返回鼠标相对于文档页面的Y坐标 IE9+ 支持
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            height: 1000px;
        }
    </style>
</head>

<body>
    <script>
        document.addEventListener('click', function(e) {
            //1、client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            //2、page鼠标在可视区的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            //3、screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
        })
    </script>
</body>

</html>

常用的键盘事件

8.1常用键盘事件

事件除了使用鼠标触发，还可以使用键盘触发。

键盘事件（传统）	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发但是不识别功能键比如ctrl shift 箭头等

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        //常用的键盘事件 
        // 1、keyup 按键弹起的时候触发
        //传统写法：
        // document.onkeyup = function() {
        //     console.log('我弹起来了');

        // }

        document.addEventListener('keyup', function() {
            console.log('我弹起了');
        });
        //keydown 按键按下的时候触发
        document.addEventListener('keydown', function() {
            console.log('我按下了');
        });
        //keypress 按键按下的时候触发  不识别功能键比如ctrl、shift、左右箭头等
        document.addEventListener('keypress', function() {
            console.log('我按下了');
        });
        //三个事件的执行顺序：keydown----keypress----keyup
    </script>


</body>

</html>

注意：
1、如果使用addEventListener不需要加on
2、onkeypress和前面2个的区别是，不识别功能键，比如左右箭头、ctrl、shift等
3、三个事件的执行顺序是：keydown----keypress----keyup

8.2键盘事件对象

键盘事件对象属性	说明
keyCode	返回该键的ASCII值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        //键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        //1、我们的keyup和keydown事件不区分滋补大小写 a 和 A 得到的都是65
        //2、我们的keypress事件区分字母大小写 a 97 和 A 得到的是65
        document.addEventListener('keyup', function(e) {
            console.log('up：' + e.keyCode);
            //可以利用keycode返回的ASCII码值来判断用户按下了那个键
            if (e.keyCode === 65) {
                alert('您按下的a键');
            } else {
                alert('您没有按下a键')
            }
        })
        document.addEventListener('keypress', function(e) {
            console.log('press：' + e.keyCode);

        })
    </script>
</body>

</html>

注意：onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写。在实际开发中，更多的使用keydown和keyup，它能识别所有的键（包括功能键）Keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值。

前端笨鸟

关注

0
点赞
踩
0

收藏

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

注册事件（绑定事件）1.1注册事件概述给元素添加事件，称为注册事件或者绑定事件。注册事件有俩种方式：传统方式和方法监听注册方式传统注册事件● 利用on开头的事件 onclick● <button onclick="alert('hi~')"></button>● btn.οnclick=function(){};特点：注册事件的唯一性同一个元素同一个事件只...
复制链接

扫一扫