DOM事件语法
1、事件绑定和解绑
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、事件对象
事件对象携带的信息
鼠标事件触发时:
- 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.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个属性,标准事件没有对应的属性。