DOM事件(上)

事件基础

事件概述

• 我们把用户跟页面之间的所有交互动作统称为事件。每个动作都是一个事件。比如点击事件、输入框获取焦点、失去焦点。
• JavaScript可以实现在某个事件触发时，可以执行指定的代码
• 简单理解： 触发 — 响应机制。

事件三要素

1. 事件源(谁，哪个)
2. 事件类型(什么事件)
3. 事件执行程序(干什么)

//例: 点击一个按钮，弹出对话框
//（1）事件源  事件触发的对象   ，谁-----> 按钮
var btn=document.querySelector('#btn');
//(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序 点击之后发生什么  ---弹出对话框  通过一个函数赋值的方式 完成
btn.addEventListener('click',function(){
   alert("点我干哈")； 
});

执行事件的步骤

1. 获取事件源(在DOM对节点和元素操作中查看)
2. 注册事件(绑定事件)
3. 添加事件处理程序（DOM0/2级方式）

绑定事件(注册事件)

• 概念：给元素添加事件

绑定事件的方式

传统方式DOM0级	添加事件监听方式DOM2级
直接在页面标签中书写对应的事件或调用函数，如下：	W3C标准推荐方式
<button onclick = "alert("hello world")"></button>	事件源.addEventListener('事件名'，function(){事件执行程序})
btn.onclick = function() {事件执行程序}
缺点：对于同一元素的同一个事件，只能添加一个，若添加多个则后面的会覆盖掉前面的	特点：同一个元素同一个事件可以绑定多个监听器，执行时按顺序依次执行
只支持冒泡，不支持捕获	都支持

传统方式DOM0级

//1. 直接写在标签代码上
<标签名 on事件名="要执行的代码">
//例子：给div设置点击事件，触发点击时执行demo函数
<div onclick="demo()"></div>
//2. JavaScript代码
标签变量名.on事件名 = function(){
    //事件触发时要执行的代码
}

addEventListener()事件监听方式

• eventTarget.addEventListener()方法将指定的监听器绑定到 eventTarget（目标对象，目标元素）上

eventTarget.addEventListener(eventType,function,[usecap]);

• 该方法接收三个参数
  • eventType:事件类型，比如click,mousemove注：**这里不带 on**
  • function :事件处理函数
  • usecap:可选参数，是一个布尔值，默认为false(在DOM事件流中，表示是否捕获阶段执行)

//例子：给div设置点击事件，触发点击时执行demo函数，捕获和冒泡都要执行，
var div = document.querySelector('div');
div.addEventListener('click',demo,false);//冒泡阶段处理
div.addEventListener('click',demo,true);//捕获阶段处理
function demo(){
    //要执行的代码
}
//或
div.addEventListener('click',function(){
   // 要执行的代码
},false);//冒泡阶段处理
div.addEventListener('click',function(){
    //要执行的代码
},true);//捕获阶段处理

addEventListener()事件监听方式，在调用函数时，里面的函数demo不需要加小括号调用

删除事件(解绑事件)

DOM2级

标签变量名.removeEventListener("事件名",触发事件要执行的函数,是否捕获阶段处理);

如果要删除，那么删除所提供的参数必须和添加事件处理程序的参数一模一样,且提供的是自定义函数，不能直接是function。

// 可以删除 
div.addEventListener('click',demo,false);//冒泡阶段处理
div.removeEventListener('click',demo,false);//冒泡阶段处理
//不可以删除
div.addEventListener('click',function(){
},false);//冒泡阶段处理
div.removeEventListener('click',function(){
},false);//冒泡阶段处理  x

DOM0级

标签变量名.onclick = null;

删除事件兼容性解决方案

function removeEventListener(element, eventName, fn) {
      // 判断当前浏览器是否支持 removeEventListener 方法
      if (element.removeEventListener) {
        element.removeEventListener(eventName, fn);  // 第三个参数 默认是false
      } else if (element.detachEvent) {
        element.detachEvent('on' + eventName, fn);
      } else {
        element['on' + eventName] = null;
 } 

事件类型

UI事件

load

在页面加载完或图片、文件加载完之后触发。一般针对页面和图片

//1. 页面加载完(固定)
window.onload = function(){
    //整个页面加载完之后执行
    // load事件触发后执行这里的代码
}
//2. 图片加载完
var img = document.querySelector('img');
img.onload = function(){
    图片加载完毕
}

• 可以保证load事件里的代码可以使用页面上的任意标签。反之JavaScript可能拿不到HTML标签。
• 可以在head标签中用JavaScript使用HTML标签而无需担心加载问题。

resize

当页面的尺寸发生变化时触发

window.onresize =function(){
    要执行的代码
}

• 当浏览器宽高变化时，会触发。
• 可以配合移动端的知识实现移动端的屏幕适配.根据不同屏幕，切换html字体大小

鼠标事件

*click&dbclick

点击和双击

标签变量名.onclick = function(){
    //点击
}
标签变量名.ondblclick = function(){
    //双击
}

mousemove

鼠标移动事件：在指定事件的标签中移动时会不断触发

标签变量名.onmousemove = function(){
    //鼠标移动
}

mouseenter&mouseleave

在鼠标进入或离开指定标签时，会触发一次

标签变量名.onmouseenter = function(){
    //鼠标进入该标签
}
标签变量名.onmouseleave = function(){
    //鼠标离开该标签
}

mousewheel

当鼠标滚轮滚动时会不断触发

标签变量名.onmousewheel = function(){
    //鼠标滚轮滑动时触发
}

• 应用：当鼠标滚动到指定位置时才会去加载相应的页面数据

键盘事件

*keyup&keypress&keydown

keyup当键帽弹起完毕时触发

keypress：当键帽将要弹起时触发

keydown：当键帽被按压时触发

标签变量名.onkeyup = function(){
    //键帽弹起完毕时触发
}
标签变量名.onkeydown = function(){
    //键帽按压时触发
}
标签变量名.onkeypress = function(){
    //键帽将要弹起时触发
}

• 一般来说是给input或textarea指定键盘事件

焦点事件

focus&blur

focus:当标签获取鼠标焦点时触发。比如光标进入到输入框中

blur:当标签失去鼠标焦点时触发。比如输入框输入完文字后，鼠标点击输入框外面

标签变量名.onblur = function(){
    //当标签失去焦点时触发//登录注册等应用
}
标签变量名.onfocus = function(){
    //当标签获取焦点时触发
}

表单事件

change

当表单元素切换选项时触发，比如下拉菜单，单选、或多选

标签变量名.onchange = function(){
    //当表单元素切换选项时触发
}

• 应用：可以用于收货地址的数据联动