基于WebStorm记录得HTML--Event事件

1.1 事件

  事件：是可以被js检测到的行为，实质上是一种交互操作。

  例如：我们可以给某按钮添加一个【onClick点击事件】，当用户对按钮发生点击时来触发某个函数。 

  事件的作用：

  (1)各个元素之间可以借助事件来进行交互           

  (2)用户和页面之间也可以通过事件来交互

  (3)后端和页面之间也可以通过事件来交互（减缓服务器的压力）

ps：注意：事件通常与函数配合使用，当事件发生时函数才会执行。

1.2 事件传播/事件传递/事件流

一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段

第一阶段：从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）。

第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。

第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。

w3c规定：事件冒泡+事件捕获+事件真正的触发者等各个分支构成了js的事件机制。

ps：如没有特殊情况，均采用事件冒泡。

ps：HTML事件采用冒泡机制来处理事件。即

   点击d2时会先执行d2的绑定事件（即执行test2函数）。

   然后采用事件冒泡将事件传递给上一级DOM节点d1，然后d1执行自己的绑定事件。

ps：函数执行的顺序按照绑定事件时函数的顺序为准

HTML事件缺陷：耦合性太强了，修改一处另一处也要修改。

                 当函数没有加载成功时，用户去触发事件，则会报错。

2.2 DOM0级事件

在js脚本中，直接通过【on+事件名】方式绑定的事件称为是DOM0级事件。

语法：元素.on+事件名  = function(){需要执行的语句;}

 例如：

  btn.onclick = function () {console.log(‘按钮被点击’);};

ps：以冒泡机制来处理事件，不存在兼容的问题

DOM0级事件的移除方式：元素. on+事件名=null;eg:btn.οnclick=null;

2.3 DOM2级事件

在js脚本中，通过addEventListener函数绑定的事件称为是DOM2级事件。

语法：元素.addEventListener(type,listener,useCapture)

 type:事件类型。【没有on！没有on！没有on！】
     listener:监听函数，绑定的函数
     useCapture:是否使用捕获机制。如果不写，默认值为false
       false:冒泡机制
       true：捕获机制
  注意:DOM2级事件可以绑定多个函数，执行顺序按照函数书写的顺序。

DOM2级事件的移除方式： node.removeEventListener(type,外部函数名,useCapture)

  eg：btn.removeEventListener('click',test,true);

ps：DOM2级事件中如果绑定函数为【匿名函数】则无法删除。能够删除的只能是外部函数。

pss：第三个参数默认可以不写，默认是false。但是如果删除的是捕获事件，则必须写为true才可以。

3.IE浏览器中的【事件绑定】

(1)HTML事件处理程序：等同于非IE
(2)DOM0级事件：等同于非IE
(3)DOM2级事件：

在js脚本中，通过attachEvent函数绑定事件

 语法：元素.attachEvent(type,listener)

   type:事件类型。【有on！有on！有on！】 listener:监听函数，绑定的函数  注意:如果绑定多个函数，按照函数书写的倒叙执行。

IE下DOM2级事件的移除方式：

  元素.detachEvent(type,listener)  eg:  function test() {alert(111);}
  d1.attachEvent("onclick",test);
  d1.detachEvent('onclick',test);

ps：匿名函数无法被移除。

4.解决浏览器中关于【事件绑定】兼容性问题

由于【IE浏览器中的事件绑定】和【非IE浏览器中的事件绑定】方式方法都有所不同。所以单一的某种函数都不能完美解决不同浏览器下的方法绑定问题。那么我们又应该如何面对在不同浏览器下【事件绑定】这个问题的解决方案呢？ 以下为解决方案的思路。绑定事件时：  如果能使用addEventListener方法绑定的，就采用本方法  否则采用attachEvent方法绑定

   解绑事件时：  如果能采用addEventListener方法绑定的，就采用removeEventListener方法解绑  否则采用detachEvent方法解绑

var Event = {
  addEvent: function (ele, type, handler) {

  if (ele.addEventListener)  {ele.addEventListener(type, handler);}

  else if (ele.attachEvent)   {ele.attachEvent('on' + type, handler);}

  else {ele['on' + type] = handler;}

  },

  removeEvent: function (ele, type, handler) {

  if (ele.addEventListener)   {ele.removeEventListener(type, handler);}

  else if (ele.attachEvent)   {ele.detachEvent('on' + type, handler);}

  else {ele['on' + type] = null;}
  }
};

function test() {alert('点击事件');}
Event.addEvent(document.querySelector('div'), 'click', test);

 

5.鼠标事件

