2022-07-22 18:58 已编辑重庆三峡学院 Web前端

关注

DOM事件语法

1、事件绑定和解绑

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

事件三要素: 事件源事件类型事件处理程序(handler)

var box = document.querySelector(".box")//事件源
box.onclick = function() {//onclick事件类型
    console.log("这是一个测试1")//事件处理程序
}

事件的绑定方式：

行内式：标签的属性值是事件触发时执行代码，可以绑定多个handler

<div class="box" onclick="javaScript:console.log(66666)">hello</div>
//或者
<div class="box" onclick="javaScript:myconsole.mylog()">hello</div>
//或者
<div class="box" onclick="myconsole.mylog()"> hello2</div>
//或者
<div class="box" onclick="fn()">hello2</div>
//可以绑定多个handler
<div class="nox" onclick="myconsole.mylog();fn()">
<script>
    var myconsole = {
        mylog: () => {console.log("函数1")}
    }
    
    function fn(){
        console.log("函数2")
    }
</script>

属性绑定:只能绑定一个handler

var box = document.querySelector(".box")
box.onclick = function() {//给box属性的原型链上绑定onclick方法（函数）
    console.log("这是一个测试1")
}

box.onclick = function() {//给box属性的原型链上绑定onclick方法（函数）
    console.log("这是一个测试2")
}//只会打印这是一个测试2

box.onclick = function() {//给box属性的原型链上绑定onclick方法（函数）
    fn1() {}  fn2() {} fn1()
        fn2()
}//这样可以绑定多个handler

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

box.addEventListener("click",function(){
    console.log(666662)
})//addEventListener异步非阻塞函数
box.addEventListener("click",function(){
    console.log(666663)
})//可以绑定多个handler

事件的解绑：

行内和属性绑定的事件解绑:xiake.onclick=null

box.onclick=function(){
    box.onclick=null;
    console.log("这是一个测试3")
}//运行函数后解绑，打印一次"这是一个测试3"

移除对应的元素的对应的监听程序

function fn1 () {
    console.log("这是一个测试4")
}
function fn2 () {
    console.log("这是一个测试5")
}
function fn3 () {
    console.log("这是一个测试6")
}
box.addEventListener("click",fn1)
box.addEventListener("click",fn2)
box.addEventListener("click",fn3)
box.removeEventListener("click",fn1)//解绑程序1，fn1

总结

box.onclick=函数 box.onclick=null
box.addEventListener box.removeEventListener

2、事件类型

click

var box=document.querySelector(".box")
box.addEventListener("click",()=>{
    console.log("鼠标按下和松开时，鼠标指针都在被选元素区域内部")
})//在子元素超出父元素范围的部分也可以有click事件

dblclick

box.addEventListener("dblclick",()=>{
    console.log("鼠标第一次按下和第二次松开时，鼠标指针在被选元素区域内部，并且时间间隔不能太长")
})//在子元素超出父元素范围的部分也可以有dblclick事件

mousedown

box.addEventListener("mousedown",()=>{
    console.log("鼠标在被选元素内按下")
})//在子元素超出父元素范围的部分也可以有mousedown事件

mouseup

box.addEventListener("mouseup",()=>{
    console.log("鼠标在被选元素内松开")
})//在子元素超出父元素范围的部分也可以有mouseup事件

mouseover

box.addEventListener("mouseover",()=>{
    console.log("鼠标进入被选元素")
})//在子元素超出父元素范围的部分也可以有mouseover事件，从父元素进入子元素，从子元素进入父元素，从子元素进入，从被其他元素隔断的一边进入另一边等都会打印"鼠标进入被选元素"

moseout

box.addEventListener("mouseout",()=>{
    console.log("鼠标从被选元素移出")
})//在子元素超出父元素范围的部分也可以有mouseout事件，从子元素到父元素，从子元素出去，从父元素出去，从被其他元素隔断的一边进入另一边等都会打印"鼠标从被选元素移出"

mouseleave

box.addEventListener("mouseout",()=>{
    console.log("鼠标从被选元素移出")
})//在子元素超出父元素范围的部分也可以有mouseout事件，从子元素出去，从父元素出去，从被其他元素隔断的一边进入另一边等都会打印"鼠标从被选元素移出"

mouseenter

box.addEventListener("mouseover",()=>{
    console.log("鼠标进入被选元素")
})//在子元素超出父元素范围的部分也可以有mouseover事件，从子元素进入，从父元素进入，从被其他元素隔断的一边进入另一边等都会打印"鼠标进入被选元素"

onwheel

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

scroll

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

keydown

box2.addEventListener("keydown",function(){
    console.log("输入框的键盘按下，就会打印")//不松手，会一直打印
})

keyup

box2.addEventListener("keyup",function(){
    console.log("输入框的键盘松开，就会打印")//中文字符时，会打印两遍；英文字符时，只打印一遍
})

keypress

box2.addEventListener("keypress",function(){
    console.log("输入框的键盘按下")//空格、Enter、\、/、=键和英文字符会打印
})

input

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

change

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

focus

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

blur

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

onload

//加载完毕时执行
window.onload=function(){
    console.log("浏览器加载完毕:5大BOM的功能加载完成")
    console.log(document.querySelector("#box3"))//在这段代码后有box3元素
}

3、事件对象

事件触发时，handler函数内部会传入数据，触发时的信息。事件对象上存储着事件发生时的相关信息(例如:event.which)。

事件对象携带的信息

鼠标事件触发时:

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

事件中的this

1、行内式

<button type="button" onclick="fn(this)">xxx</button>
<script type="text/javascript">
    function fn (e) {
        console.log(e,this)//btn和window
    }
</script>
//行内绑定时，行内的环境对象是btn，函数的调用者是window，无法获取事件对象

2、元素属性

<button id="btn2">btn2</button>
<script>
        var btn2 = document.querySelector("#btn2")
    btn2.onclick=function(e){
        console.log(this,e)//btn和事件对象本身
    }
</script>

3、事件监听器1（addEventListener）

<button id="btn2">btn2</button>
<script>
        var btn2 = document.querySelector("#btn2")
    btn2.addEventListener("click",function(e){
        console.log(this,e)//btn和事件对象本身
    })
</script>

4、事件监听器2（addEventListener）

<button id="btn2">btn2</button>
<script>
    var btn2=document.querySelector("#btn2")
    obj={
        say:function(){
            btn2.addEventListener("click",a=>{
                console.log(this,a)//say方法,事件对象本身
            })
        }
    }
    obj.say()
</script>

4、盒子模型

el为盒子本身

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。Firefox认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

offsetHeight：获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)的高度。IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。Firefox认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。offsetHeight在新版本的Firefox和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个属性