JS 事件初识

什么是事件？

事件就是在文档或者浏览器窗口触发的某些动作，例如鼠标点击或滚动，键盘按下放起等。

事件分类

1. 鼠标事件
   • click 单击鼠标事件
   • blclick 双击鼠标事件
   • mouseover 鼠标移入目标元素(该事件冒泡)
   • mouseenter 鼠标移入元素范围内触发(该事件不冒泡)
   • mouseout 鼠标移出目标元素上方(该事件冒泡)
   • mouseleave 鼠标移出目标元素(该事件不冒泡)
   • mousedown 鼠标按下时触发
   • mouseup 鼠标抬起时触发
2. HTML 事件
   • load 处理元素加载事件
   • scroll 处理元素滚动时
   • submit 点击提交按钮触发 <input type="submit" />
   • change 设置当前元素的 change 事件，和 oninput 不同 onchange事件处理程序不一定会针对元素值的每次更改而调用
   • input 处理input select textarea 元素上的 input 事件
   • foucs 当前元素获得焦点时会触发
   • blur 当前元素失去焦点时会触发
3. 键盘事件
   • keydown 键盘按下时触发（任何按键有效）
   • keypress 键盘按下并放开时触发（系统按键无效，例如：箭头按键，功能按键）
   • keyup 放开按键时触发（任何按键有效）

事件使用

1. HTML 事件

1. 绑定：绑定操作发生在 HTML 代码中的事件，称为 HTML 事件。
   语法上：on + 事件名称 = "函数1;函数2;"。例如：
   <div onclick="fun1();"></div> <div onmouseover="fun1();fun2();"></div>
2. 移除：
   element.setAttribute("on+事件名称", null)
element.removeAttribute("on+事件名称")

缺点： JS 与 HTML 耦合性太强，修改了 JS 也可能要修改 HTML。当函数没有加载成功时，用户去触发事件，则会报错。

2. DOM 0级 事件

调用函数的方式：

1. 节点.on+事件名称 = function() {}
2. 节点.on+事件名称 = 函数名
   例如：div.onclick = function() {} div[".onclick "]= function() {} div.onclick = fun1()

3. DOM 2级 事件

1. 事件流语法：
   1. 非ie8以下：对象.addEventListener("事件类型","函数","事件流")，事件类型：不加on。例如：
      div.addEventListener("click",fun1(),false) //冒泡型
   2. ie8以下：对象.attachEvent("事件类型","函数","事件流")，事件类型：加on。例如：
      div.attachEvent("onclick",fun1(),true) //捕获型

注：事件流参数有两个值：
默认值：false，冒泡型(事件由内到外)
true，捕捉型(事件由外到内)

2. 冒泡：事件由某个元素（子节点）逐级向上传播（父节点）
3. 捕获：事件由某个元素（父节点）逐级向下传播（子节点）
4. DOM2 事件移除的方式:
   • ie8以上或者非ie：elementNode.removeEventListener("事件类型","函数","事件流")
   • ie8以下：elementNode.detachEvent("on+事件类型","移除后的回调函数")

DOM0 和 DOM2 的区别

1. DOM0 一个元素节点赋值多个事件，只引用最后一个。DOM2 一个元素节点添加多个事件都会应用。例如：

div.onclick = fun1;
div.onclick = fun2;
div.onclick = fun3;
//只有最后一个有用

div.addEventListener("click",fun1);
div.addEventListener("click",fun2);
div.addEventListener("click",fun3);
//三个事件都有用

怎样阻止冒泡和捕获？

ie8以上或者非ie：e.stopPropagation()
ie8以下：window.event.cancelBubble = true