首页 > 代码库 > 关于JS事件的几点总结
关于JS事件的几点总结
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=http://www.mamicode.com/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.系统事件
onl oad onscroll onresize...
3.表单事件
onfocus onblur
4.键盘事件
onkeydown onkeyup onkeypress...
关于JS事件的几点总结
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。