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>Event对象属性与方法</title>
    <!-- 
        event;代表事件本身
        event.type;代表事件类型；如：click
        event.target;表示触发事件的源头，通俗理解：点击谁触发了事件，target就是谁
        event.currentTarget;表示包含事件的元素；通俗理解：事件绑定在谁身上，currentTarget就是谁
        event.preventDefault();阻止默认行为；如阻止a标签的链接跳转
        event.stopPropagation();阻止事件冒泡和事件捕获；(翻译propagation：传播/繁殖/蔓延)
        clientX/clientY;触发事件时鼠标位于浏览器窗口的固定X/Y轴坐标，不受滚动条影响；
        pageX/pageY;触发事件时鼠标位于浏览器窗口的X/Y轴坐标，受滚动条影响；
        screenX/screenY;触发事件时鼠标位于屏幕的X/Y轴坐标；
     -->
     <style>
         #div{
             width: 100px;
             height: 60px;
             border: 1px solid black;
         }
         #sec{
             width: 400px;
             height: 1000px;
             background: yellow;
         }
     </style>
</head>
<body>
    <div id="div">
        爸爸<br />
        <button id="btn">儿子</button>
    </div>
    <a id="a" href="https://www.baidu.com/">百度</a><!-- 默认行为：跳转至百度 -->
    <ul id="ul">
        ul
        <li id="li">li1</li>
        <li>li2</li>
    </ul>
    <section id="sec">sec</section>
    <script>
        var div=document.getElementById("div");
        var btn=document.getElementById("btn");
        //event.target/event.currentTarget
        //事件句柄的函数参数默认就是event;可以随便命名（如：function(a))，后续调用可以用参数，也可以直接用event
        div.addEventListener("click",function(){    
            console.log("叫爸爸")
            console.log(event.target);//触发事件的源头；即整个button
            console.log(event.currentTarget);//执行包含事件本身的元素；即整个div
        })
        //event/event.type
        btn.addEventListener("click",function (){
            console.log(event);//事件本身
            console.log(event.type);//事件类型
            
        })
        //event.preventDefault()
        var a=document.getElementById("a");
        a.addEventListener("click",function (){
            event.preventDefault();//阻止了a标签的链接跳转
        })
        //event.stopPropagation()
        var ul=document.getElementById("ul");
        var li=document.getElementById("li");
        ul.addEventListener("click",function (){
            alert("ul");
        });
        li.addEventListener("click",function (){
            alert("li");
            event.stopPropagation();//添加该属性后，触发li事件后停止冒泡，不会再执行ul的事件
        })
        //clientX/clientY; pageX/pageY; screenX/screenY;
        var sec=document.getElementById("sec");
        sec.addEventListener("click",function(){
            console.log(event.clientY);//触发事件时鼠标的屏幕坐标，不受滚动条影响
            console.log(event.pageY);//触发事件时鼠标的浏览器窗口坐标，受滚动条影响
            console.log(event.screenY);//触发事件时鼠标的屏幕坐标
        })
    </script>
</body>
</html>
Event对象属性与方法

猜你喜欢
