JavaScript事件总结

开发工具与关键技术：Adobe Dreamweaver JavaScript
作者：王民
撰写时间：2020年4月27日

知识点罗列：
事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间，JavaScript 与 HTML 之间的交互是通过事件实现的。对于 Web 应用来说，有下面这些代表性的事件：单击事件、鼠标移入移出事件、键盘按下/弹起事件等等。事件就是用户与浏览器的交互行为
onclick 鼠标点击某个对象、 ondblclick 鼠标双击某个对象、onerror 当加载文档或图像时发生某个错误、onfocus 元素获得焦点、 onblur 元素失去焦点、onkeydown 某个键盘的键被按下 、onkeypress 某个键盘的键被按下或按住、 onkeyup 某个键盘的键被松开 、onload 某个页面或图像被完成加载、onmousedown 某个鼠标按键被按下 、onmousemove 鼠标被移动 、onmouseout 鼠标从某元素移开 、onmouseover 鼠标被移到某元素之上 、onmouseup 某个鼠标按键被松开 、onreset 重置按钮被点击 、onresize 窗口或框架被调整尺寸、onselect 文本被选定 、onsubmit 提交按钮被点击、onunload 用户退出页面。
小知识（将js代码写在页面的下面，就是为了保证执行代码的时候页面已经加载完毕，window.onload 在页面上只能出现一次，后面的代码会覆盖前面的代码）
鼠标 / 键盘属性
属性 描述
altKey 返回当事件被触发时，“ALT” 是否被按下。
shiftKey 返回当事件被触发时，“SHIFT” 键是否被按下。
ctrlKey 返回当事件被触发时，“CTRL” 键是否被按下。
metaKey 返回当事件被触发时，“meta” 键是否被按下。 （键盘按键名称+Key）
relatedTarget 返回与事件的目标节点相关的节点。
screenX 返回当某个事件被触发时，鼠标指针的水平坐标。
screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。
clientX 返回当事件被触发时，鼠标指针的水平坐标。
clientY 返回当事件被触发时，鼠标指针的垂直坐标。
button 返回当事件被触发时，哪个鼠标按钮被点击。

事件冒泡（Bubble）
所谓冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
在开发中大部分情况冒泡都是有用的，如果不希望冒泡发生可以通过事件对象取消冒泡 event.cancelBubble=true
事件的委派
指将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
{addEventListener()
通过这个方法也可以为元素绑定响应函数
参数：
1.事件的字符串，不加on
2.回调函数，当事件触发时该函数会被调用
3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数
这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
这个方法不支持IE8及以下的浏览器
《btn.addEventListener(“click”,function(){
alert(1);
},false);
btn.addEventListener(“click”,function(){
alert(2);
},false);》
attachEvent()
- 在IE8中可以使用attachEvent()来绑定事件
- 参数：
1.事件的字符串，要on
2.回调函数
- 这个方法也可以同时为一个事件绑定多个处理函数
不同的是它是后绑定先执行，执行顺序和addEventListener()相反
【var btn=document.getElementById(“btn”);
btn.attachEvent(“onclick”,function(){
alert(1);
});
btn.attachEvent(“onclick”,function(){
alert(2);
});】
}
拖拽的流程
1.当鼠标被拖拽元素按下时，开始拖拽 onmousedown
2.当鼠标移动时被拖拽的元素跟着鼠标移动 onmousemove
3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
设置btn1对鼠标按下相关的事件进行捕获
当调用一个元素的setCapture()方法以后，
这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上
setCapture()
- 只有IE支持，但是在火狐中调用时不会报错，
而如果使用chrome调用，则会报错
取消捕获：releaseCapture();
键盘事件：
onkeydown: 键盘被按下事件
- 如果一直按着某个键不松开，则会一直触发该事件
- 当onkeydown事件连续触发时，第一次和第二次之间的间隔时间稍微长一点，其他则会非常快。这是为了防止误操作的发生
onkeyup: 键盘被松开的事件

键盘事件一般都会绑定给一些可以获取焦点的对象或则是document

可以通过keyCode来获取按键的编码，
通过它可以判断哪个键被按下
除了keyCode，事件对象中还提供了几个属性
altKey
ctrlKey
shiftKey
这三个属性分别是用来判断alt cltrl shift是否被按下的
如果被按下了则返回true，否则返回false