夏日博客

A-A+

jquery 自定义事件的创建、触发、冒泡例子

2016年01月10日 前端设计 暂无评论 阅读 6 views 次

下面为各位介绍一个jquery 自定义事件的创建、触发、冒泡例子,如果大家对于自定义事件的创建、触发、冒泡不懂就可以和小编一起来看看到吧。

1、事件类别

暂且不深入的说明JS的事件是如何注册和触发的，本文就浅显的将JS事件表面的了解下。在浏览器事件（事件都与JS有关，事件是为JS脚本服务的）中，最顶层的事件构造函数为Event，其他事件都是由Event派生出来的。

派生出的事件有：

  1. AnimationEvent  
  2. AudioProcessingEvent  
  3. BeforeInputEvent  
  4. BeforeUnloadEvent  
  5. BlobEvent  
  6. ClipboardEvent  
  7. CloseEvent  
  8. CompositionEvent  
  9. CSSFontFaceLoadEvent  
  10. CustomEvent  
  11. DeviceLightEvent  
  12. DeviceMotionEvent  
  13. DeviceOrientationEvent  
  14. DeviceProximityEvent  
  15. DOMTransactionEvent  
  16. DragEvent  
  17. EditingBeforeInputEvent  
  18. ErrorEvent  
  19. FocusEvent  
  20. GamepadEvent  
  21. HashChangeEvent  
  22. IDBVersionChangeEvent  
  23. KeyboardEvent  
  24. MediaStreamEvent  
  25. MessageEvent  
  26. MouseEvent  
  27. MutationEvent  
  28. OfflineAudioCompletionEvent  
  29. PageTransitionEvent  
  30. PointerEvent  
  31. PopStateEvent  
  32. ProgressEvent  
  33. RelatedEvent  
  34. RTCPeerConnectionIceEvent  
  35. SensorEvent  
  36. StorageEvent  
  37. SVGEvent  
  38. SVGZoomEvent  
  39. TimeEvent  
  40. TouchEvent  
  41. TrackEvent  
  42. TransitionEvent  
  43. UIEvent  
  44. UserProximityEvent  
  45. WheelEvent  

2、创建事件

2.1、使用Event构造函数来创建事件：

  1. // 事件监听一个自定义事件 hello  
  2. document.addEventListener('hello', function(){  
  3.  alert('I\'m here!');  
  4. });  
  5. // 创建事件  
  6. var event = new Event('hello');  
  7. // 触发事件  
  8. document.dispatchEvent(event);  

事件回调里，都会有传递一个event参数，可以看看：

注意红色方框中的部分，该事件有是否冒泡、事件目标、事件类型以及事件的原型方法，与浏览器默认的事件几乎无异。
创建自定义事件，还有其他方式，分别是：

2.2、使用CustomeEvent构造函数：

  1. var event = new CustomEvent('hello2', {  
  2.     // 是否冒泡  
  3.     bubbles: true,  
  4.     // 是否可以被取消  
  5.     cancelable: true,  
  6.     // 自定义属性  
  7.     detail:{  
  8.         text: 'hello world',  
  9.     }  
  10. });  
  11.    
  12. // 标准属性  
  13. event.clientX = 100;  
  14. event.clientY = 200;  

2.3、使用createEvent方法：

  1. var event = document.createEvent('Events');  
  2. // 初始化事件  
  3. // 参数1：事件类型  
  4. // 参数2：是否冒泡  
  5. // 参数3：是否可以取消  
  6. // 还有其他参数，这里不赘述了  
  7. event.initEvent('hello', true, true);  
  8.    
  9. // 标准属性  
  10. event.clientX = 100;  
  11. event.clientY = 200;  
  12.    
  13. // 自定义属性  
  14. event.detail = {  
  15.     text: 'hello world',  
  16. };  

3、事件属性

标准的事件属性有：clientX、clientY、pageX、pageY、screenX、screenY等，上图并没有这些东西，我们可以手动加上去。

在实例化一个新的事件的时候，我们可以手动加上事件的是否冒泡、是否可以被取消等关键信息，这些信息是不可被二次修改的，因此必须在实例化的时候赋值。

  1. // 创建事件  
  2. var event = new Event('hello', {  
  3.  // 是否冒泡  
  4.  bubbles: true,  
  5.  // 是否可以被取消  
  6.  cancelable: true  
  7. });  
  8. // 标准事件属性  
  9. event.clientX = 100;  
  10. event.clientY = 200;  
  11. // 自定义事件属性  
  12. event.detail = {  
  13.  text: 'hello world',  
  14. };  
标签：

给我留言