JS事件（常用）
网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比如说，我们可以在用户点击某按钮时产生一个onclick事件来触发某个函数。事件在HTML页面中定义。
注意：事件通常与函数配合使用，当事件发生时函数才会执行
一.事件类型
- JS事件可以的处理的事件类型为：鼠标类型、键盘类型和HTML类型
- 注意：所有的事件处理函数都由两个部分组成、on+事件名称
- 例如：click事件，处理函数就是onclick！
1.常用的鼠标事件
| onclick | 单击鼠标左键触发 |
|---|---|
| ondbclick | 双击鼠标左键触发 |
| onmousedown | 单击任意一个鼠标按键时触发 |
| onmousemove | 鼠标在某个元素上移动时持续触发 |
| onmouseout | 鼠标指针移出一个元素边界时触发 |
| onmouseup | 松开鼠标任意一个按键触发 |
| onmouseover | 鼠标指针移到一个元素上时触发 |
2.键盘事件
| 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事件和jqurey事件的区别
1.本质区别：
- js都知道是网页脚本语言，类似Java是一种开发常用语言；
- jQurey是基于JS语言封装出来的一个前端框架；
- 所以最本质的区别就是JS是一种语言，而jQurey是基于该语言的一种框架
2.用法差别：
1、jQuery与js最直观的区别就是外观上jQuery对象比js对象多了"$()"。
2、jQuery与js操作内容的区别：
a.非表单元素（如果是文本就用text方法，如果是html代码就用html方法）
(1).div.text();无参数的情况下是取值
(2).div.text("1111");有参数的情况下是赋值
(3).div.html();无参数的情况下是取值
(4).div.html("1111");有参数的情况下是赋值
b.表单元素
JS：
(1).div.value;取值；
(2).div.value = xxx;赋值
jQurey：
(1).div.val();无参数是取值，有参数是赋值。
3.jQurey与JS操作属性的区别：
js里面用来操作属性的方法是：
(1).div.setAttribute("","");——设置属性、修改属性
(2).div.removeAttribute("");——移除属性,引号里面写一个属性名
(3).div.getAttribute();——获取属性
jQurey里面用来操作属性的方法是：
(1).添加属性：div.attr("test","aa");——给这个attr方法加入参数，属性名叫test，属性的值是aa
(2).移除属性：div.removeAttr("test");——移除test这条属性
(3).获取属性：div.attr("test");在attr方法里面直接写入一个属性的名
4.jqurey与JS操作样式的区别：
JS里面操作样式的关键字是style。
(1).div.style.backgroundcolor = "red";——把这个div背景色设置成为了红色。
jQurey里面操作样式的关键字是css。
(1).div.css("background-color","yellow");把这个div的背景色变为黄色
5.jqurey与JS选取元素的区别：
(1).根据ID取元素
JS：取到的是一个DOM对象。
(1).var div = document.getElementByID("one");
jQurey:取到了是一个jQurey对象。
(1).var div = $("#one");——括号里面是根据某个东西来找，相当于一个选择，如果我们要根据ID来找，在样式表里的ID是用#来表示的，所以在这里我们直接带入井号，整句的意思就是根据ID为one的来查找。
(2).根据class取元素，在数组里面如果要取DOM对象使用索引的方式，如果要取jQurey对象使用eq（）
JS：取到了是一个数组
(1).var div = document.ElementsByClassName("test");
jQurey:
(1).var div = $(".test");
(3).根据name取元素
JS：返回的是一个数组
(1).var bd = document.getElementsByName(uid);
jQuery：的方式是用方括号，属性=一个值，不限制非要根据name来取值，jQuery是根据属性来取元素
(1).$("[name='uid']");
(4).根据标签名取元素
js：返回的也是一个数组
(1)var div = document.getElementsByTagName("div");
jQuery：和样式表里面给所有div加样式的方法一样，在双引号内直接写标签名
(1)$("div");
三.事件对象属性方法
1.事件对象event的属性：
| type | 返回事件的类型 比如click mouseover 不带on |
|---|---|
| target | 返回触发事件的对象 标准 |
| srcElement | 返回触发事件的对象 非标准 IE6-8使用 |
| e.cancelBubble | 该属性阻止冒泡 |
| e.returnValue | 该方法阻止默认事件（默认行为） |
| button | 声明被按下的鼠标键 |
| clientX/clientY | 事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置，X时光标相对于该网页的水平位置，Y时作用光标相对于该网页的垂直位置 |
| screenX、screenY | 鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口，这两个属性很重要；X时光标相对于该屏幕的水平位置，Y时作用光标相对于该屏幕的垂直位置 |
| offsetX,offsetY/layerX,layerY | 事件发生的时候，鼠标相对于源元素左上角的位置 |
| x,y/pageX,pageY | 检索相对于父元素鼠标水平坐标的整数 |
2.事件对象常用的方法
事件冒泡默认行为是传递冒泡，这样就会造成不必要的事件被触发，如何让不必要的事件被触发，就需要阻止冒泡的行为，事件对象提供了阻止冒泡的方法：
-
event.preventDefault() ：阻止默认行为。
-
event.stopPropagation() ：阻止事件冒泡。