js鼠标事件是指通过鼠标一系列操作（如进入，点击等）来触发的事件。

(1)鼠标事件类型

鼠标单击是触发：click
鼠标双击是触发：dblclick

鼠标按下时触发：mousedown
鼠标抬起时触发：mouseup

鼠标移动时触发：mousemove

鼠标移入时触发(不冒泡)： mouseenter

鼠标移出时触发(不冒泡)： mouseleave
鼠标移入时触发(冒泡)： mouseover

鼠标移出时触发(冒泡)： mouseout

语法：元素.on+鼠标事件名称 = 调用函数

例如：d1.ondblclick = function () { console.log('这是d1');};

(2)鼠标事件原则

 

a.鼠标的基本事件默认采用冒泡传递

b.可以给一个元素添加多个不同的鼠标事件，不同的鼠标事件之间互不影响

c.mouseenter和mouseleave两个事件不冒泡触发。

6.文档事件

  文档事件中主要是指添加给整个文档的事件。在这一类事件中，绝大部分并不需要用户主动去进行调用。而是通过文档的不同状态来进行自动执行。

(1)加载成功\失败事件：load\error

 

  load事件指的是：节点加载成功时自动发生回调事件

  error事件值得是：节点加载失败时自动发生的回调事件

 语法： node.onload = func(){};

元素加载失败时触发的操作，只需要给指定元素一个.onerror属性即可

