事件、事件类型、事件对象、元素盒子模型【DOM(三)】

爱喝珍珠奶茶

已于 2022-07-18 19:11:50 修改

阅读量315

点赞数

分类专栏： DOM 文章标签：前端 javascript

于 2022-07-18 19:04:48 首次发布

本文链接：https://blog.csdn.net/m0_63774574/article/details/125844654

版权

DOM 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

1.事件

1.1事件定义

官方定义：

事件,就是函数在某种状态下被调用.JS捕捉到的发生在网页上的行为,官方称为事件句柄,是交互体验的核心功能

个人定义：

事件：元素在某种状态(浏览器实现的也叫事件触发)达成时，要执行的提前设定好程序，我们称之为事件句柄

事件触发三要素：事件源事件类型事件处理程序(handler)

1.2事件的绑定方式

（1）行内式:标签的属性值是事件触发时执行代码(可以绑定多个)

（2）属性绑定:只能绑定一个handler

（3）给元素添加一个事件监听器（重点：尽量使用这一种）

（1）行内绑定方式

在标签行内的事件值上写上标志"javaScript:后跟js代码"

例如：
<a href="javaScript:alert(666)">点我</a>
<a href="javaScript:void(0)">点我</a>
<button onclick="javaScript:alert(666)">点我</button>

（2）元素属性绑定方式

         ele.onxxx=function(event){}
                //兼容性很好，但是一个元素的同一个时间上只能绑定一个处理程序
                //句柄式写法，基本等同于写在HTML行间上

（3）同元素多处理程序绑定方式1

        obj.addEventListener(type,fn,false)
                //IE9以下不兼容，可以为一个事件绑定多个处理程序
                //第三个参数表示是否捕获阶段触发,跟冒泡没关系(笔试陷阱题)

（4）同元素多处理程序绑定方式2

        obj.attachEvent('on'+type,fn);
                //IE专有( ie11例外)，一个事件同样可以绑定多个处理程序
                // <meta http-equiv="X-UA-Compatible" content="IE=10" />，解决 IE11向后兼容 IE10的问题

（5）多元素同事件同处理程序绑定方式==>代理模式

例如：
box.onclick=function(e) {
	e.target
}
    //父元素绑定事件  通过事件对象来区分用户触发的事件属于哪一个具体的对象

1.3事件解绑

事件解绑的三种方式：

        （1）ele.οnclick=false/''/null;

        （2）ele.removeEventListener(type,fn,false);

        （3）ele.detachEvent("on"+type,fn);

                ps:2,3若绑定的是匿名函数，则永远无法解除

（1）行内和属性绑定的事件解绑：xiake.οnclick=null

（2）移除对应的元素的对应的监听程序

2.事件类型

2.1鼠标事件

click、 mousedown、mousemove、mouseup、dblclick、 contextmenu、mouseover、mouseout、mouseenter(html5标准)、mouseleave(html5标准)

鼠标事件案例如下：

<style>
           .box {
               width: 400px;
               height: 300px;
               background-color: brown;
               cursor: pointer;
               overflow-y: scroll;
           }
           .son{
               width: 200px;
               height: 400px;
               background-color: palegreen;
               cursor: pointer;
               margin: 20px; }
       </style>
       <div class='box'> <div class="son"></div> </div>

<script>

var box=document.querySelector(".box")

box.addEventListener("click",()=>{

console.log("鼠标按下和松开时鼠标指针在被选元素区域内部")

})

box.addEventListener("dblclick",()=>{

console.log("鼠标第一次按下和第二次松开时鼠标指针在被选元素区域内部并且时间间隔不能太长")

})

box.addEventListener("mousedown",()=>{

console.log("鼠标在被选元素内按下")

})

box.addEventListener("mouseup",()=>{

console.log("鼠标在被选元素内松开")

})

box.addEventListener("mouseover",()=>{

console.log("鼠标进入被选元素")

})

box.addEventListener("mouseout",()=>{

console.log("鼠标从被选元素出去")

})

box.addEventListener("mouseleave",()=>{

console.log("鼠标从被选元素出去")

})

box.addEventListener("mouseenter",()=>{

console.log("鼠标从被选元素进去")

})

box.onwheel=function(){

console.log("鼠标滚轴滚动时鼠标指针在被选元素内部")

}

var box=document.querySelector(".box")

box.addEventListener("scroll",function(){

console.log("元素自己的滚动条滚动啦:单位时间内滚动条的位置发生变化")

})

</script>

        a) mousedown-->mouseup-->click

        b) mousedown是鼠标按下一次就只触发一次；

        c) mousemove与 mousedown无关，相互独立；

        d) 补充：移动端没有 mousedown事件，对应的是 touchstart--touchmove--touchend

2、DOM3标准规定：click事件只能监听左键，mousedown和 mouseup来判断鼠标键,event.button来区分鼠标的按键，0/1/2

2.2键盘事件

1、keydown、keyup、keypress a) keydown-->keypress-->keyup b) keydown在按键按下之后会一直不断被触发

2、keydown和 keypress的区别

a) keydown可以响应任意按键(除了Fn键)，keypress只可以响应字符类键盘按键（event.charCode）

b)keypress返回 ASCII码，可以转换成相应字符（String.fromCharCode(event.charCode)，区分大小写） // keydown常用于绑定操作类事件处理，keypress常用于绑定字符类事件处理

键盘事件案例如下：

<input type="text" id="box2" autofocus>

<script>

var box2=document.querySelector("#box2")

box2.addEventListener("keydown",function(){

console.log("输入框的键盘按下")

})

box2.addEventListener("keyup",function(){

console.log("输入框的键盘松开")

})

box2.addEventListener("keypress",function(){

console.log("输入框的键盘按下")

})

