基于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:如没有特殊情况,均采用事件冒泡。

psHTML事件采用冒泡机制来处理事件。即

   点击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)

  egbtn.removeEventListener('click',test,true);

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

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

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

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

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

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

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

IEDOM2级事件的移除方式:

  元素.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.mouseentermouseleave两个事件不冒泡触发。

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

当documentreadyState改变时触发这个事件(仅第二阶段)。  众所周知,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  IEdocument.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】【backspace8】

3.3 keydownkeypress事件的区别

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

(5)特殊情况
   
PrScrn按键KeyPressKeyDownKeyUp都不能捕获。
    上下左右等功能键的
keydownkeyup都能获取keyCode,并且值相等。


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

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

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指向windowIE

1.1 event对象

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

 

  获取方式:

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

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值