day47—JavaScript mouse events

Change career development, code 100 days - 2018-05-02

1. Event object

The event object in JavaScript is usually represented by the definition variable ev or event. In order to take into account browser compatibility issues, define the event object as

var oEvent = home||event;

2. Mouse events

 

Mouse events usually get the mouse click position clientX;clientY

Mouse move event: onmousemove;

Mouse click event: onmousedown;

Mouse up event: onmouseup;

Such as setting up a mouse follow program:

Objects move with the mouse.

<!DOCTYPE html>
<html>
<head>
    <title>javascript mouse events</title>
    <style type="text/css">
        #div1{width: 100px;height: 100px;background: red;position: absolute;}
    </style>
    <script type="text/javascript">
        document.onmousemove = function(ev)
        {
            var oEvent = ev||event;
            var  oDiv = document.getElementById("div1");
            var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
            oDiv.style.left = oEvent.clientX+"px";
            oDiv.style.top = oEvent.clientY+scrollTop+"px";
        }
    </script>
</head>
<body style="height: 2000px;">
<div id="div1"></div>
</body>
</html>

3. Event Bubbling

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325340527&siteId=291194637