</script>

2.3输入框操作事件

1、input、focus、blur、change

        a) input监听 input框在聚焦状态下的文本变化，例：百度搜索

        b) change监听 input框在失焦后的文本变化（与前一次失焦状态的文本对比变化）

        c) focus和blur只在聚焦和失焦的一刻触发一次

输入框操作事件案例如下：

<input type="text" id="box2" autofocus>

<script>

var box2=document.querySelector("#box2")

box2.addEventListener("input",function(){

console.log("输入框在输入就触发")

})

box2.addEventListener("change",function(){

console.log("输入框失焦并且value改变")

})

box2.focus()

box2.addEventListener("focus",function(){

console.log("输入框获取焦时触发")

})

box2.addEventListener("blur",function(){

console.log("输入框失焦时触发")

})

</script>

2.4其他事件

1、scroll

scroll：常用于绑定在window对象上,滚动鼠标时触发 window.οnscrοll=func

        //wheel 它是鼠标的

2、load

        load：等待网页资源下载完毕再执行

        img.onload 图片节点加载完毕不会调用要资源加载完毕就会调用

        window.onload：等待页面所有资源下载完成才执行,包括图片资源的下载，所以它是最慢的 。

        网页加载顺序：url-->下载页面-->domTree，cssTree并行-->渲染树renderTree-->绘制页面-->继续下载图片资源，下载完毕再放到页面上去onload domTree：domTree的形成，是先把元素翻译成的节点对象挂到 domTree上去，再把属性 img_src放到渲染树上去

案例如下：

<input type="text" id="box2" autofocus>

<div id="box3">666</div>

<script>

// onload 加载完毕时执行

window.onload=function(){

console.log("浏览器加载完毕:5大BOM的功能加载完成")

console.log(document.querySelector("#box3"))

}

console.log(document.querySelector("#box3"),2222)

图片

var box2=document.querySelector("#box2")

box2.addEventListener("scroll",function(){

console.log("元素自己的滚动条滚动啦:单位时间内滚动条的位置发生变化")

})

</script>

3.事件对象

3.1事件对象的定义

事件触发时，handler函数内部会传入数据触发时的信息

事件对象上存储着事件发生时的相关信息(例如:event.which)

a) 事件处理函数形参ev(event)，W3C制定的标准，IE9以下不行
b) 全局对象 window.event用于IE9以下
// 兼容性写法 var event= ev|| window.event

事件对象携带的信息

事件源对象：

event.target   火狐只有这个
event.srcElement   IE6/78只有这个
   这两个chrome都有
兼容性写法 var ele=event.target|| event.srcElement

鼠标事件触发时:

altKey 鼠标事件发生时，是否按下alt键,返回一个布尔
ctrlKey 鼠标事件发生时，是否按下ctrl键,返回一个布尔
metaKey 鼠标事件发生时，是否按下windows/commond键,返回一个布尔
shiftKey 鼠标事件发生时，是否按下shift键,返回一个布尔
pageX 鼠标点击的 X 坐标；(包含body隐藏的)
pageY 鼠标点击的 Y 坐标；(包含body隐藏的)
clientX clientY返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素(不包括body隐藏的)
screenX screenY返回鼠标位置相对于屏幕左上角的坐标，单位为像素
movementX，movementY返回一个位移值，单位为像素，表示当前位置与上一个mousemove事件之间的距离
offsetX/offsetY 相对于元素自己的x/y 跟它是否是定位的元素无关

4.元素盒子模型

el.offsetWidth：本身宽度+边框线+左右内边距；

el.offsetHeight：本身高度+边框线+上下内边距；

el.offsetTop：相对第一个父级节点有定位属性的上偏移量；

el.offsetLeft：相对有定位属性的父节点左偏移量；

el.clientWidth：本身的宽度+左右内边距;

el.clientHeight：本身的高度+上下内边距；

el.clientTop：上边框线的宽度

el.clientLeft：左边框线的宽度

el.scrollWidth：盒子的实际宽度(包括滚动条不可见部分，不包括边线)

el.scrollHeight：盒子的实际高度(包括滚动条不可见部分，不包括边线)

el.scrollTop：滚动条向下滚动的距离；

el.scrollLeft：滚动条向右滚动的距离；

window.innerHeight：浏览器窗口可见区域高度；

window.innerWidth：浏览器窗口可见区域宽度;

详解：

详解:

clientTop：元素上边框的厚度，当没有指定边框厚底时，一般为0。

scrollTop：位于对象最顶端和窗口中可见内容的最顶端之间的距离，简单地说就是滚动后被隐藏的高度。

offsetTop：获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。

clientHeight：内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

scrollHeight：IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

offsetHeight：获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)的高度。IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。offsetHeight在新版本的FF和IE中是一样的，表示网页的高度，与滚动条无关，chrome中不包括滚动条。

clientX、clientY：相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。

pageX、pageY：类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。

offsetX、offsetY：相对于事件源元素（target或srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

screenX、screenY：相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

相应的属性程序举例：

        <style>......</style>
        <div class='box'>
			<div class="box2">
				 <div class="box3">
				 </div>
			</div>
		</div>

		<script>
			var box=document.querySelector(".box")
			var box2=document.querySelector(".box2")
			var box3=document.querySelector(".box3")
			// console.log(box3.offsetWidth,box3.offsetTop,box3.clientWidth,box3.offsetParent.offsetParent.offsetParent)
	
			let total=0;
			Object.prototype.myoffsetTop=function() {
				let baba=this.offsetParent
				total+=this.offsetTop
				if(baba){
					baba.myoffsetTop()
				}
				return total
			}
			var re=box3.myoffsetTop()
			console.log(re)
		</script>