day19

事件的组成

事件源 事件类型 事件处理程序 我们也称为事件三要素
1.事件源：事件被触发的对象 -->按钮对象
2.事件类型：如何触发？触发什么事件？例如鼠标点击，键盘按下等…
3.事件处理程序：通过一个函数赋值的方式

事件流

描述的是页面接受事件的顺序
事件捕获 -> 到达目标 -> 事件冒泡

事件处理程序

1.HTML事件处理程序
2.DOM0事件处理程序

<button id='btn'>点我啊</button>
<script>
  var btn = document.getElementById('btn');
  btn.onclick = function () {
    console.log('我被点击了');
  }//添加
  btn.onclick = null;//移除
</script>

3.DOM2事件处理程序
注意：在移除时参数必须相同才能移除

<button id='btn'>点我啊</button>
<script>
  var btn = document.getElementById("btn");
  btn.addEventListener("click", function () {
    console.log('我被点击了');
  }, false);
  // 移除
  btn.removeEventListener("click", function () {
    console.log(this.id); //没有效果
  })
</script>

阻止默认事件发生

event.preventDefault();

事件委托

利用事件冒泡，把事件委托给父元素，可以使子元素都可以触发该事件，而不需要去为每个元素添加事件

事件类型

1. 用户界面事件
   load：加载完成后触发
   unload：卸载后触发
   select：在文本框选择字符时触发
   resize：窗口被缩放时触发
   scroll：滚动元素时触发
2. 焦点事件
   blur：失去焦点触发（不冒泡）
   focus：获得焦点触发（不冒泡）
   focusout：失去焦点冒泡版
   focusin：获得焦点冒泡版
3. 鼠标事件
   click：鼠标点击
   dblclick：鼠标双击
   mousedown：按下鼠标
   mouseenter：鼠标移入（不冒泡）
   mouseleave：鼠标移出（不冒泡）
   mousemove：鼠标在元素上移动
   mouseout：鼠标从一个元素移到另一个元素上
   mouseover：鼠标从元素外部移到元素内部
   mouseup：释放鼠标
   mousewheel：鼠标滚轮事件
4. 键盘事件
   keydown：按下键盘某个键触发
   keypress：按下某个键并产生字符时触发
   keyup：释放时触发