JS学习之事件

  • 时间:2018-06-06 01:57 作者:沧桑肥肥 来源:沧桑肥肥 阅读:136
  • 扫一扫,手机访问
摘要:1.了解事件(2点)事件行为本身:没有给事件绑定方法事件也是一直存在的,当触发行为的时候,也对触发对应的行为,只不过因为没有绑定事件,导致没有任何事件发生;事件绑定:给元素绑定一个方法;触发行为,执行方法; 2.DOM事件 DOM0级事件:1??(onclick)属于元素的私有属性;2??用DOM0

1.了解事件(2点)

  • 事件行为本身:没有给事件绑定方法事件也是一直存在的,当触发行为的时候,也对触发对应的行为,只不过因为没有绑定事件,导致没有任何事件发生;

  • 事件绑定:给元素绑定一个方法;触发行为,执行方法;


2.DOM事件

  • DOM0级事件:1??(onclick)属于元素的私有属性;2??用DOM0级方法指定的事件解决程序被认为是元素的方法,这也就解释为什么事件解决程序的this指向当前元素(this的六点申明);3??事件解决程序只会在事件冒泡阶段解决;4??优势:简单;跨浏览器;5??删除事件:设置为null;btn.onclick=null;6??一个元素只可以绑定一个同一类型的行为,否则后面的会覆盖前面的行为。

  • DOM1:没有更新事件相关的方法;

  • DOM2级事件:1??属于公有方法,在eventTarget这个类的原型上—>所有的DOM节点都包含这两种方法:addEventListener和removeEventlistener;2??三个参数:(事件名,回调函数,布尔值);布尔值:true—>捕获阶段调使用回调函数;false—>冒泡阶段调使用回调函数;3??addEventListener和removeEventlistener传入的回调函数必需相同,不可以用匿名函数;4??一般将事件增加到冒泡阶段,这样能最大限度的兼容浏览器。5??同一个元素能绑定多个统一行为;


3.事件对象

*****执行某一行为时,不仅执行了绑定方法,而且浏览器还会默认的给这个方法传递一个参数,这个参数就是—>event,事件对象。

事件对象的特点:

1??对象数据类型,包含有很多的属性名和属性值,使用来记录行为的相关信息;

2??MouseEvent——UIEvent——Event——Object 原型

3??MouseEvent记录的是页面中唯逐个个鼠标每次触发的相关信息,和究竟在哪个元素上触发没有关系。


4.事件对象的兼容性问题

  • 事件对象本身的兼容性问题:e=e||window.event;

  • e.type:当前行为类型,兼容;

  • e.clientX/Y:距离可视窗口左上角x,y值,兼容;

  • e.pageX/Y:距离body(第一屏)左上角x,y值,IE678不兼容;

e.pageX=(document.documentElement.scrollLeft||document.body.scrollLeft)+ e.clientX;

  • e.target:事件源,当前行为触发元素,存储的就是那个元素IE678不兼容,e.target=e.target||e.srcElement;

  • e.preventDafault:阻止浏览器的默认行为,IE678不兼容;e.preventDafault?e.preventDafault:e.returnvalue=false;

  • e.stopPropagation:阻止事件冒泡传播,IE678不兼容;e.stopPropagation?e.stopPropagation:e.cancelBubble=true;


5.事件的传播机制

  • 捕获:从外向内依次查找元素,event capturing;

  • 目标:当前述事件源本省的操作;

  • 冒泡:从内到外依次触发的相关行为,event bubbing;


6.常见事件类型

1.鼠标事件

onclick onmouseover onmouseout onmouseenter onmouseleave ondbclick...

2.系统事件

onload onscroll onresize...

3.表单事件

onfocus onblur

4.键盘事件

onkeydown onkeyup onkeypress...

  • 全部评论(0)
最新发布的资讯信息
【系统环境|Linux】零基础如何学好大数据?必备需要学习知识(2019-06-18 11:54)
【系统环境|】Hadoop环境中管理大数据存储八大技巧(2019-06-15 11:01)
【系统环境|服务器应用】现在国内IT行业是不是程序员过多了?(2019-06-11 06:34)
【系统环境|服务器应用】新贵 Flutter(2) 自己设置 Widget(2019-06-11 06:34)
【系统环境|服务器应用】Android完整知识体系路线(菜鸟-资深-大牛必进之路)(2019-06-11 06:34)
【系统环境|服务器应用】Java程序员小伙经历三个月备战,终获阿里offer(2019-06-11 06:34)
【系统环境|服务器应用】每日一问:谈谈对 MeasureSpec 的了解(2019-06-11 06:34)
【系统环境|服务器应用】【科普】晶体管-1(2019-06-11 06:34)
【系统环境|服务器应用】一个很多人都会答错的java基础题(2019-06-11 06:33)
【系统环境|服务器应用】深入了解枚举类型(2019-06-11 06:33)
手机二维码手机访问领取大礼包
返回顶部