js 事件

1：什么是事件？

人与机的交互就是事件。

2：事件类型：

ui事件

*onscroll 滚动条事件

onload 页面加载触发

unload 页面关闭触发

onresize 改变浏览器窗口触发

onabort 图像加载被中断触发

error 错误信息时触发

焦点事件（表单事件）

*onfocus 获得焦点事件（没有冒泡，浏览器都支持）

*onblur 失去焦点事件（没有冒泡，浏览器都支持）

onfocusin 获得焦点事件（有冒泡，IE支持）

onfocusout 失去焦点事件（有冒泡，IE支持）

onselect 选中文本时触发

*onchange 当改变一个元素的值且失去焦点时

鼠标事件

*onclick 当用户单击对象时

*ondblclick 当用户双击对象时

*onmouseout 移出事件

*onmouseover 移入事件

*onmousemove 移入元素的内部不断的移动时触发

onmousedown 在用户按下了任意鼠标按钮时触发

onmouseup 在用户释放鼠标按钮时触发

键盘事件

onKeydown： 当用户按下键盘上的任意键时触发。

onKeypress： 当用户按下键盘上的字符键时触发。

onKeyup： 当用户释放键盘上的键时触发。

keyCode 返回键盘键对应的编码

3：事件的传播机制？

事件分为2种传播机制（事件流）：

1：冒泡 （IE提出的事件流是冒泡）

2：捕获  （谷歌和火狐提出的事件流是捕获）

4：什么是冒泡事件？

1:冒泡事件是由微软公司提出的，从触发底部事件一直延续到最外层，这个现象就是冒泡！

2:只有嵌套关系的标签和都是一样的事件才可能产生冒泡！

5：阻止冒泡事件的方法：

1：evt.stopPropagation() 无法阻止 IE 低版本事件冒泡；

2: evt.cancelBubble = true;兼容 IE 低版本冒泡；

6:阻止冒泡事件的兼容写法：

if(evt.cancelBubble=true){

evt.cancelBubble=true;

}else{

evt.stopPropagation();

}

7:封装阻止冒泡事件方法：

function stopBubble(event){

    if(event.stopPropagation){

        event.stopPropagation();

    }else{

        event.cancelBubble = true;

    }

}

8：DOM0事件处理程序：

1：简单来说就是所有的事件叫DOM0事件。

    举例：

    onclick,onmouseover,onmouseout....

    2：DOM就是文档对象模型，0是指这个事件的最初版本

9: DOM2事件处理程序：

1：addEventListener(事件，函数，布尔值)   绑定事件方法  IE不支持

    举例：

        addEventListener('click',function(){

        },false)

2：是 true 的话是捕获事件，是 false 的话是冒泡事件；

3：removeEventListener() 删除事件方法  IE不支持

10: IE的DOM2方法：

attachEvent('事件'，函数)

detachEvent('事件'，函数)

11：事件委托

利用冒泡的原理，把事件加到父级上，触发执行效果。

把该是自己的事件交给其他标签来完成，就是事件委托！

把li的事件委托给父元素ul来完成。

事件委托只能是把子元素的事件委托给父元素。

12：事假委托的优点：

1：提高代码性能，运行速度加快

2：节省内存空间

13: 事件源的兼容

target 是event对象下面的属性，这个属性指向事件源

event.target 是w3c的写法，ie浏览器不支持

event.srcElement 这是IE的写法(兼容低版本IE)

兼容写法

var targt=e.target||e.srcElement;