Javascript高级程序设计第二版第十二章--Event--笔记-阿里云开发者社区

Javascript高级程序设计第二版第十二章--Event--笔记

2017-11-15 1207

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

今天给诸位分享一下 chapter 12 Events

所谓事件就是页面与文档窗口发生交互的瞬间。当年事件发生时它可以被预定（程序处理）。

事件有两个过程，冒泡过程，或捕获过程。

冒泡是自上而下，捕获是自下而上。
这个顺序是document -> html -> body -> onclick element

比如单击一下一个div，但浏览器不认为你只单击一个dom元素，而是div,body,html,document等这些元素。

dom一般会处理捕获或冒泡时的事件，但ie只处理冒泡时，
ie的event 处理 attachEvent(type,fn);
dom addEventListener(type,fn, true|false);

 
  dom addEventListener(type,fn, 
  true
  |
  false
  );
 type:事件类型，
 fn:事件处理函数

  true
   在捕获阶段， 
  false
   在冒泡阶段。 
 

司徒的通用addEvent:

  
 
 
  addEvent:
  function
  (el, type, fn ) {
   
  if
  (
  !+
  "
  \v1
  "
  ) {
       el[
  '
  e
  '
  +
  type
  +
  fn]
  =
  fn;
       el.attachEvent( 
  '
  on
  '
  +
  type, 
  function
  () {
           el[
  '
  e
  '
  +
  type
  +
  fn]();
       } );
   }
  else
  {
       el.addEventListener( type, fn, 
  false
   );
   }
 } 
 

  
 

这与平常的element.onclick这种有什么区别呢？

如果给element上添加两个onclick只会执行一个。但attachEvent添加两个，会从后往执行。

对应的删除事件：detchEvent() removeEventListener()

  
  一般事件分五类：

  1
  . UI事件，

  2
  . 7个鼠标事件(click,dblclick,mousedown,mouseover,mousemove,mouseup,mouseout,)

  3
  . 3个键盘事件( keypress,keydown,keyup)

  4
  . html事件(load,resize,scroll,unload)

  5
   因dom变化引起的事件