day12-event1

土豆沙发

于 2021-03-15 17:23:23 发布

阅读量101

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/kuangjianming/article/details/114754759

版权

JavaScript 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

获取非行内样式

window.getComputedStyle（你要获取样式的元素）.获取什么属性
window.getComputedStyle() 在ie9及以上的浏览器才会识别，其他的浏览器不识别
元素.currentStyle.属性 ie及以下的浏览器获取样式的方式

编写一个函数获取样式

参数：

ele 获取哪一个元素的样式
attr 获取元素的什么样式
返回值：把获取的样式的值返回

function getStyle(ele, attr) {
                // 兼容的获取方法
                var style;
                if (window.getComputedStyle) {
                    style = window.getComputedStyle(ele)[attr];
                } else {
                    style = ele.currentStyle[attr];
                }
                return style;
            }

直接调用：

var res = getStyle(box, "width");

获取元素的尺寸

clientWidth : 元素的width +左右的padding值
clientHeight :元素的height +上下padding值
clientLeft:获取的元素的左边框
clientTop: 获取元素的上边框
offsetWidth ：获取元素的width +左右的padding +左右的border
offsetHeight：获取元素的height + 上下padding +上下的border
offsetLeft：获取元素的左边的偏移量,如果元素没有定位的时候获取的值是这个元素距离浏览器最左边的距离
offsetTop：获取元素上边的偏移量，如果没有定位的时候获取的是元素距离浏览器最上面的距离
当元素有定位的时候，并且父元素也有定位的时候，偏移量为这个元素的left 和 top值

js实现盒子居中的案例

【1】获取浏览器的宽高
【2】（用浏览器的宽高 - 盒子的宽高）/ 2

var box = document.querySelector("#box");
box.style.left = (innerWidth - box.offsetWidth) / 2 + "px";
box.style.top = (innerHeight - box.offsetHeight) / 2 + "px";

window事件：
-onload 页面所有静态资源加载完毕之后执行
-onscroll 滚动事件
-onresize窗口大小改变事件

window.onresize = function () {
                console.log(1);
                box.style.left = (innerWidth - box.offsetWidth) / 2 + "px";
                box.style.top = (innerHeight - box.offsetHeight) / 2 + "px";
            };

事件

事件的组成：
【1】事件源
【2】事件类型
【3】事件处理函数
事件源.on事件类型=事件处理函数
绑定事件的方式
【1】on+事件类型=事件处理函数
【2】事件源.addEventListener(“事件类型”，function（）{
触发这个事件需要操作的功能在这里面写
})
【3】ie浏览器中使用事件监听的方式绑定事件，这个方法只能在ie浏览器中使用
事件源.arrachEvent(“on+事件类型”，事件处理函数)

封装一个事件监听函数

// 参数：事件源  事件类型  回调函数（事件处理函数）
            function addEvent(ele, type, callback) {
                if (ele.addEventListener) {
                    ele.addEventListener(type, callback);
                } else {
                    ele.attachEvent("on" + type, callback);
                }
            }

事件绑定方式的区别

【1】事件绑定方式：on+事件类型
当给同一个事件源多次绑定同一个时候的时候，那么后面绑定的会覆盖前面
【2】事件监听：可以给同一个事件源多次绑定同一个事件类型
addEventListener（）绑定的时候，先绑定先执行
attachEvent() 先绑定的后执行

事件对象

事件对象：存储当前这个事件的一些信息
在事件处理函数中给一个形参，这个形参就是事件对象，ie浏览器不识别
在事件处理函数中 window.event 不存在兼容问题
事件对象中重要的属性：

type: 事件类型
target:真正触发这个事件的事件源
button：0 表示左键,1 表示中间键，2表示右键

var box = document.querySelector("#box");
            box.onmousedown = function (e) {
                console.log(e);
                // console.log(window.event);
            };

事件对象中鼠标相关的信息

clientX : 光标在浏览器可视区域中水平位置
clientY : 光标在浏览器可视区域中垂直位置
offsetX : 光标在元素上的水平位置
offsetY : 光标在元素上的垂直位置
pageX : 光标在页面中水平位置
pageY : 光标在页面中垂直位置

拖拽案例：box不会脱出浏览器可视窗口

在这里插入图片描述

<!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>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background: red;
            cursor: move;
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div id="box"></div>

    <script>
        /*
                【1】当鼠标在box盒子上按下的时候 ，在页面（document）移动的时候
                盒子跟随鼠标移动
                【2】当鼠标抬起来的时候的时候 盒子不在移动
            */
        var box = document.querySelector("#box");
        box.onmousedown = function () {
            document.onmousemove = function () {
                var e = window.event;
                var x = e.clientX - box.offsetWidth / 2;
                var y = e.clientY - box.offsetHeight / 2;
                // 判断边界值
                if (x <= 0) {
                    box.style.left = 0 + 'px'
                } else if (x >= innerWidth - box.offsetWidth) {
                    box.style.left = innerWidth - box.offsetWidth + 'px';
                } else {
                    box.style.left = x + "px";
                }
                if (y <= 0) {
                    box.style.top = 0 + 'px'
                } else if (y > innerHeight - box.offsetHeight) {
                    box.style.top = innerHeight - box.offsetHeight + "px"
                } else {
                    box.style.top = y + "px";
                }


            };
        };

        document.onmouseup = function () {
            // 清空事件
            document.onmousemove = null;
        };
    </script>
</body>

</html>