JavaScript-事件

事件

事件介绍

事件是您在编程时系统内发生的动作或者发生的事情，系统通过它来告诉您在您愿意的情况下您可以以某种方式对它做出回应。

常用事件

事件名	作用
click	监听元素的点击事件
mouseover	监听鼠标的移入事件（会产生冒泡）
mouseenter	监听鼠标的移入事件（不会产生冒泡）
mousemove	监听鼠标的移动事件
mouseout	监听鼠标的移除事件（会产生冒泡）
mouseleave	监听鼠标的移除事件（不会产生冒泡）
foucs	监听元素获取焦点
blur	监听元素失去焦点
load	监听元素加载完毕
input	监听输入框、文本框内容的改变（实时）
change	监听对输入框、文本框内容的操作（仅在表单失去焦点触发，不需要改变）
submit	监听表单的提交事件
keydown	监听任意键盘按键的按下事件
keypress	监听除 Fn、Shift、CapsLock以外键盘按键的点击事件（持续）
keyup	监听任意键盘按键的释放事件
mousedown	监听任意鼠标按键的按下事件
mouseup	监听任意鼠标按键的释放事件
darg	监听元素的拖动事件
scroll	监听页面的滚动事件
resize	监听窗口的缩放事件

事件的绑定

• 行内事件绑定

  <button onclick="btnClick()">点我</button>
  

  // 不推荐
  function btnClick(){
      // ...
  }
  

• on+事件名

  oBtn.onclick = function(){
  	// ...
  }
  

• 通过addEventListener方法

  // IE9 及以上
  oBtn.addEventListener('click', function(){
      // ...
  });
  

• 通过attachEvent 方法

  // IE9 以下
  oBtn.attachEvent('onclick', function(){
      // ...
  });
  

几种添加事件方法的区别：

• 通过on+事件名 来绑定事件时，若给同一个元素绑定了多个同名的事件，那么后绑定的事件会覆盖先绑定的事件。

• 通过addEventListener 来绑定事件时，若给同一个元素绑定了多个同名的事件，那么会先执行先绑定的，后执行后绑定的。

• 通过attachEvent 来绑定事件时，若给同一个元素绑定了多个同名的事件，那么会先执行后绑定的，后执行x先绑定的。

• 兼容性写法

  function addEvent (eventname, callback){
      this.attachEvent ? this.attachEvent('on'+eventname, callback) : this.addEventListener(eventname, callback);
  }
  

事件执行的三个阶段

• 事件捕获（从父元素到子元素）
• 事件执行（子元素）
• 事件冒泡（子元素到父元素）

通过绑定事件只能同时触发事件的两个阶段：捕获和执行、执行和冒泡

• 通过on+事件名 以及 attachEvent方法只能触发事件冒泡
• addEventListener可以传递三个参数,第三个参数传递 true/false, true表示接受事件捕获, false表示接受事件冒泡

事件对象

事件对象是当注册事件被触发时，系统自动创建的对象，其中保存了与这次事件有关的全部信息。

oBtn.onclick = function(event){
    let evt = event || window.event;
    
    console.log(evt); // click 对象
    console.log(typeof evt); // Object
}

事件对象内常用属性：

• Event.target：事件起源目标的引用
• Event.type：事件的类型

事件位置的获取

• offsetX / offsetY：事件触发相对于当前元素的位置

• clientX / clientY：事件触发相对于可视区域的位置（不包括滚动出去的距离）

• pageX / pageY：事件触发相对于浏览器的位置（包括滚动出去的距离）（只支持高级浏览器）

• screenX / screenY：事件触发相对于显示器的位置

  oBtn.onclick = function(event){
      
      // event.offsetX
      // event.clientX
      // event.pageX
      // event.screenX
  }
  

事件冒泡

当一个子元素上触发了事件，事件会从子元素逐层向父元素传递，从而使父元素上也能够监听到事件的触发，这就叫做事件冒泡

阻止事件冒泡：

oBtn.onclick = function(event){
    let evt = event || window.event;
    
    // event.stopPropagation(); // IE9 及以上
    // event.cancelBubble = true; // IE9 以下
    evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;
}

默认事件

在JavaScript中为了编程方便，内置了一些默认事件，如a标签的自动跳转，form表单的自动提交。这些默认事件。

阻止默认事件：

oA.onclick = function(event){
    let evt = event || window.event;
    
    // e.preventDefault(); // IE9 及以上
    // e.returnValue = false; // IE9 以下
    
    return false; // 阻止默认事件
}