DOM3---（事件，元素盒子模型）

realllll
102 阅读6分钟

事件绑定和解绑

事件：触发-响应机制

事件三要素

1.事件源（谁）

2.事件类型（什么事件）

3.事件处理程序（做什么）

        //事件源
        var box = document.querySelector("div")
        //事件类型
        box.onclick = function () {
            //事件处理程序
            console.log(666);
        }

点击

image.png

image.png

绑定事件

addEvenListener()事件监听方式

  • eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上
  • 当该对象触发指定的事件时，就会执行事件处理函数

该方法接收三个参数： eventTarget.addEventListener(type,listener[,useCapture])

  • type:事件类型字符串，比如click,mouseover,注意这里不要带on
  • listener：事件处理函数，事件发生时，会调用该监听函数
  • useCapture：可选参数，是一个布尔值，默认是 false。

特点：同一个元素同一个事件可以注册多个监听器

        var box = document.querySelector("div")
        //传统绑定方式
        box.onclick = function () {

            console.log(666);
        }
        //监听

        box.addEventListener('click', function () {
            console.log(1);;
        })
        box.addEventListener('click', function () {
            console.log(2);;
        })
        box.addEventListener('click', function () {
            console.log(3);;
        })

image.png

image.png

解绑事件

传统绑定方式解绑：

box.onclick=函数   
box.onclick=null

监听移除：

box.addEventListener  
//移除
box.removeEventListener（事件，函数名）

事件类型

鼠标事件

1.onclick 鼠标按下和松开时，鼠标指针在被选元素区域内部

box.addEventListener("click",()=>{
console.log("鼠标按下和松开时  鼠标指针在被选元素区域内部")
})

2.ondblclick

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

3.onmousedown

		box.addEventListener("mousedown", () => {
			console.log("鼠标在被选元素内按下")
		})

4.onmouseup

box.addEventListener("mouseup",()=>{
console.log("鼠标在被选元素内松开")
})

5.onmouseover(父元素进入子元素，子元素进入父元素也会算)

		box.addEventListener("mouseover", () => {
			console.log("鼠标进入被选元素")
		})

6.onmouseout（父元素到子元素，子元素到父元素也会算）

box.addEventListener("mouseout", () => {
console.log("鼠标从被选元素出去")
})

7.onmouseleave(从父元素到父元素之外才算，父子元素之间进出不会触发)

box.addEventListener("mouseleave", () => {
console.log("鼠标从被选元素出去")
})

8.onmouseenter（从父元素之外到父元素里才会触发，父子元素之间进出不会触发）

box.addEventListener("mouseenter",()=>{
console.log("鼠标从被选元素进去")
})

9.onwheel

box.onwheel = function () {
console.log("鼠标滚轴滚动时 鼠标指针在被选元素内部")
}

10.onscroll 滚动条不滚动（到底/顶）的时候不会触发

box.addEventListener("scroll",function(){
console.log("元素自己的滚动条滚动啦:单位时间内滚动条的位置发生变化")
})

键盘事件

1.onkeydow 按一次触发一次 数字键盘不触发响应任意按键(除了Fn键)

box2.addEventListener("keydown",function(){
console.log("输入框的键盘按下")
})

2.onkeyup 不松开不触发

box2.addEventListener("keyup", function () {
console.log("输入框的键盘松开")
})

3.onkeypress 返回 ASCII码，可以转换成相应字符，只可以响应字符类键盘按键（输入汉字时，输入确定的字后才会触发，输入字母数字会直接触发）

box2.addEventListener("keypress",function(){
console.log("输入框的键盘按下")
})

4.oninput

box2.addEventListener("input", function () {
console.log("输入框在输入就触发")
})

输入框事件

1.onchange

box2.addEventListener("change",function(){
console.log("输入框失焦并且value改变")
})
box2.focus()

2.onfocus 设置了获焦属性会自动执行一次

box2.addEventListener("focus", function () {
console.log("输入框获取焦时触发")
})

3.onblur

box2.addEventListener("blur", function () {
console.log("输入框失焦时触发")
})

其他

onload 加载完毕时执行

window.onload = function () {
console.log("浏览器加载完毕:5大BOM的功能加载完成")
console.log(document.querySelector("#box3"))
}
console.log(document.querySelector("#box3"), 2222)

image.png

onmousemove 鼠标移动时触发

                var box = document.querySelector(".box")
		box.addEventListener("click", function (e) {
			console.log(e.pageY, e.offsetY)
		})
		var box = document.querySelector(".box")
		box.onmousemove = function (e) {
			console.log(111, e.movementX)//鼠标移动当前位置与上一个mousemove事件之间的距离
		}

事件对象

事件对象

事件对象上存储着事件发生时的相关信息(例如: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 跟它是否是定位的元素无关

键盘事件触发时:

charCode/keyCode  键码值  key  键码
37左
38上
39右
40下 
13enter

盒子模型

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：浏览器窗口可见区域宽度;

box.png

详解:

元素属性：

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个属性

封装一个求元素相对于文档的坐标:

                        let total=0;
			Object.prototype.myoffsetTop=function() {
				let baba=this.offsetParent
				total+=this.offsetTop
				if(baba){
					baba.myoffsetTop()
				}
				return total
			}
avatar
文章
阅读
粉丝