JS---DOM(尺寸及事件)

福西西za
63 阅读6分钟

一、DOM尺寸

获取元素偏移量

就是元素在页面上相对于参考父级的左边和上边的距离

offsetParent
  • 获取元素的偏移量参考父级
  • 其实就是假设你要给一个元素 绝对定位 的时候
  • 它是根据谁来进行定位的, 那么这个元素的偏移量参考父级就是谁
offsetLeft / offsetTop
  • 获取的事元素左边的偏移量和上边的偏移量
    • offsetLeft 该元素相对于参考父级的左侧偏移量
    • offsetTop 该元素相对于参考父级的上侧偏移量

获取元素尺寸

获取元素的占地面积

offsetWidth 和 offsetHeight
  • offsetWidth: 获取元素内容 + padding + border 的宽度
  • offsetHeight: 获取元素内容 + padding + border 的高度
clientWidth 和 clientHeight
  • clientWidth 获取元素内容 + padding 的宽度
  • clientHeight 获取元素内容 + padding 的高度
注意
  • 获取到的尺寸是没有单位的数字
  • 当元素在页面中不占位置的时候, 获取到的是 0
    • display: none 元素在页面不占位
    • visibility: hidden 元素在页面占位

获取浏览器窗口尺寸

可视区域的尺寸

  • document.documentElement.clientWidth: 浏览器可视窗口的宽度
  • document.documentElement.clientHeight: 浏览器可视窗口的高度

二、DOM事件

什么是 事件

  • 一个事件的组成
    • 触发谁的事件: 事件源
    • 触发什么事件: 事件类型
    • 触发后做什么: 事件处理函数
var oDiv = document.querySelector("div");

oDiv.onclick = function () {};
/**
 * 触发谁的事件 ---> oDiv ---> 事件源就是 oDiv
 * 触发什么事件 ---> onclick ---> 事件类型就是 click
 * 触发后做什么 ---> function () {} ---> 这个事件的处理函数
 */

var oDiv = document.querySelector("div");

oDiv.onclick = function () {
    console.log("你点击了 div");
};
  • 当我们点击 div 的时候, 就会执行事件处理函数内部的代码
  • 每点击一次, 就会执行一次事件处理函数

事件的绑定方式

  • 我们现在给一个注册事件都是使用 onXXX 的方式
  • 但是这种方式不是很好, 只能给一个元素注册一个事件, 如果写了第二个, 那么第一个会被覆盖
oDiv.onclick = function () {
    console.log("第一个事件");
};
oDiv.onclick = function () {
    console.log("第二个事件");
};
  • 我们这种绑定方式, 只会执行第二个, 第一个就没了
  • 如果想要两个都存在, 我们可以使用 事件监听的方式 去给元素绑定事件
  • 使用 addEventListener 的方式添加
    • 在 IE 中要使用 attachEvent

事件监听

addEventListener (非 IE7 8 下使用)
  • 语法: 元素.addEventListener('事件类型', 事件处理函数, 冒泡还是捕获)
oDiv.addEventListener(
    "click",
    function () {
        console.log("我是第一个事件");
    },
    false
);
oDiv.addEventListener(
    "click",
    function () {
        console.log("我是第二个事件");
    },
    false
);
  • 点击 div 时, 两个函数都会执行, 并且会按照你注册的顺序执行
  • 先打印 我是第一个事件, 然后打印 我是第二个事件
  • 注意: 事件类型不要写 on, 点击事件就是 click, 不是 onclick
attachEvent (IE 7 8 下 使用)
  • 语法: 元素.attachEvent('事件类型', 事件处理函数)
oDiv.attachEvent("click", function () {
    console.log("我是第一个事件");
});
oDiv.attachEvent("click", function () {
    console.log("我是第二个事件");
});
  • 点击 div 时, 两个函数都会执行, 并且会按照你注册的顺序倒叙执行
  • 先打印 我是第二个事件, 然后打印 我是第一个事件
  • 注意: 事件类型需要要写 on, 点击事件就是 onclick
两个方式的区别
  • 注册事件的时候事件类型参数的书写
    • addEventListener: 不需要写 on
    • attachEvent: 需要写 on
  • 参数个数
    • addEventListener: 一般是三个常用参数
    • attachEvent: 两个参数
  • 执行顺序
    • addEventListener: 顺序注册, 顺序执行
    • attachEvent: 顺序注册, 倒叙执行
  • 适用浏览器
    • addEventListener: 非 IE 7 8 的浏览器
    • attachEvent: IE 7 8 浏览器

常见的事件 (了解)

  • 事件分类
    • 浏览器事件
    • 鼠标事件
    • 键盘事件
    • 表单事件
    • 触摸事件
浏览器事件
  • load: 页面全部资源加载完毕
  • scroll: 浏览器滚动的时候触发
  • ...
鼠标事件
  • click: 点击事件
  • dblclick: 双击事件
  • contextmenu: 右键事件
  • mousedown: 鼠标左键按下事件
  • mouseup: 鼠标左键抬起事件
  • mousemove: 鼠标移动
  • mouseover: 鼠标移入事件
  • mouseout: 鼠标移出事件
  • mouseenter: 鼠标移入事件
  • mouseleave: 鼠标移出事件
  • ...
    <div class="box_1">
        <div class="box_2"></div>
    </div>
    <script> 
        var box1 = document.querySelector('.box_1')
        var box2 = document.querySelector('.box_2')

        // 移入子元素的时候也会触发事件
        box1.onmouseover = function () {
           console.log('over: 移入')
        }
        box1.onmouseout = function () {
            console.log('out: 移出')
        }

        // 移入子元素的时候 不会触发事件 (推荐使用)
        box1.onmouseenter = function () {
            console.log('enter: 移入')
        }
        box1.onmouseleave = function () {
            console.log('leave: 移出')
        }

        box1.onclick = function () {
            console.log('单击事件')
        }
        box1.ondblclick = function () {
            console.log('双击事件')
        }
        box1.oncontextmenu = function () {
            console.log('右键')
        }
        box1.onmousedown = function () {
            console.log('按下')
        }
        box1.onmouseup = function () {
            console.log('抬起')
        }
    </script>
