proxy和Object.definePropery；事件循环；父元素，子元素都有事件，点击时只触发父元素事件-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45327886/article/details/143725795
<!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>2024/11/12(tongwei)</title>
    <style>
        span {
            /* 行内元素的上下边距会被忽略 */
            margin: 200px;
        }
        
        .parent{
            width:200px;
            height: 200px;
            background-color: pink;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <span>
        行内元素外边距（上下边距会被忽略，左右边距正常！！！）
    </span>
    <p>点击时只触发 父元素的点击事件</p>
    <div class="parent">
        <div class="son"></div>
        父元素捕获 click事件，stopPropagation()阻止事件冒泡
    </div>
    <div>
        事件循环机制：先同步执行完，再执行异步；异步代码按照时间执行的先后顺序放入栈中（时间越短越放在前面），放入到对应的 事件线程，定时器线程，异步线程，GUI线程中；
        这些线程中的异步事件到执行时机时放入 任务队列里面（按照先微任务后宏任务排序），js主线程不停循环 任务队列里面是否有事件需要执行
    </div>
    <div>
        proxy优点：代理的数据可以是 对象，数组，函数等；
                  不会改变原来的对象
            proxy常用api: 
                数据处理：get(target,propKey,receiver)：拦截对象属性的读取  
                         set(target,propKey,value,receiver): 拦截对象的属性设置 
                         has(target,propKey,receiver): 是否有某个属性 
                         deleteProperty(target,propKey,receiver):删除某个属性 
                         preventExtensible(target,receiver):是否可以扩展
                         isExtensible(target,receiver):是否可以添加属性
                遍历：ownKeys(target,receiver):返回对象所有属性
                原型：getPrototypeOf(target,receiver):返回对象的原型
                     setPrototypeOf(target,receiver):设置对象的原型
                属性设置：setPropertyDescriptor(target,propKey,receiver):设置属性描述符
                         defineProperty(target,propKey,receiver):定义属性描述符 
        Object.defineProperty:只可以监听对象（对于数组重写了对应的方法，才可以监听到）
                后添加的属性值无法监听 
                会修改原来的对象 
    </div>
</body>
<script>
    window.onload=() => {
        const parent = document.getElementsByClassName('parent')[0]
        const son = document.getElementsByClassName('son')[0]
        //实现功能：点击时只触发 父元素的点击事件
        //父元素捕获 click事件，stopPropagation()阻止事件冒泡:不触发子元素的click事件；子元素的其他事件依然可以触发
        parent.addEventListener('click', (event) => {
            console.log("click parent")
            event.stopPropagation()
        },
        //捕获阶段触发点击事件
        true)
        son.addEventListener('click', (event) => {
            console.log("click son")
        })
        son.addEventListener('mouseenter',()=>{
            console.log('mouseenter son')
        })
    }

</script>

</html>