zoukankan      html  css  js  c++  java
  • js事件流

    一、JavaScript事件流

    js是一门基于对象和事件驱动的具有安全性的客户端脚本语言。

    事件是连接JavaScript和DOM的桥梁,为js提供交互行为提供方式;事件绑定于DOM对象上,可用于用户触发而执行相对应的处理程序。

    事件流包括三个阶段,分别是捕获阶段,目标阶段,冒泡阶段

    在阐述时间流的三个阶段之前,我们先了解一下js对象的事件监听。

    所谓事件监听,即使为DOM绑定相对应触发事件;

    绑定事件监听的三种方法分别为:

    element.addEventListener(type,function,useCapture);//useCapture为ture,事件句柄在捕获阶段执行,反之在冒泡阶段执行;Mozilla中;
    element.attachEvent("on"+type,function);//IE中
    element.on+type=function(){};
    

    绑定事件之后,当用户触发到某元素的事件之时,则会从document开始一级一级的向下查找到对应的元素,该阶段为捕获阶段;到达目标之后则为目标阶段;触发目标的处理程序之后,则从目标一级一级的向上直到document,该阶段为冒泡阶段。

    如今一般都是使用冒泡事件流来进行事件的处理;

    事件冒泡的作用主要是允许多个操作被集中处理,例如一个列表的每一个字段点击都会出现相应的处理反应,则可以直接为所有字段的上一级元素绑定处理程序;

    但是有些程序相反需要取消冒泡机制带来的弊端,此时可以使用阻止事件冒泡的方法,evet.stopPropagation();

    <2017-09-11增添>

    js事件机制包括:事件绑定、事件监听、事件委托。

    1)事件绑定:

    方式:

    1.DOM元素上直接绑定

    <input type="button" onclick="func()" />
    

    2.js中绑定

    <input type='button' id="btn" />
    
    <script>
        var btn = document.getElenmentById("btn");
         btn.onclick = function(){
                 alert('Hello')
          };
    </script>
    

      

    2)事件监听

    方法:addEventListener、attachEvent

    W3C规范:

    element.addEventListener(event, function, useCapture);

    event:事件名;

    function:回调函数;

    useCapture:指定阶段(捕获或冒泡);ture:捕获;false:冒泡;默认:false;

    IE规范:

    element.attachEvent(event,function);

    冒泡阶段执行

    3)事件委托

    原理:利用冒泡,在所有需要绑定相同事件的子元素的父元素上绑定对应事件。

    优点:提高性能,减少事件的注册;动态添加的元素依旧绑定对应事件。

  • 相关阅读:
    LODOP、C-LODOP注册号的区别
    Lodop强制分页LODOP.NewPage()和LODOP.NewPageA()
    c-lodop云打印实现手机打印 JS语句打印
    如何取消浏览器护眼色 Lodop打印图片有窗口颜色的边框
    PS中如何提高修改psd图片的效率(自动选择工具)
    Lodop如何打印直线
    Lodop打印控件 如何打印虚线
    Lodop窗口的按钮、权限,隐藏或设置功能不可用
    ArrayList与LinkedList区别
    URLDecoder与URLEncoder
  • 原文地址:https://www.cnblogs.com/Yoriluo/p/6783378.html
Copyright © 2011-2022 走看看