5.31 Js基础 （ DOM ）

回顾：

• 节点的属性

• 层次节点

• 节点的增删改查

目标：

• 元素大小
• 周边大小

一、获取元素大小

2.1、clientWidth 和clientHeight

这组属性可以获取元素可视区的大小，可以得到元素内容及内边距的空间大小 width+padding

对于元素的实际大小，这两个属性理解方式如下：

• 增加边框，无变化
• 增加了外边距 无变化
• 增加滚动条，最终值的大小等于原来的大小减去滚动条的大小
• 增加内边距，最终值的大小等于原来的大小加上内边距的大小

2.2、scrollWidth和scrollHeight

这组属性可以获取滚动内容的元素大小

• 获取指定标签内容层的真实大小（可视区域大小+被隐藏区域大小）

2.3、offsetWidth 和offsetHeight

这组属性可以返回元素的实际的大小，包含了边框，内边距和滚动条 div.offsetwidth=width+padding+border+滚动条

• 如果增加边框，最终值等于原本大小加上边框的大小
• 增加内边距，最终值等于原本大小加上内边距的大小
• 增加外边距，无变化
• 增加滚动条，无变化，不会减少

二．获取元素周边大小

3.1、 clientLeft 和clientTop

这组属性可以获取元素左边框和上边框的大小

• clientTop = boder.top(上边框的宽度)
• clientLeft = boder.left(左边框的宽度)

3.2、offsetLeft 和offsetTop

这组属性可以获取当前元素相对于父元素的位置

• offsetTop：当前元素 上边框 外边缘 到 最近的已定位父级（offsetParent） 上边框 内边缘的 距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离
• ​ offsetLeft：当前元素 左边框 外边缘 到 最近的已定位父级（offsetParent） 左边框 内边缘的 距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离

3.3、scrollTop 和scrollLeft

这组属性可以获取滚动条被隐藏的区域的大小.

• scrollTop :内容层顶部 到 可视区域顶部的距离。
• scrollLeft:内容层左端 到 可视区域左端的距离.

事件对象

一、事件对象

事件处理三部分组成：对象.事件处理函数=函数

document.onclick=function(){
    //do something
}
//click:事件类型：click
//onclick：绑定点击事件

Document.onclick=box; //不需要（），如果加了（）那么进入页面就会调用该函数
function box(){
    //do something
}

1.1、this关键字

a.如果是一般函数,this指向全局对象window;

b.在严格模式下"use strict",为undefined.

c.对象的方法里调用,this指向调用该方法的对象.

d.构造函数里的this,指向创建出来的实例.

Var ipt=document.getelememtByID(“BOX”)
ipt.onclick=function(){
alert(this.value);//this表示的是input
}

谁调用了就指向谁

1.2、事件对象

当你触发某个事件的时候，会产生一个事件对象，这个对象包含着所有与事件对象有关的信息包含导致事件的元素，事件的类型，以及其他相关的信息

事件对象：我们一般把它称为event对象，这个对象是浏览器通过函数把这个对象作为参数传递过来的，我们 验证以下，在执行函数的时候是否可以得到隐藏的参数

var input = document.getElementById("input");
input.onclick = function() {
   console.log(arguments.length)
   console.log(arguments[0])
}

通过上述的案例，我们发现，通过事件绑定的执行函数我们可以得到一个隐藏的参数（对象），这个参数其实就是event对象

        var input=document.getElementById("input");
        input.onclick=function(evt){   //接受一个event对象，名称不一定非要evt
           console.log(evt)        //MouseEvent 鼠标事件对象
        }

这种方法存在兼容性问题,种方法ie不支持

 var input=document.getElementById("input");
        input.onclick=function(evt){   //接受一个event对象，名称不一定非要evt
          var e=evt||window.event
          console.log(e);
        }

二、鼠标事件

1.1、鼠标按钮

只有在鼠标按钮被点击的时候才会触发click事件

			function whichButton(event) {
				console.log(event)
				var btnNum = event.button;
				if (btnNum == 2) {
					alert("您点击了鼠标右键！")
				} else if (btnNum == 0) {
					alert("您点击了鼠标左键！")
				} else if (btnNum == 1) {
					alert("您点击了鼠标中键！");
				} else {
					alert("您点击了" + btnNum + "号键，我不能确定它的名称。");
				}
			}

Button属性

值	说明
0	鼠标左边的按键
1	鼠标的滚轮
2	鼠标的右键

事件	说明
onclick	当用户点击某个对象时调用的事件句柄。（左键）
onmousedown	按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
oncontextmenu	鼠标右键点击事件

			//两种方法阻止鼠标默认事件
           document.oncontextmenu = function(e){
				//return false 需要写在代码最后
				//return false;
				//使用event对象
				e = e||window.event
				e.preventDefault()
			}

