zoukankan      html  css  js  c++  java
  • 事件基础

    事件类型:

      系统派发事件、自定义派发事件 :  系统派发的事件字符串是固定的,自定义派发的事件,字符串可以任意

      EventTarget、 Event:   自定义一个Object对象不能添加事件,只有继承自EventTarget类的对象才可以添加事件,这个对象角事件目标对象,Event实例化的对象叫事件对象,他是用来给事件目标对象派发事件的。我在用系统自带的事件时,系统自动创建该对象,去派发事件。

    事件传输基础:

      1、事件目标对象注册侦听事件     2、向事件目标对象派发事件对象

      

     1     var target=new EventTarget();
     2     //  创建事件目标对象
     3     target.addEventListener("chilema",clickHandler);
     4     //  注册事件侦听
     5     var evt=new Event("chilema");
     6     //  创建事件对象
     7     evt.num=10;
     8     //  给事件对象添加属性num =10
     9     target.dispatchEvent(evt);
    10     //  派发事件
    11     function clickHandler(e){
    12            console.log(e.num);
    13     }
    14     //  触发事件执行该函数

     

    事件原理三阶段:

        捕获             目标              冒泡
                    外          到达目标              内
                     |                                         |
                    内                                      外

     

    事件监听方式:

      addEventListener()  三个参数:事件类型,触发事件执行的函数, 第三个参数: 是否在捕获阶段执行 为boolean 或者 {once,true} 只执行一次 。 低版本浏览器不能用

      onClick()类似方式, 支持低版本。

      attachEvent()  两个参数: 事件类型,触发执行的函数  只有IE8及以下兼容

     

    移除事件方法:

      elem.removeEventListener()  

      elem.onclick = null;

      elem.detachEvent();

      三种方法都是用移除事件和侦听事件的,但是三种方法传入的事件类型名称有差异: addEventListener()出入事件不加on,onclick()不传入参数,detachEvent()加on后面类型不大写。

     

    阻止事件冒泡:

      addEventListener()中:   e.stopProagation();

      onClick()中:  return false;

      attachEvent()中: e.cancelBubble = true;

     

     阻止事件默认行为:

      e.preventDefault()。 不是所有情况都适用

     

    事件委托:

      如果给ul下的每个li添加事件,添加多个事件侦听是需要内存的,如果给ul添加事件侦听,给点击的li做处理,这样代码就会强上不少。

     

    区分  e.currentTarget 、e.target :

      currentTarget是事件目标对象,谁添加了这个事件侦听,该对象就是谁

      target是实际点击的对象

      e是触发了具体那种事件,e就是谁,e除了这些对象外,还有很多属性。

  • 相关阅读:
    舒迅:微信商业模式的挑战点
    标签Tag列表的实现
    UITableView下拉更新/上提加载的实现
    一张背景图实现的漂亮黄色CSS菜单
    纯CSS打造漂亮的圆角边界导航
    CSS打造立体按钮式的竖向导航菜单代码
    纯CSS实现蓝色圆角下拉菜单
    用于用户中心或后台左侧的JS折叠菜单
    滑动鼠标放大带阴影的纯CSS菜单
    JavaScript打造超酷很动感的鼠标特效菜单
  • 原文地址:https://www.cnblogs.com/wangjingzhi/p/12163594.html
Copyright © 2011-2022 走看看