键盘和鼠标事件以及事件冒泡

一：事件

1·1：事件的定义：

所谓事件其实就是是对html的元素进行某种操作

1·2：事件对象(Event)：

当某一个事件被触发的时候产生的对象，就是事件的对象。

1·3：事件对象的【兼容】:

document.onclick = function(evt){
	//兼容写法
	var e = evt || event;
	console.log(e);
}

【注意】:事件对象的使用前提，必须有事件，不同的事件产生的事件对象是不同的

1·4：事件的三要素：

事件源，事件类型，事件对象

二：鼠标事件对象的属性

2·1：坐标事件

• pageX/pageY

  相对于整个文档顶部和左侧的坐标

• clientX/clientY

  相对于局部窗口的左侧和顶部的坐标（主要区别在有滚动条显示比较明显）

• offsetX/offsetY

  相对于内部元素的距离左侧和顶部的坐标（常用于拖拽）

三：键盘事件对应的属性

【注意】：键盘事件对象都是通过document来进行触发的

• keyUp：用户释放某一按键时发生。

• keyDown：用户按下某一按键时发生

• keyPress：用户按下按键，并且产生一个具有语义的字符时发生（即就是按功能键是没有效果的）（ctrl+回车返回的ASCII码为10 ）

• keyCode：键盘录入时字母所对应ASC码

    document.onkeypress = function(evt){
          var e = evt || event;
        //事件对象.keyCode
          if(e.keyCode == 13 || e.keyCode == 10 && e.ctrlKey){
              alert("send");
          }
    }    
  

【兼容】：兼容写法

var key = e.keyCode || e.charCode || e.which;
		console.log(key);

• ctrlkey：返回当事件被触发时，“ctrl”键是否被按下，返回值为Boolean值（true，false）

四：事件流

定义：当某一个事件被执行的时候，无论是从子元素到父元素触发还是从父元素到子元素开始触发，都被称为事件流，事件流有两种模式

4·1：事件冒泡

4.1.1:定义：

当同一个事件被触发的时候，事件会从子元素向父元素开始触发

但并不是所有的事件都会产生冒泡问题(onfocus onblur onload不会产生冒泡问题 )

4.1.2:阻止事件的冒泡

• 非IE：e.stopPropagation();

• IE:e.cancelBubble = true;

• 【兼容写法】

  //证明该方法在浏览器中存在
  e.stopPropagation ? e.stopPropagation():e.cancelBubble = true;
  

4·1·3：阻止浏览器的默认行为

• 非IE：e.preventDefault();

• IE：e.returnValue = false;

• 【兼容写法】

  //证明该方法在浏览器中存在
  e.preventDefault ? e.preventDefault():e.returnValue = false;
  

• return false（也可以阻止浏览器的默认行为）

浏览器中存在
e.preventDefault ? e.preventDefault():e.returnValue = false;

- return false（也可以阻止浏览器的默认行为）

### 4·2：事件捕获