zoukankan      html  css  js  c++  java
  • 监听/移除事件 & 事件流 & 事件对象 & 事件委托

    1、注册事件的方式

    (1)传统方式注册 :btn.onclick = function( ){  }   ;

    (2)添加监听 :btn.addEventListener('click',fn,默认是事件冒泡);注意 :flag :false代表的是事件冒泡 。 |    flag :true代表的是事件捕获

    (3)了解 btn . attachEvent('onclick' , fn)  ;    ie 678专用

    2、注销事件的方式 :

    (1)传统方式 :btn . onclick = null  ;

    (2)监听方式 :btn . removeEventListener('click' , fn);

     

    (3)了解 :btn . detachEvent('onclick' , fn) ;  ie 678专用

    (4)删除事件兼容性解决方案 :

    3、事件流的三个阶段

    (1)捕获阶段 :从外到内一层一层进行传递 ,直到我们的目标对象 ;

    (2)目标阶段   ;

    (3)冒泡阶段 : 从内到外 ,从目标对象向外一层一层进行冒泡  ;

     

    4、事件对象 :

    (1) 什么是事件对象描述这一次事件的对象 ,里面封装了这次事件相关的数据信息  ;

    (2) 属性 : e .target   获取触发事件的对象 ;       

           e . type    获取事件类型 ;

           e . pageX |  pageY  获取鼠标在页面中(页面滑动后会变)的位置 ;

           e . clientX | clientY  获取鼠标在可视区域body的位置 ;

           e . screenX | screenY 获取鼠标在整个显示屏中的位置 ;

    (3) 方法 :   e . stopPropagation()阻止冒泡  ie 678专用

             e . preventDefault()阻止默认行为注意 :在传统方式注册的 ,我们可以直接return false  ;

    (4)事件对象的属性和方法 ;

    5、事件委托 :

    (1)原理 :用的是事件冒泡  ;

    (2) 注意 :本应该给子元素绑定的事件 ,用父元素去设置 ,这样一旦点击了子元素 ,就会通过事件冒泡给父元素的事件,然后我们通过事件对象 . target就能够获取到目标元素;

    (3) this与e.target的区别:this指向的是绑定事件的对象,e.target指向的是当前选中的对象。

  • 相关阅读:
    Linux useradd 命令介绍
    lsscsi
    安装MegaCli,查看linux服务器raid信息
    ipmitool命令详解
    python 收发邮件
    angularjs 高级玩法 创建递归的模板
    我的Android进阶之旅------>Android Activity的singleTask载入模式和onActivityResult方法之间的冲突
    Git实战(三)环境搭建
    使用Samba实现Linux与Windows文件共享实践
    设计模式个人备忘(享元模式,strategy, templete strategy)
  • 原文地址:https://www.cnblogs.com/sangejava/p/13141353.html
Copyright © 2011-2022 走看看