var mylink = document.getElementsByTagName(“link”).item(0);
mylink.onerror = function () {
    console.log('css文件加载出问题了');

(2)当DOM加载完成时触发事件：DOMContentLoaded

  DOMContentLoaded事件和load事件的区别是触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。DOM文档加载的步骤为: 解析HTML结构。 加载外部脚本和样式表文件。 解析并执行脚本代码。 DOM树构建完成。  //DOMContentLoaded执行  加载图片等外部文件。页面加载完毕。  //load执行
因此样式文件的加载会阻塞脚本的执行。所以如果你把一个内部脚本<script>元素放在了一个<link>后面，如果页面没有完成解析则脚本不会触发，直到样式文件加载完成之后.(这种情况被称为文件阻塞)

(3)文档加载状态判断事件：readystatechange

当document的readyState改变时触发这个事件(仅第二阶段)。  众所周知，document节点中拥有一个属性叫做readyState。其拥有三个可能值：loading：加载DOM中  interactive：加载外部资源  complete：加载完成 而readystatechange事件正是在这个状态发生改变时调用的事件。  调用方式可以用DOM0也可以用DOM2来绑定。

(4)文档大小发生改变时的回调事件：resize

window.onresize = function(){
        console.log('width:'+document.documentElement.clientWidth);
        console.log('height:'+document.documentElement.clientHeight);
};但是美中不足的是，js中为了追求变化的敏感度。将resize事件的响应事件设置为了0。也就是说每一次的文档大小改变都会立即调调用本事件。 这就造成了【一次变化】却发生了【不止一次】的resize事件调用。 所以为了解决这个问题，我们可以采用一种延迟的写法来实现。

【失去焦点事件blur】与【获得焦点事件focus】

焦点：js当前正在和用户发生交互的节点称为焦点。可以类比为人类目光汇聚的地方。

  语法：获得焦点和失去焦点事件既可以使用DOM0绑定也可以使用DOM2绑定

  i1.addEventListener('focus', function () {console.log('i1捕获事件');}, true);

  i1.addEventListener('blur', function () {console.log('i1捕获事件');}, true);

  i2.onfocus = function () {console.log("i2获得了焦点")};
  i2.onblur = function () {console.log("i2失去了焦点")};

注意：  这两个事件均不支持事件冒泡(只有当前节点发生调用)。 如果需要连续多次的触发，则需要使用DOM2级绑定事件中的捕获事件来达到。

1.2 滚动事件scroll

scroll事件会在【文档】或【元素】发生滚动操作时触发。

【文档发生滚动时】  属性scrollTop\scrollLeft表示文档滚动的距离:(没有单位)

  IE：document.documentElement.scrollTop\Left  非IE：document.body.scrollTop\Left

 （可以使用document.body.scrollTop||document.documentElement.scrollTop来解决兼容性）

【元素发生滚动时】

   元素发生滚动时并不存在兼容性的问题，但是需要有一个前提那就是：必须存在滚动条。

  (元素的滚动条属性可以同过overflow:scroll/overflow-x:scroll/overflow-y:scroll来实现)

   在元素发生滚动的时候，可以通过【元素.scrollTop/scrollLeft】获取到元素的位移距离。

特别注意：

  (1)刚刚我们提到的scrollTop属性和scrollLeft属性都是一个可读可写的属性。

  (2)赋值时直接使用’=’即可，不需要加单位

  (3)若赋的值大于【最大滚动距离】，则按照最大滚动距离为准。

3.键盘事件

3.1 键盘事件种类

  键盘事件是指当用户在操作键盘的时候会自动被触发的事件，通常有以下三种：

  (1) keydown:用户按下任意键都可以触发这个事件。如果按住不放，事件会被连续触发。
  (2) keypress:用户按下任意键都可以触发这个事件(功能键除外)。如果按住不放，事件会被连续触发
  (3) keyup: 用户释放按键时触发

ps：键盘事件一般绑定在需要用户输入的元素上(例如input)，但是由于键盘事件默认采用事件冒泡机制，因此将键盘事件直接绑定在body之上也是允许的。

3.2 键盘事件中提供的属性

  在键盘事件中可以通过event.keycode来获取按下按键的编码值。

  input1.onkeydown = function () {
      console.log("down:"+event.keyCode);
   };

  ps：因此我们可以通过这个属性来获取到，在页面中用户曾按下过哪些按键。

  pss：常见的按键编码【回车：13】【backspace：8】

3.3 keydown和keypress事件的区别

  (1)keyPress主要用来捕获：数字(包括Shift+数字的符号)、字母（包括大小写）、小键盘等能够显示在屏幕中的字符。但是不能对系统功能键(例如：后退、删除等，其中对中文输入法不能有效响应)进行正常的响应
  而KeyDown和KeyUp通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键）
  (2)捕获字符长度区别
      KeyPress只能捕获单个字符
      KeyDown和KeyUp可以捕获组合键。
  (3)捕获字符大小写识别区别
      KeyPress可以捕获单个字符的大小写
      KeyDown和KeyUp对于单个字符捕获的KeyCode都是一个值，也就是不能判断单个字符的大小写。
  (4)捕获字符数字区别
      KeyPress不区分小键盘和主键盘的数字字符。
      KeyDown和KeyUp区分小键盘和主键盘的数字字符。

(5)特殊情况
    PrScrn按键KeyPress、KeyDown和KeyUp都不能捕获。
    上下左右等功能键的keydown、keyup都能获取keyCode，并且值相等。

  (4)捕获字符数字区别
      KeyPress不区分小键盘和主键盘的数字字符。
      KeyDown和KeyUp区分小键盘和主键盘的数字字符。

一些常见的键盘按键编码：

4.手机触摸事件

4.1 手机触摸事件

  (1)touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
  (2)touchmove:当手指在屏幕上滑动时连续的触发。

  (3)touchend:当手指从屏幕上移开时触发。
  (4)*touchcancel:当系统停止跟踪触摸时触发。(如电话接入或者弹出信息,一般在这个操作中来做一些暂停游戏类的操作 或者点击通知)

  div.addEventListener('touchstart',function () {console.log("touches began");});
      div.addEventListener('touchend',function () {console.log("touches end");});
  div.addEventListener('touchmove',function (event) {console.log("touches move");});
      div.addEventListener('touchcancel',function(event){console.log("cancel");});

ps：如非特殊说明，事件均为冒泡事件

pss：手机触摸事件必须使用dom2来进行绑定

psss：可以给一个元素添加多个触摸事件

4.2 【事件对象】的属性

  事件对象，即【事件触发的时】用来保存【事件相关的所有信息的对象】。

  事件对象基本都是系统为我们自动生成，不必手动创建。

  以上事件都存在事件对象：

  div.addEventListener('touchstart',

  function (event) {

  console.log("touches began");

  }

  );

  (1)touches:表示当前跟踪的触摸操作的Touch对象的数组(当前屏幕上所有的触摸点列表)。
  (2)targetTouches:特定于事件目标的Touch对象的数组(当前对象上所有的触摸点列表)。
  (3)changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组（涉及当前事件的触摸点列表）。

4.3 【触摸对象】的属性

 

  触摸对象，即【事件对象的touches属性】中的每一个元素。

  一次触摸会创建一个触摸对象。

 触摸对象中提供了很多属性方便我们获取和使用：

  clientX:触摸目标在视口中的X坐标。
  clientY:触摸目标在视口中的Y坐标。
  identifier：表示触摸的唯一ID。
  pageX：触摸目标在页面中的x坐标。
  pageY：触摸目标在页面中的y坐标。
  screenX:触摸目标在屏幕中的x坐标。
  screenY:触摸目标在屏幕中的y坐标。
  target:触摸的DOM节点坐标

通常情况下都会在触摸事件被触发的时候，通过这两个属性来获取当前节点的位置。

6.this对象

概念：

  this代表【函数运行时】【自动生成的】一个【用来指代函数调用者】的对象，this只能在函数内部使用。

eg：
  function test(){

  console.log(this);

  }

  test();//指向window，因为函数的调用者默认是window

  document.addEventListener(‘click’,test);//指向document节点

  document.querySelector(‘div’).addEventListener(‘click’,test);//指向div节点

根本原则：函数的调用者是谁，this就是谁

this对象的注意事项： HTML 级事件：this指向window

  DOM0级事件：this指向绑定事件的这个元素

  DOM2级事件：this指向绑定事件的这个元素（非IE）  this指向window（IE）

1.1 event对象

  概念：当dom tree中某个事件被触发的时候，会同时自动产生一个用来描述事件所有的相关信息（比如出发事件的元素、或者是事件的类型）的对象，这个对象就是event（事件对象）。

 

  获取方式：

  (1)直接通过event来获取
  (2)还可以通过函数传参数的形式来使用，一般而言我们使用【形参e或event】来代替

1.2 event中常用的属性和方法

  因为event对象是用来描述【发生的事件的信息】的，而event对象当中所提供的一系列属性和方法正是用来获取这些信息的途径。

 

【bubbles 属性】

  bubbles属性用来获得【当前触发事件的类型】是否冒泡，如果当前事件类型支持冒泡则返回true，否则返回false。

 必须注意的是：bubbles属性指的是该事件是否冒泡。和事件处理机制无关！！！！

 

  document.getElementById(“d1”).onclick = function () {
      console.log(event.bubbles);
  };

  document.getElementById(“d1”).addEventListener('mouseenter',function (e) {
        console.log(e.bubbles);
  });

  因为鼠标【点击事件】这个事件本身支持冒泡。

  因此当存在点击事件被触发后，event对象的bubbles属性返回的就是true，表示当前事件支持冒泡。

  但绝不是把这个事件以冒泡的形式继续传递下去！

【eventPhase 属性】

 

  eventPhase：事件传导至【当前节点】时处于什么的状态。

  1：事件处于捕获状态

  2：事件处于真正的触发者

  3：事件处于冒泡状态

【target 属性和 currentTarget 属性】

 target：返回事件真正的触发者

  currentTarget：返回事件的监听者(触发的事件绑定到了哪个节点，就返回谁)

【stopPropagation() 方法】

  event对象中提供了一个名为stopPropagation的方法。用来阻止事件从当前节点传播到下一个节点。

【preventDefault() 方法】event对象中提供了一个名为preventDefault的方法，用来取消当前节点的默认行为(譬如超级链接的点击跳转行为)。该方法没有返回值

【cancelable() 方法】

event对象中提供了一个名为cancelable的方法，用来判断当前节点能否使用preventDefault方法来取消默认行为。如果可以则返回true，否则返回false。

【returnValue 属性】

 

  returnValue属性用来设置【是否取消当前节点的默认行为】

  作用类似于非IE下的preventDefault方法

语法：

  event.returnValue = false;(取消默认行为)
  event.returnValue = true;(默认值)

 

4.鼠标滚轮事件

滚轮就是鼠标上的滚轮，它滚动的时候触发事件

 

onmousewheel就是鼠标滚动事件，mouse鼠标，wheel就是轮子。

event参数最最重要的事就event.wheelDelta属性，表示滚动的方向。这是浏览器的规定：

鼠标往上滚， 120

鼠标往下滚， -120

火狐浏览器不兼容，火狐使用自己的专用事件DOMMouseScroll ，并且这个事件只能通过标准的DOM2级的事件绑定方式添加。

火狐添加的事件，是它自己的专门事件DOMMouseScroll，

表示滚动方向的事件的属性叫做event.detail。

detail就是细节的意思。反着的，滚动方向往上，-3；滚动方向往下，3。

4.event中的一些其他属性

(1)返回事件触发点距离视口的距离
    e.clientX
    e.clientY

(2)返回事件触发点距离页面的距离e.clientx+滚过的距离
    e.pageX
    e.pageY
    ps:以上2个方法一个计算滚动条一个不计算滚动条

(3)返回事件触发点距离屏幕的距离
    e.screenX
    e.screenY
(4)e.button:返回按下了鼠标的哪个键
    非IE中 左中右代表数字为0 1 2
    而IE中 左中右代表数字为1 4 2