js事件
一、事件类型
JavaScript可以处理的时间类型分为三种：键盘类型、鼠标类型、HTML类型。
不过，需要注意的是想要触发事件必须得在事件名称前 +“on”。
语法为：on+事件名称
举例：click事件，onclick
1、鼠标事件
常用的鼠标事件：
| event事件名称 | 描述 |
|---|---|
| onload | 页面加载时触发 |
| onclick | 鼠标点击时触发 |
| onmouseover | 鼠标滑过时触发 |
| onmouseout | 鼠标离开时触发 |
| onfoucs | 获得焦点时触发 |
| onblur | 失去焦点时触发 |
| onchange | 域的内容改变时发生 |
| onsubmit | 表单中的确认按钮被点击时发生 |
| onmousedown | 鼠标按钮在元素上按下时触发 |
| onmousemove | 在鼠标指针移动时发生 |
| onmouseup | 在元素上松开鼠标按钮时触发 |
| onresize | 当调整浏览器窗口大小时触发 |
| onscroll | 拖动滚动条滚动时触发 |
2、键盘事件
- onkeydown：在用户按下一个键盘按键时发生、
- onkeypress：在键盘按键被按下并释放一个键时发生
- onkeyup：在键盘按键被松开时发生
- keycode：返回onkeydown、onkeypress或onkeyup。
3、HTML事件
onload：当页面完全加载后在window上面触发，或当框架集加载完毕后在框架集上触发；
onunload：当页面完全卸载后在window上面触发，或当框架集卸载后在框架集上触发；
onselect：当用户选择文本框（input或textarea）中的一个或多个字符触发；
onchange：当文本框（input或textarea）内容改变且失去焦点后触发；
oninput：输入；
onfocus：当页面或者元素获得焦点时在window及相关元素上面触发；
onblur：当页面或元素失去焦点时在window及相关元素上触发；
onsubmit：当用户点击提交按钮在
元素上触发；onreset：当用户点击重置按钮在元素上触发；
onresize：当窗口或框架的大小变化时在window或框架上触发；
onscroll：当用户滚动带滚动条的元素时触发；
二、js事件与jquery事件的区别
一、入口函数的不同
1、js：window.onload = function(){内部放js}
实质就是一个事件，拥有事件的三要素，事件源，事件，事件处理程序。等到所有内容，以及我们的外部图片之类的文件加载完了之后，才会去执行。只能写一个入口函数；
2、jQuery:(document).ready(function(){})是在 html所有标签都加载之后，就回去执行，可以写多个；
二、获取元素的方式不同
1、js：常用的以下几个，除了id，其他的结果都是伪数组；
2、jQuery：$(" ")通过和css雷同的选择器方式来获取元素。得到的是jquery对象（dom元素的数组，外加其他一些成员）。即使写的是id，唯一的，得到的对象都不是单一的；
本质上jquery方式和qs方式都是获取DOM数组， 只不过jquery会多一些其他成员，DOM数组的每一个成员注册事件不能像jquery一样直接注册， 必须分别给每个元素注册；
三、DOM对象和jquery对象的相互转换
1、jQuery对象转换成DOM对象，方式一：(“#btn”)[0]，方式二：(“#btn”).get(0)得到dom对象；
2、eq（0）得到jquery对象
DOM对象转换成jQuery对象：
$(document) -> 把DOM对象转成了jQuery对象
var btn = document.getElementById(“btn”);
btn -> (this)
Jquery得到的元素类型都是对象，内容是伪数组，无论是不是唯一的元素；
四、事件处理程序不同
1、js：document.getElementById(“id”).onclick = function(){ // 语句 }
document.getElementById(“id”).addEventListener("click",function(){})
onclick，onfoucs，onblur，fouce（自动获得），select（自动选择文本域内容），onmouseover，onmouseout，
oninput/onpropertychange用户输入事件，onchange(下拉菜单select内容发生改变时发生事件，如果内容为几，那么做出什么反应)，
2、jquery：$(“#id”).click(function(){ // 语句 });
三、事件对象
在触法DOM上的某个事件时、会产生一个事件对象event，这个对象中包含着所有与该事件有关的信息。
一、event的属性
| 属性 | 作用 |
|---|---|
| timeStamp | 返回事件生成的日期和时间 |
| bubbles | 返回布尔值，指示事件是否是起泡事件类型 |
| button | 返回当事件被触发时，哪个鼠标按钮被点击 |
| pageX | 光标相对应于该网页的水平位置 |
| pageY | 光标相对应于该网页的垂直位置 |
| screenX | 光标相对应于该屏幕的水平位置 |
| screenY | 光标相对应于该屏幕的垂直位置 |
| targent | 该事件被传送到的位置 |
| type | 事件的类型 |
| clientX | 光标相对于该网页的水平位置 |
| clientY | 作用光标相对于该网页的垂直位置 |
二、事件对象方法
事件冒泡默认行为是传递冒泡，这样就会造成不必要的事件被触发，如何让不必要的事件被触发，就需要阻止冒泡的行为，事件对象提供了阻止冒泡的方法：
| 方法 | 描述 |
|---|---|
| stopPropagation（） | 阻止冒泡 |
| prevent Default（） | 阻止默认事件 |
