JS DOM 事件

企业开发 2023-09-06 21:10:19 阅读次数: 0

1.事件概述

  1. 给元素添加事件，称为注册事件或者绑定事件
  2. 注册事件有两种方式：传统方式和方法监听注册方式
  • 传统注册方式：
    1. onclick
    2. 特点：注册事件的唯一性
    3. 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数
  • 方法监听注册事件
    1. w3c标准推荐方式
    2. addEventListener()方法
    3. IE9之前的IE不支持此方法，可使用attachEvent()代替
  1. DOM事件流
  • 事件流描述的是从页面种接收事件的顺序
  • 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
  • DOM事件流分为3个阶段
    1. 捕获阶段
    2. 当前目标阶段
    3. 冒泡阶段
  • 注意：
    1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
    2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
    3. 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> document
    4. 实际开发种很少使用事件捕获，更关注事件冒泡
    5. 有些事件是没有冒泡的，比如 onblur onfocus onmouseenter onmouseleave
    6. 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件

2.注册事件的两种方式

2.1 传统方式注册事件

2.2 事件监听注册事件 addEventListener

(1)里面的事件类型是字符串 必定加引号 而且不带on
(2) 同一个元素 同一个事件可以添加多个监听器（事件处理程序）

2.3 attachEvent ie9以前的版本支持

<!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>
    <button>方法监听注册事件</button>
    <button>attachEvent</button>
    <script>
        var btns = document.querySelectorAll('button');
        //1.传统方式注册事件
        btns[0].onclick = function(){
      
      
            alert('hi');
        }
        btns[0].onclick = function(){
      
      
            alert('how are you');
        }
        //2.事件监听注册事件 addEventListener 
        
        btns[1].addEventListener('click',function(){
      
      
            alert(22);
        })
        btns[1].addEventListener('click',function(){
      
      
            alert(44);
        })
        //3.attachEvent ie9以前的版本支持
        btns[2].attachEvent('onclick',function(){
      
      
            alert(11);
        })
    </script>
</body>
</html>

3.删除事件

3.1 传统方式删除事件

3.2 removeEventListener 删除事件

3.3 detachEvent

<!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: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function(){
      
      
            alert(11);

            //1.传统方式删除事件
            divs[0].onclick = null;
        }
        // 2. removeEventListener 删除事件
        divs[1].addEventListener('click',fn)//里面的fn 不需要调用加小括号
        function fn(){
      
      
            alert(22);
            divs[1].removeEventListener('click',fn);
        }
        // 3. detachEvent
        divs[2].attachEvent('onclick',fn1);
        function fn1(){
      
      
            alert(33);
            divs[2].detachEvent('onclick',fn1);
        }
    </script>
</body>
</html>

4.事件对象

  1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
  2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
  3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
  4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
  5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法 e = e || window.event;
<!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: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>123</div>
    <script>
        //事件对象
        var div = document.querySelector('div');
        div.onclick = function(e){
      
      
            console.log(e);
            console.log(window.event);
            e = e || window.event;
            console.log(e);
        } 
        /* div.addEventListener('click',function(e){
            console.log(e);
        }) */
    </script>
</body>
</html>

5. 事件对象e.target

<!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: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        // 常见事件对象的属性和方法
        // 1.e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）
        // 区别：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);
        // }
        // 2.了解 跟this 有个非常相似的属性 currentTarget  ie678不认识
    </script>
</body>
</html>

6.事件对象阻止默认行为

<!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>

    </style>
</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);
        }
        // 2.阻止默认行为(事件) 让链接不跳转 或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click',function(e){
      
      
            e.preventDefault();//dom标准写法
            
        })
        //3.传统的注册方式
        a.onclick = function(e){
      
      
            // 普通浏览器 e.preventDefault();方法
            // e.preventDefault();
            // 低版本浏览器 ie678 returnValue 属性
            // e.returnValue;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题
            return false;
            alert(11);
        }
    </script>
</body>
</html>

7.阻止事件冒泡

 <div class="father">
        <div class="son">son儿子</div>
    </div>
    <script>
        // 常见事件对象的属性和方法
        // 阻止冒泡  dom 推荐的标准 stopPropagation() 
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
      
      
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 传播
            e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
        }, false);
    </script>

8.事件委托

  • 事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
  • 通过设置ul的侦听，再通过事件冒泡，可以影响li
<script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(e){
      
      
            //alert('知否知否，时刻提防');
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>

9.常见鼠标事件

<script>
        //1.contextmenu 可以禁用右键菜单
        document.addEventListener('contextmenu',function(e){
      
      
            e.preventDefault();
        })
        //2.禁止选中文字 selectstart
        document.addEventListener('selectstart',function(e){
      
      
            e.preventDefault();
        })
    </script>

10.鼠标事件对象

<script>
        //鼠标事件对象 MouseEvent
        document.addEventListener('click',function(e){
      
      
            // 1. client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
        })
    </script>

11.常见的键盘事件

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

12.键盘事件keyCode属性

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

猜你喜欢

转载自blog.csdn.net/crush_oo/article/details/124986895
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022