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)事件委托

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

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

  • 相关阅读:
    Maven关于web.xml中Servlet和Servlet映射的问题
    intellij idea的Maven项目运行报程序包找不到的错误
    修改Maven项目默认JDK版本
    刷题15. 3Sum
    刷题11. Container With Most Water
    刷题10. Regular Expression Matching
    刷题5. Longest Palindromic Substring
    刷题4. Median of Two Sorted Arrays
    刷题3. Longest Substring Without Repeating Characters
    刷题2. Add Two Numbers
  • 原文地址:https://www.cnblogs.com/Yoriluo/p/6783378.html
Copyright © 2011-2022 走看看