(Event) event object in JS

Event object

What is an event object?

The event object is when you trigger an event, some description information of the event
Every event will have a corresponding object to describe this information, we call this object the event object

E.g:

When you trigger a click event, where did you click and what are the coordinates
When you triggered a keyboard event, which button did you press
…

If the mouse triggers the event, you will get the relevant data of the mouse,

If the keyboard triggers the event, you will get the relevant data of the keyboard, and the keyboard event can only be used by the element that can get the focus

Use of event objects

This event object will be automatically generated when the event is triggered, and will automatically follow the parameter transfer of the event function, and will be passed to the function as the actual parameter of the event function, so to use the event object, the function bound to the event needs a formal parameter , This formal parameter to accept the event object. (In the old version, basically look for the event through the window object in the browser, and then get the related object)

Mouse/keyboard event object

Attributes	description
e.altKey	Returns whether "ALT" is pressed when the event is triggered.
e.button	Returns which mouse button was clicked when the event was triggered.
e.clientX	Returns the X coordinate of the mouse relative to the visible area of the browser window when the event is triggered
e.clientY	Returns the Y coordinate of the mouse relative to the visible area of the browser window when the event is triggered
e.pageX	The X coordinate of the mouse relative to the current Document, above IE9
e.pageY	The Y coordinate of the mouse relative to the current Document, above IE9
e.ctrlKey	Returns whether the "CTRL" key is pressed when the event is triggered.
e.Location	Return the position of the button on the device
e.charCode	Returns the letter code of the key value triggered by the onkeypress event.
e.key	The key value of the key when the keyboard is pressed
e.keyCode	The ASCII code of the uppercase letter of the key when the keyboard is pressed
e.which	Returns the character code of the key value triggered by the onkeypress event, or the key code of the onkeydown or onkeyup event.
e.metaKey	Returns whether the "meta" key is pressed when the event is triggered.
e.relatedTarget	Returns the node related to the target node of the event.
e.screenX	Returns the X coordinate of the mouse relative to the computer screen when an event is triggered
e.screenY	Returns the Y coordinate of the mouse relative to the computer screen when an event is triggered
e.shiftKey	Returns whether the "SHIFT" key is pressed when the event is triggered.
e.target	Return the object that triggered the event (standard)
e.srcElement	Return the object that triggered the event (non-standard)
e.type	Returns the event type that triggered the event
e.cancelBubble	This attribute prevents events from bubbling (non-standard)
e.returnValue	This property prevents default events (non-standard)
e.preventDefault()	This method prevents default events (standard)
e.stopPropagation()	This method prevents the event from bubbling (standard)

Note: e.target is the element triggered by the event, this is the binding element of the event, the two cannot be confused!

Instance

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遮罩界面窗口移动</title>
    <!-- css样式 -->
    <style>
        * {
    
    
            margin: 0px;
            padding: 0px;
        }

        .div {
    
    
            width: 100%;
            height: 555px;
            background-color: rgba(156, 159, 161, 0.253);
            display: none;
            padding-top: 200px;
            position: relative;
        }

        .box {
    
    
            width: 300px;
            height: 125px;
            text-align: center;
            padding-top: 25px;
            margin: 0 auto;
            background-color: skyblue;
            border: 1px solid black;
            position: absolute;
            left: 500px;
        }

        button {
    
    
            margin-top: 100px;
            margin-left: 700px;
        }
    </style>
</head>

<body>
    <!-- 点击登录按钮 -->
    <button>点击登录</button>
    <!-- 遮罩界面窗口 -->
    <div class="div">
        <div class="box">
            用户名:<input type="text" placeholder="请输入用户名">
            <br>
            <br>
            密&nbsp;&nbsp;码:<input type="password" placeholder="请输入密码">
            <br>
            <br>
            <input type="button" value="点击登录">
        </div>
    </div>
    <!-- javascript设置效果 -->
    <script>
        // 预加载
        window.onload = function () {
    
    
            // 获取页面元素
            var btn = document.querySelector("button")
            var div = document.querySelector(".div")
            var box = document.querySelector(".box")
            // 为按钮添加点击事件
            btn.onclick = function () {
    
    
                btn.style.display = "none"
                div.style.display = "block"
            }
            // 设置遮罩页面跟随鼠标的位置进行移动
            box.addEventListener("mousedown", fun)
            function fun(e) {
    
    
                var num = e.clientX - box.offsetLeft
                var nume = e.clientY - box.offsetTop
                document.onmousemove = function (e) {
    
    
                    var left = e.clientX - num;
                    var top = e.clientY - nume;
                    box.style.left = left + 'px';
                    box.style.top = top + 'px';
                }
                // 设置鼠标松开以后事件释放
                document.onmouseup = function () {
    
    
                    this.onmousemove = null;
                    this.onmouseup = null;
                }
            }
        }
    </script>
</body>

</html>