键盘事件
  • keyup: 键盘抬起事件
  • keydown: 键盘按下事件
  • keypress: 键盘按下在抬起事件
  • ...
  • 注意: 目前 JS 中 只有 input 输入框和 document 对象可以绑定输入事件
    <input type="text" class="inp">
    <script>
        var inp = document.querySelector('.inp')

        inp.onkeyup = function () {
            console.log('抬起')
        }
        inp.onkeydown = function () {
            console.log('按下')
        }
        inp.onkeypress = function () {
            console.log('按下抬起')
        }
    </script>
表单事件
  • onfocus: 输入框获取焦点
  • onblur: 输入框失去焦点
  • change: 表单内容改变事件
  • input: 表单内容输入事件
  • ...
    <input type="text" class="inp">
    <script>
        var inp = document.querySelector('.inp')

        inp.onfocus = function () {
            console.log('输入框获得焦点')
        }
        inp.onblur = function () {
            console.log('输入框失去焦点')
        }

        inp.onchange = function () {
            console.log('输入框内容更改')
        }
        inp.oninput = function () {
            console.log('你输入了一个内容')
        }
    </script>
触摸事件
  • touchstart: 触摸开始事件
  • touchend: 触摸结束事件
  • touchmove: 触摸移动事件
  • ...
    <div class="box"></div>
    <script>
        var box = document.querySelector('.box')

        box.onclick = function () {
            console.log('移动端也能触发点击事件')
        }

        box.ontouchstart = function () {
            console.log('触摸事件开始~~~')
        }

        box.ontouchend = function () {
            console.log('触摸事件结束~~~')
        }

        box.ontouchmove = function () {
            console.log('触摸移动事件~~~')
        }
    </script>

事件对象

  • 什么是事件对象
    • 当触发一个事件以后, 对该事件的一些描述信息
    • 比如: 点击的位置坐标是什么, 触发键盘事件时按的那个按钮
  • 每一个事件都会有一个对象的对象来描述这些信息, 我们就把这个对象叫做 事件对象
  • 浏览器给了我们一个 黑盒子, 叫做 window.event, 就是对事件信息的所有描述
    • 比如点击事件, 我们可以通过 event 对象知道我们点击了那个位置
oDiv.onclick = function () {
    console.log(window.event.X轴坐标点信息);
    console.log(window.event.Y轴坐标点信息);
};
  • 但这东西有兼容性问题, 在低版本IE里很好用, 但是在高版本IE和Chrome 里不好使了
  • 所以我们需要换一个方式来获取, 就是在每一个事件处理函数的形参位置, 默认第一个就是 事件对象
oDiv.onclick = function (e) {
    console.log(e.X轴坐标点信息);
    console.log(e.Y轴坐标点信息);
};
  • 综上所述, 我们以后在每一个事件里, 都采用兼容写法
oDiv.onclick = function (e) {
    e = e || window.event;
    console.log(e.X轴坐标点信息);
    console.log(e.Y轴坐标点信息);
};

点击事件的光标点获取

  • 我们点击事件的坐标点都不是一堆, 所以要有一个相对的坐标系
  • 例如:
    • 相对于事件源(就是我们点击的那个元素)
    • 相对于页面
    • 相对于浏览器窗口
  • 因为这些都不一样, 所以我们获取的方式也不一样
相对于事件源
  • offsetX 和 offsetY
  • 相对于我们点击的元素的边框内测开始计算
* {
	margin: 0;
	padding: 0;
}
div {
	width: 300px;
	height: 300px;
	padding: 20px;
	border: 10px solid #333;
	margin: 20px 0 0 30px;
}

<div></div>

var oDiv = document.querySelector('div')

// 注册点击事件
oDiv.onclick = function (e) {
	// 事件对象兼容写法
	e = e || window.event

	console.log(e.offsetX)
	console.log(e.offsetY)
}
相对于浏览器窗口你点击的坐标点
  • clientX 和 clientY
  • 相对于浏览器窗口来计算的, 不管你页面滚动到什么情况, 都是根据窗口来计算坐标
* {
	margin: 0;
	padding: 0;
}
body {
	width: 2000px;
	height: 2000px;
}
div {
	width: 300px;
	height: 300px;
	padding: 20px;
	border: 10px solid #333;
	margin: 20px 0 0 30px;
}

<div></div>

var oDiv = document.querySelector('div')

// 注册点击事件
oDiv.onclick = function (e) {
	// 事件对象兼容写法
	e = e || window.event

	console.log(e.clientX)
	console.log(e.clientY)
}
相对于页面你点击的坐标点
  • pageX 和 pageY
  • 是相对于整个页面的坐标点, 不管有没有滚动, 都是相对于页面拿到的坐标点
* {
	margin: 0;
	padding: 0;
}
body {
	width: 2000px;
	height: 2000px;
}
div {
	width: 300px;
	height: 300px;
	padding: 20px;
	border: 10px solid #333;
	margin: 20px 0 0 30px;
}

<div></div>

var oDiv = document.querySelector('div')

// 注册点击事件
oDiv.onclick = function (e) {
	// 事件对象兼容写法
	e = e || window.event

	console.log(e.pageX)
	console.log(e.pageY)
}
avatar
文章
阅读
粉丝