事件对象使用方法大全（源码解析）

清疚 2023-10-03 15:57 4阅读 0赞

## 事件对象使用方法 ##

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

### 事件对象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>事件对象e.target</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);
                console.log(e.currentTarget);
                //currentTarget 事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。
                //在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，它不同于 target 属性。
                // 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>

### 事件对象阻止默认行为 ###

<!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>事件对象阻止默认行为</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 后面的代码不执行了， 而且只限于传统的注册方式
                return false;
                alert(11);
            }
        </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>
        <style>
            .father {
          
                overflow: hidden;
                width: 300px;
                height: 300px;
                margin: 100px auto;
                background-color: pink;
                text-align: center;
            }
    
            .son {
          
                width: 200px;
                height: 200px;
                margin: 50px;
                background-color: purple;
                line-height: 200px;
                color: #fff;
            }
        </style>
    </head>
    
    <body>
        <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 传播  阻止 click 事件冒泡到父元素：
    
                e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
            }, false);
    
    
    
            var father = document.querySelector('.father');
    
            father.addEventListener('click', function () {
          
                alert('father');
            }, false);
    
            document.addEventListener('click', function () {
          
                alert('document');
            })
        </script>
    </body>
    
    </html>