JS，JQuery事件整理及对比

JS事件名称

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

1. onabort 图像加载被中断
2. onblur 元素失去焦点
3. onchange 用户改变域的内容
4. onclick 鼠标点击某个对象
5. ondblclick 鼠标双击某个对象
6. onerror 当加载文档或图像时发生某个错误
7. onfocus 元素获得焦点
8. onkeydown 某个键盘的键被按下
9. onkeypress 某个键盘的键被按下或按住
10. onkeyup 某个键盘的键被松开
11. onload 某个页面或图像被完成加载
12. onmousedown 某个鼠标按键被按下
13. onmousemove 鼠标被移动
14. onmouseout 鼠标从某元素移开
15. onmouseover 鼠标被移到某元素之上
16. onmouseup 某个鼠标按键被松开
17. onreset 重置按钮被点击
18. onresize 窗口或框架被调整尺寸
19. onselect 文本被选定
20. onsubmit 提交按钮被点击
21. onunload 用户退出页面

JQuery事件名称

事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

1. bind() 向匹配元素附加一个或更多事件处理器
2. blur() 触发、或将函数绑定到指定元素的 blur 事件
3. change() 触发、或将函数绑定到指定元素的 change 事件
4. click() 触发、或将函数绑定到指定元素的 click 事件
5. dblclick() 触发、或将函数绑定到指定元素的 double click 事件
6. delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器
7. die() 移除所有通过 live() 函数添加的事件处理程序。
8. error() 触发、或将函数绑定到指定元素的 error 事件
9. event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。
10. event.pageX 相对于文档左边缘的鼠标位置。
11. event.pageY 相对于文档上边缘的鼠标位置。
12. event.preventDefault() 阻止事件的默认动作。
13. event.result 包含由被指定事件触发的事件处理器返回的最后一个值。
14. event.target 触发该事件的 DOM 元素。
15. event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
16. event.type 描述事件的类型。
17. event.which 指示按了哪个键或按钮。
18. focus() 触发、或将函数绑定到指定元素的 focus 事件
19. keydown() 触发、或将函数绑定到指定元素的 key down 事件
20. keypress() 触发、或将函数绑定到指定元素的 key press 事件
21. keyup() 触发、或将函数绑定到指定元素的 key up 事件
22. live() 为当前或未来的匹配元素添加一个或多个事件处理器
23. load() 触发、或将函数绑定到指定元素的 load 事件
24. mousedown() 触发、或将函数绑定到指定元素的 mouse down 事件
25. mouseenter() 触发、或将函数绑定到指定元素的 mouse enter 事件
26. mouseleave() 触发、或将函数绑定到指定元素的 mouse leave 事件
27. mousemove() 触发、或将函数绑定到指定元素的 mouse move 事件
28. mouseout() 触发、或将函数绑定到指定元素的 mouse out 事件
29. mouseover() 触发、或将函数绑定到指定元素的 mouse over 事件
30. mouseup() 触发、或将函数绑定到指定元素的 mouse up 事件
31. one() 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
32. ready() 文档就绪事件（当 HTML 文档就绪可用时）
33. resize() 触发、或将函数绑定到指定元素的 resize 事件
34. scroll() 触发、或将函数绑定到指定元素的 scroll 事件
35. select() 触发、或将函数绑定到指定元素的 select 事件
36. submit() 触发、或将函数绑定到指定元素的 submit 事件
37. toggle() 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
38. trigger() 所有匹配元素的指定事件
39. triggerHandler() 第一个被匹配元素的指定事件
40. unbind() 从匹配元素移除一个被添加的事件处理器
41. undelegate() 从匹配元素移除一个被添加的事件处理器，现在或将来
42. unload() 触发、或将函数绑定到指定元素的 unload 事件

触发实例：

$("button#demo").click()

上面的例子将触发 id=“demo” 的 button 元素的 click 事件。

绑定实例：

$("button#demo").click(function(){$("img").hide()})

上面的例子会在点击 id=“demo” 的按钮时隐藏所有图像。

Js事件与Jquery事件

1、即时反应的input和propertychange方法 ：https://www.cnblogs.com/LHYwin/p/6136256.html

2、js自定义一个事件 ： http://www.jb51.net/article/83911.htm

自定义事件需要用到函数Event 、CustomEvent 和 dispatchEvent。内置的事件会由浏览器根据某些操作进行触发，自定义的事件就需要人工触发（dispatchEvent ）。

3、元素事件传递 问题：

1、事件冒泡和事件捕获（标准文档流中）；

2、固定和绝对定位元素z-index比标准文档流的大，会遮挡下面元素的事件触发（CSS属性：pointer-events:none;可以让事件传递下去。）；

体会：pointer-events:none;这个属性相当于告诉浏览器，所有的事件都把我忽略了吧，对于事件而言我是不存在的，即不阻挡也不反应。

3、相对定位的z-inde属性失效，所以不存在遮挡下面元素；

4、定位元素的子元素，如果再定位的话，不能阻止事件传递到这个父定位元素中（这个方法就没法实现点击模态框空白部分，隐藏模态框的效果）。

5、在js中给一个元素DOM绑定事件，可以阻止事件冒泡，从而阻止事件传递。

6、在CSS中有一个 pointer-events: none;属性，可以让当前标签完全没有事件，里面子标签的事件也被禁掉了。（这个感觉在阻止事件传递上不实用，

既然给这个标签绑定了事件，又让它不能被触发 比较矛盾，我们只是不想让子元素的事件，传递到父元素中。）

JavaScript事件
1、事件流

2、DOM0级事件处理程序（类似jQuery事件的快捷）

3、DOM2级事件处理程序（类似jQuery事件的on方式）

4、IE事件处理程序 （ attachEvent() 和 detachEvent() ）

5、事件对象

参考：https://www.cnblogs.com/chun6/p/6063522.html

jQuery事件
1、快捷方式

2、on方式

3、JQuery的事件对象属性与方法

参考：https://blog.youkuaiyun.com/thevictory/article/details/54772951

转载于:https://www.cnblogs.com/wfblog/p/9041442.html

相关资源：JQUERY事件大全_jquery事件-Javascript文档类资源-优快云文库