JS_11

2021-10-17 15:04:11 作者：互联网

一、事件对象

概述：事件对象（event），任意节点树上的节点都可以绑定一个或者多个事件，当用户触发事件的时候，系统会自动会事件处理函数传递实参，而这个参数即为事件对象。

<script>
    var div = document.querySelector("div");
    div.onclick = function(event){
        //对于高级浏览器（谷歌 IE8以上的浏览器）------>event
        //对于低级浏览器（IE7以下的浏览器）------>有兼容性问题，因此用短路语法来获取event
        var e = event || window.event;
        console.log(e);
    }
</script>

//当事件处理函数执行的时候，系统会自动注入实参，我们用形参接收【事件对象】

1.1、获取鼠标位置

1.1.1 screenX || screenY

概述：它们是event的属性，能获取到鼠标在屏幕中的位置，其原点是显示屏的左上角，跟网页左上角无关

1.1.2、pageX || pageY

概述：它们是event的属性，也能获取到鼠标在屏幕中的位置，但是原点在网页主题的左上角，不会随着网页的向下滚动而改变，固定在左上角

1.1.3、clientX ||clientY

概述：它们是event的属性，也能获取到鼠标在屏幕中的位置，原点在网页可视区域的左上角，会随着网页滚动条的滚动而改变

1.1.4、offsetX || offsetY

概述：它们是event的属性，也能获取到鼠标在屏幕中的位置，获取的方法与pageX和pageY类似，但是他的原点会随着元素的子元素受到影响。

<script type="text/javascript">
    //获取节点
    var inn = document.querySelector('.inner');
    //鼠标在整个网页当中移动
    document.onmousemove = function(event){
            //短路语法进行兼容
            var e = event||window.event;
            inn.innerHTML  = "screenX:"+ e.screenX + "screenY:"+e.screenY + "<br/>"; 
            inn.innerHTML += "pageX:" + e.pageX + "pageY:" + e.pageY + "<br/>";
            inn.innerHTML += "clientX:" + e.clientX + "clientY:" + e.clientY + '<br/>';
            inn.innerHTML += "offsetX:" + e.offsetX + "offsetY:" + e.offsetY ;
    }
 </script>

1.2、利用原生JS写拖拽事件

<script>
    // 拖拽三板斧：onmousedown---->onmousemove---->onmouseup
    var div = document.querySelector(".cur");
    var ex , ey;
    div.onmousedown = function(event){
        var e = event || window.event;
        ex = e.offsetX;
        ey = e.offsetY;
        document.onmousemove = function(event1){
            var e1 = event1 || window.event1;
           div.style.left = e1.clientX - ex +"px";
           div.style.top  = e1.clientY - ey +"px";
     }
    }
    //可以给鼠标事件多次赋值来覆盖上一次的赋值
    div.onmouseup = function(){
        document.onmousemove = null;
    }
</script>

1.3、京东放大镜

    <style>
        body{
            background: #eee;
        }
        *{
            padding: 0;
            margin: 0;
        }
        .outer{
            width: 500px;
            height: 500px;
            position: relative;
            background:url(./images/4.webp);
        }
        .inner{
            width: 100px;
            height: 100px;
            background: black;
            opacity: 0.3;
            position: absolute;
        }
        .outer .pic{
            width: 100px;
            height: 100px;
            background:url(./images/4.webp);
            position: absolute;
            left :620px;
            top:200px;
            transform : scale(3);
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class = "pic"></div>
    </div>
</body>
</html>
<script>
    var inn = document.querySelector(".inner");
    var pic = document.querySelector(".pic");
    inn.onmousedown = function(event){
        var ex , ey;
        var e = event || window.event;
        ex = e.offsetX;
        ey = e.offsetY;
        document.onmousemove = function(event1){
            var l , t;
            var e1 = event1 || window.event1;
            l = e1.clientX - ex ;
            t = e1.clientY - ey ;
            if(l <= 0) l = 0;
            if(l >= 400) l = 400;
            if(t <= 0) t = 0;
            if(t >= 400) t =400;
            inn.style.left = l + "px";
            inn.style.top = t + "px";
            pic.style.backgroundPosition = "-" + l + "px -" + t + "px";
        }
    }
    document.onmouseup = function(){
        document.onmousemove = null;
    }
</script>

标签：11,function,JS,inn,var,div,document,event
来源： https://www.cnblogs.com/DavisHuang/p/15412185.html