事件:元素在某种状态(浏览器实现的也叫事件触发)达成时 要执行的提前设定好程序 我们称之为事件句柄
事件绑定的方式有三种
第一种:行内式
<div class="box" onclick="javaScript:console.log(66666)">
hello2
</div>
直接在标签的内部写js代码 ,选择绑定的事件
可以一次绑定多个事件
第二种:属性绑定
var box = document.querySelector(".box")
box.onclick = function() {
console.log("你购买了装备")
}
在js中先去获取到要绑定的元素,在设置绑定事件,以及函数
一次只能绑定一个事件,但是可以在事件的函数中去调用另外的函数
第三种:监听器
box.addEventListener("click",fn1)
第一个参数表示的是事件的触发条件,第二个参数则表示触发条件之后的函数
需要注意的是监听器的点击事件是click,而前两种则是onclick
一个监听器只能绑定一个事件,但是可以绑定多个监听器
我们再来谈谈解绑的问题
例如抢红包的时候,你点击了抢一个红包之后,红包就变成灰色了,无法在触发点击事件了。这就是点击事件的解绑。
行内式和属性绑定的解绑使用
box.οnclick=null
而监听器的解绑使用
box.removeEventListener("click",fn1)
当然除了我们的点击事件类型还有很多其他的事件类型,我们逐一了解
click:
鼠标按下和松开时 鼠标指针在被选元素区域内部(单击)
dblclick:
鼠标第一次按下和第二次松开时 鼠标指针在被选元素区域内部 并且时间间隔不能太长(双击)
mousedown:
鼠标在被选元素内按下
mouseup:
鼠标在被选元素内松开
mouseover:
鼠标进入被选元素
mouseout:
鼠标从被选元素出去
mouseleave:
鼠标从被选元素出去
mouseenter:
鼠标从被选元素进去
(注意以上四个他们父子之间的关系,也就是看看从元素进父元素种,和从外界进入父元素当中有什么区别)
onwheel:
鼠标滚轴滚动时 鼠标指针在被选元素内部
scroll:
元素自己的滚动条滚动,单位时间内滚动条的位置发生变化
keydown:
输入框的键盘按下
keyup:
输入框的键盘松开
keypress:
输入框的键盘按下
input:
输入框在输入就触发
change:
输入框失焦并且value改变
focus:
输入框获取焦时触发
blur:
输入框失焦时触发
onload:
加载完毕时执行
还有一个就涉及到盒子模型对象:
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:浏览器窗口可见区域宽度;
我们了解一种新的对象:事件对象
事件对象就是我们事件源这个对象,是一种全新的对象
事件处理函数形参ev(event)和 全局对象 window.event,
兼容性写法 var event= ev|| window.event
事件对像也有自己的属性
这是鼠标事件的触发时的属性
这是键盘事件的触发时的属性,把上下左右和回车键的keycode记住 a是65
有一种情况就是如果你写了实参
但是访问事件对象怎么办?
例如
<button id="btn2" onclick="fn(100)">btn2</button>
function fn (e) {
console.log(e,e2)
console.log(window.event)
e=(e.constructor==PointerEvent&&e)||window.event//兼容写法
console.log(e)
}
fn的e就是形参去接受实参100了
现在去访问的e就不能够访问到事件对象了,如果想访问到事件对象现在有两种方法
1.在去window中访问event
2.写兼容写法,判断e的构造函数是否正确如果不是就去访问window,event