JS学习之事件

作者 : 开心源码 本文共1509个字,预计阅读时间需要4分钟 发布时间: 2022-05-11 共70人阅读

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…

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JS学习之事件

发表回复