js事件
js事件类型
HTML 事件是发生在 HTML 元素上的事情。
当在HTML页面中使用JaveScript时，JaveScript可以触发这些事件
HTML事件
HTML事件可以是浏览器行为，也可以是用户行为。
通常，当事件发生时，你可以做些事情。
在事件触发时JaveScript可以执行一些代码。
HTML元素中可以添加事件属性，使用JaveScript代码来添加HTML元素。
JavaScript可以处理表单验证、用户输入、用户行为及浏览器行为。
注意：所有的事件处理函数都由两个部分组成，on+事件名称
例如：click事件，处理函数就是onclick
鼠标类型
| 鼠标类型 | 描述 |
|---|---|
| * click | 单击鼠标按钮时触发 |
| * dblclick | 当用户双击主鼠标按钮时触发 |
| * mousedown | 当用户按下鼠标还未弹起时触发 |
| * mouseup | 当用户释放鼠标按钮时触发 |
| * mouseover | 当鼠标移到某个元素上方时触发 |
| * mouseout | 当鼠标移出某个元素上方时触发 |
| * mousemove | 当鼠标指针在元素上移动时触发 |
| mouseenter | 在鼠标光标从元素外部首次移动至元素范围内触发，不参与冒泡 |
| mouseleave | 鼠标移出元素时触发 |
| contextmenu | 在用户点击鼠标右键打开上下文菜单时触发 |
键盘类型
| 属性 | 描述 |
|---|---|
| * keydown | 当用户按下键盘上任意键时触发，如果按住不放，会重复触发 |
| * keyup | 当用户释放键盘上的键触发 |
| * keypress | 当用户按下键盘上的字符键时触发，如果按住不放，会重复触发 |
框架/对象（Frame/Object）类型
| 属性 | 描述 |
|---|---|
| * load | 当页面完全加载后在window上面触发，或当框架集加载完毕后在框架集上触发 |
| * resize | 当窗口或框架的大小变化时在window或框架上触发 |
| * scroll | 当用户滚动带滚动条的元素时触发 |
| unload | 当页面完全卸载后在window上面触发，或当框架集卸载后在框架集上触发 |
| abort | 图像的加载被中断。 ( object) |
| beforeunload | 该事件在即将离开页面（刷新或关闭）时触发 |
| error | 在加载文档或图像时发生错误。 ( object, body和 frameset) |
| hashchange | 该事件在当前 URL 的锚部分发生修改时触发 |
| pageshow | 该事件在用户访问页面时触发 |
| pagegide | 该事件在用户离开当前网页跳转到另外一个页面时触发 |
表单事件
| 属性 | 描述 |
|---|---|
| * blur | 元素失去焦点时触发 |
| * change | 该事件在表单元素的内容改变时触发 |
| * focus | 元素获取焦点时触发 |
| focusin | 元素即将获取焦点时触发 |
| focusout | 元素即将失去焦点时触发 |
| input | 元素获取用户输入时触发 |
| reset | 表单重置时触发 |
| search | 拥护向搜索域输入文本时触发( <input="search">) |
| select | 用户选取文本时触发 ( input 和 textarea) |
| submit | 表单提交时触发 |
js事件和jquery事件的区别
JavaScript 是通过标签插入到HTML页面，可由所有的现代浏览器执行的一种轻量级的编程语言。JQuery是一个JavaScript函数库。或者说是JavaScript。比如：
JS：返回的是一个数组
例：var bd = document.getElementsByName(uid);
JQUERY：的方式是用 方括号，属性=一个值，不限制非要根据name来取值，JQUERY是根据属性来取元素
例：$("[name='uid']");
④.根据标签名取元素
JS：返回的也是一个数组
例：var div = document.getElementsByTagName("div");
JQUERY：和样式表里面给所有div加样式的方法一样，在双引号内直接写标签名
例：$("div");
根据ID取元素
JS:取到的是一个DOM对象。
例：var div = document.getElementByID("one");
JQUERY:取到的是一个JQUERY对象。
例：var div = $("#one");——括号里面是根据某个东西来找，
相当于一个选择，如果我们要根据ID来找，在样式表里的ID是用#来表示的，
所以在这里我们直接带入井号，整句的意思就是根据ID为one的来查找。
根据class取元素，在数组里面如果要取DOM对象使用索引的方式，如果要取JQUERY对象使用eq()
JS:取到的是一个数组
例：var div = document.ElementsByClassName("test");
JQUERY:
例：var div = $(".test");
根据name取元素
事件对象
事件对象的含义
某一个事件被触发时（例如点击事件），此时浏览器会记录触发时的某些信息， 例如你是在哪个位置点击的，你在点击的时候是直接鼠标左键点击的，还是鼠标左右键一起点击（骚操作）的等等 浏览器把这些所有的信息放到一个变量中存储，这个变量的数据类型是对象，所以称之为事件对象。
事件对象常见的属性和方法
event.target : 返回触发事件的对象 , 点击哪个元素, 就返回哪个元素
this.target : 返回绑定事件的对象, 哪个元素绑定了这个点击事件, 就返回哪个元素.
event.type : 获取事件类型, 比如 click
event.clientX : 获取当前鼠标在网页上的横坐标,只跟网页的可视区域有关系
event.clientY : 获取当前鼠标在网页上的横坐标,只跟网页的可视区域有关系
event.screenX : 获取当前鼠标在当前显示器上的横坐标,
event.screenY : 获取当前鼠标在当前显示器上的横坐标,
evt.button : 获取鼠标点击的哪个键
event.preventDefault() : 该方法阻止默认事件.
event.stopPropagation() : 阻止冒泡.
事件的特性
事件冒泡
冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 案例：
<div id="fu" @click="shiJian('fu')">fu 冒泡
<div id="zi" @click.stop="shiJian('zi')">zi</div>
</div>
事件捕获
当鼠标点击或者触发dom事件时（被触发dom事件的这个元素被叫作事件源），浏览器会从根节点 =>事件源（由外到内）进行事件传播。 案例：
<div id="fu" @click.capture="shiJian('fu')">fu 捕获
<div id="zi" @click="shiJian('zi')">zi</div>
</div>
部分内容引用
菜鸟教程www.runoob.com/jsref/dom-o…
js事件捕获与冒泡www.jb51.net/article/424…
请私信高老师讲解内容
