JavaScript-筑基（十五）事件对象属性方法-CSDN博客

本文详细介绍了事件对象的各种属性和方法，包括如何使用 e.target 和 e.srcElement 获取触发事件的对象，如何利用 e.type 获取事件类型，以及如何通过 e.preventDefault() 和 e.stopPropagation() 阻止默认事件和事件冒泡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件对象属性方法
e.target	返回触发事件的对象
e.srcElement	返回触发事件的对象（ie6-8）
e.type	返回事件的类型如click、mouseover
e.cancelBubble	该属性阻止冒泡（ie6-8）
e.returnValue	该属性阻止默认事件（ie6-8）
e.preventDefault()	该方法阻止默认事件（标准）
e.stopPropagation	阻止冒泡（标准）

this和e.target的区别：this返回的是绑定事件的对象（元素）e.targe返回的是触发事件的对象

   <ul>
        <li>poi</li>
        <li>ads</li>
        <li>ddd</li>
    </ul>
     <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(e) {//假如点击了第一个li
            console.log(this);//返回ul
            console.log(e.target);//返回li
        })   
     </script>

阻止默认行为

<a href="http://www.baidu.com">百度</a>
     <script>
         //  阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
         var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
                e.preventDefault(); //  dom 标准写法
            })
            a.onclick = function(e) {
            // 利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
            return false;
            alert(11);
        }

阻止事件冒泡

事件冒泡：开始由最具体的元素接收，然后逐级向上传播到DOM最顶层节点。

<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 传播
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
        //最后只弹出son

ie已经gg了多看两个都是折磨