mouseenter 和mouseover的区别

• 当鼠标移动到元素上时就会触发mouseenter 事件
• 类似 mouseover，它们两者之间的差别是
• mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发
• 跟mouseenter搭配鼠标离开 mouseleave 同理

pointer-events: none

它的意思是：除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素,说白了，就是让标签不接受鼠标事件（含click，mousemove，mouseup之类的）。

在这里，就是不让item(父级是main2)接受鼠标事件，所以给它们的样式添加 pointer-events

   .item {
            width: 100px;
            height: 50px;
            border: 3px solid blue;
            pointer-events: none; //此时鼠标再次移入到子元素不会触发事件
        }

    document.getElementById('main2').onmouseover = function () {            console.log('鼠标在main2上面,子盒子也会触发事件');        }

1.2、可视区和屏幕的坐标

坐标属性

属性	说明
clientX	可视区x的坐标，距离左边框的位置 原点为浏览器左上角
clientY	可视区y的坐标，距离上边框的位置
screenX	屏幕x的坐标，距离左边屏幕的位置 原点为屏幕左上角
screenY	屏幕y的坐标，距离上屏幕的位置
PageX	距离页面左边框的距离 原点 页面的左上角
PageY	距离页面上边框的距离
offsetX	距离点击元素内容区左边框的距离 原点 已定位的父盒子 内容区的左上角 不含padding
offsetY	距离已定位父级内容区上边的距离

三、键盘事件

事件	说明
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下和松开之间的某个时刻。
onkeyup	某个键盘按键被松开。

四、表单事件

事件	说明
onblur	元素失去焦点。
onchange	域的内容被改变。
onfocus	元素获得焦点。
onreset	重置按钮被点击。
onsubmit	确认按钮被点击。

五、UI事件

事件	按钮
onload	一个页面或一幅图像完成加载。
onresize	窗口或框架被重新调整大小。
onscroll	当文档被滚动时发生的事件

事件流

一、事件流

事件流描述的就是从页面中接收事件的顺序

而IE和Netscape提出了完全相反的事件流概念。IE事件流是事件冒泡，而Netscape的事件流就是事件捕获。

DOM2级事件规定的时间流包括 三个阶段：

• 事件捕获阶段
• 处于目标阶段
• 事件冒泡阶段

注意：在DOM事件流中，实际的目标在捕获阶段不会接收到事件，下一个阶段是处于目标阶段，这时事件被触发，最后进入事件冒泡阶段。我们认为处于目标阶段是事件冒泡阶段的一部分。

二、事件冒泡

IE的事件流叫做事件冒泡。即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。所有现代浏览器都支持事件冒泡，并且会将事件一直冒泡到window对象。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lIURzqtx-1622441799154)(/webp)]

案例：

<div class="classv">        我是祖宗        <div class="actva">我是老爸            <div class="foo">我是孩子</div>        </div>    </div>    <script type="text/javascript">        var a = document.querySelector('.classv').addEventListener('click', function() {            console.log('我是祖宗')        }, false)        var b = document.querySelector('.actva').addEventListener('click', function() {            console.log('我是老爸')        }, false)        var c = document.querySelector('.foo').addEventListener('click', function() {            console.log('我是孩子')        }, false)    </script>

addEventListener中有三个属性，第三个属性是布尔值。

• false：冒泡
• true：捕获

三、事件捕获

事件捕获的思想是不太具体的节点应该更早的接收到事件，而在最具体的节点应该最后接收到事件。事件捕获的用以在于事件到达预定目标之前捕获它。IE9+、Safari、Chrome、Opera和Firefox支持，且从window开始捕获（尽管DOM2级事件规范要求从document）。由于老版本浏览器不支持，所以很少有人使用事件捕获。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9bTEubEs-1622441799156)(/1)]

案例：

<div class="classv">        我是祖宗        <div class="actva">我是老大            <div class="foo">我是老幺</div>        </div>    </div>    <script type="text/javascript">        var a = document.querySelector('.classv').addEventListener('click', function() {            console.log('我是祖宗')        }, true)        var b = document.querySelector('.actva').addEventListener('click', function() {            console.log('我是老大')        }, true)        var c = document.querySelector('.foo').addEventListener('click', function() {            console.log('我是老幺')        }, true)    </script>

四、两种方式来阻止

方式一：event.stopPropagation();

document.querySelector('.foo').onmousedown=function(event){     event.stopPropagation();//非ie    event.cancelbubble = true //ie}

方式二：return false;

在jQuery中使用

但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。

作业

• 碰撞的效果
• 微博的效果
• 过滤列表