javaScript事件处理- (该到大结局的时候了)

事件(event): 事件是可以被 JavaScript 侦测到的行为。
事件类型(event type) : 是一个用来说明发生什么类型事件的字符串
事件目标(event target) : 是发生的事件的对象(那个傻逼发生那个事件，是指事件那个傻逼)
事件处理程序(event handler)或事件监听程序(event listener): 是处理或相应事件的处理函数
(根据事件注册方式区别handler,listener);
事件对象(event object): 是与特定事件相关且包含有该事件详细信息的对象,通常作为参数传递给事件处理函数(IE: window.event)
事件传播(event propagation): 是浏览器决定那个对象触发其事件处理函数的过程(event capturing , event bubble)
事件的默认行为: 单击超链接，会加载页面。单击submit按钮，会提交数据 ,等.

事件类型:

  1. 表单事件: submit , reset, click , change (改变元素的值，焦点移动到其他元素时发生), focus ,blur,input
  2.Window事件: onload(当文档和其所有外部资源完全加载并显示给用户时就会触发它) , onerror , resize ,scroll
  2. 鼠标事件:  当用户在文档上移动或单击鼠标时 会产生鼠标事件. 这些事件在鼠标指针所对应的** 最深元素上触发
    传递给鼠标事件处理程序的事件对象参数，有一些有用的属性。
    比如
       clientX和clientY属性指定了鼠标在窗口坐标中的位置,

  onmousemove(), onmousedown() , onmouseup()  ;  onclick() , ondbclick(), contextmenu() 等
  键盘事件:  onkeydown() ,onkeypress(),  onkeyup(),

注册事件处理程序

addEventListener() (IE attachEvent()), 设置HTML标签属性为事件处理程序, 设置事件js对象属性为事件处理程序
addEventListener(eventtype,function , boolean) 为同一个对象注册同一事件类型的多个处理函数函数,
当 boolean 为true ,为捕获事件处理函数;
使用相同的参数在同一个对象上多次调用addEventListener(),无效, 处理程序只注册一次.
attachEvent 注册的事件函数的内部 this是window , 发生的事件对象在window上, 即 window.event;

// 统一addEventListener() , attachEvent(),
 function addEvent(target,type,handler){
    if(target.addEventListener){
         target.addEventListener(type,handler,false)
    }else{
       target.attachEvent('on+type',     function(event){
            return handler.call(target,event);
                 }                     );
    }
 }

事件处理程序的返回值

通常返回false就是告诉浏览器不要执行这个事件的相关的默认操作.
Window对象的onbeforeunload事件处理函数，当它返回false ，那么它将出现询问对话框
表单提交按钮onclick事件返回false , 阻止浏览器提交表单
onkeydown事件处理函数返回 false 来过滤键盘输入;
通过addEventListener()或attachEvent()注册事件处理函数必须调用e.preventDefault();
或e.returnValue = false;(IE)

事件传播

一般的事件都是这样的,
第一阶段：从window对象传到目标节点，称为“捕获阶段”（capture phase）。

第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。

第三阶段：从目标节点冒泡window对象，称为“冒泡阶段”（bubble phase）。
捕获阶段调用捕获处理程序, 冒泡阶段调用一般事件处理程序,
发生的对象先调用一般处理程序，在调用捕获事件处理程序
取消事件传播 : stopPropagetion() , cancelBubble();

 document.addEventListener('click',function(e){e.stopPropagation();},true);  // 取消文档的click事件