JS事件流

事件流:
当页面元素触发事件的时候,该元素的容器以及整个页面都会按照特定顺序响应该元素的触发事件,事件传播的顺序叫做事件流。

一、事件流的分类

  1.冒泡型事件(所有的浏览器都支持 w3c标准)

    由明确的事件源到最不确定的事件源依次向上触发。

  2.捕获型事件(IE不支持 w3c标准 火狐)
    不确定的事件源到明确的事件源依次向下触发。
      addEventListener(事件,处理函数,false)
      addEventListener(事件,处理函数,true)

二、阻止事件流

  IE:
    事件对象.cancelBubble=true;
  FF:
    事件对象.stopPropagation();
      function stopEvent(obj) {
        if(document.all) {
          obj.cancelBubble = true;
        } else {
          obj.stopPropagation();
        }
      }

三、目标事件源的对象
  IE:事件对象.srcElement
  FF:事件对象.target
    btn.onclick = function(e){
      var ev = e || window.event;
      var sv = ev.srcElement || ev.target;
    }

时间: 2024-10-31 23:55:10

JS事件流的相关文章

笔记-[5]-关于JS事件流!

一般的事件流中有两种:一是事件捕获 二是事件冒泡 事件冒泡的理解:何谓冒泡,当水开的时候,水珠不断地向上冒的过程.在JS中同样如此.在DOM中是一种树型的结构. 如:window document html body span 例如span标签绑定了一个onclick事件.在没有阻止冒泡事件的时候,当span发生onclick事件时,body,html,document,window同样会触发onclick事件(前提是这个几个祖先标签绑定了onlick事件),否则是看不出效果. 事件捕获很少用到

js事件流机制冒泡和捕获

JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流 从页面中接收事件的顺序称为事件流. IE --> 事件冒泡流 Netscape --> 事件捕获流 查看源码:DOM2事件-捕获-冒泡 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 我们先来个简单的例子,这是HTML结构 <!DOCTYP

js事件流、事件处理程序/事件侦听器

1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 事件捕获的思想是不太具体的节点应该更早的接收到事件,而最具体的节点应该在最后接收到节点.事件捕获的用意在于事件到达预定目标之前捕获它. DOM事件流 “DOM2级事件流”规定的事件流包括三个阶段:事件捕获阶段.处于目标阶段和冒泡阶段.首先发生的是事件捕获,为截获事件提供了机会.然后是实际的目标接收到

js 事件流

什么是事件? 事件是文档或浏览器窗口发生的一些特定的交互瞬间, 比如 点击 双击 滚动条滑动-- 什么是事件流? 事件流指的是 从页面接收事件的顺序. 关于事件流,IE和Netscape提出了差不多相反的概念,IE提出的就是广为人知的事件冒泡流,而Netscape提出的则是事件捕获流. 事件冒泡流: 事件从目标元素(最底层元素)逐级冒泡到最外层元素(windows)                        事件开始是由最具体的元素接收,然后逐级向上级传播到较为不具体的节点  addEven

js事件流之事件冒泡的应用----事件委托

什么是事件委托? 它还有一个名字叫事件代理. JavaScript高级程序设计上讲: 事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 用取快递来解释这个现象,大家认真领会一下事件委托到底是一个什么原理: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚

JS的事件绑定、事件流模型

.t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.JS事件 (一)JS事件分类 1.鼠标事件:click/dbclick/mouseover/mouseout2.HTML事件: onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll3.键盘事件: keydown:键盘按下时触发 keypress:键盘按下并抬起的瞬间触发. keyup:键盘抬起触发[注意

JS事件与流

事件是用户在浏览器执行的某种动作.一个完整的JS事件流从window开始最后window.事件负责在javaScript和DOM之间交互.事件流事件流描述的是从页面中接受事件的顺序.事件流三个阶段:     事件捕获.    处于目标.    事件冒泡.事件关键字onload    页面完成加载onclick    鼠标点击某个对象ondblclick    鼠标双击某个对象onmousedown    鼠标按键被按下onmousemove    鼠标被移动onmouseout    鼠标从某元

JavaScript事件流原理解析

一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国庆的这段时间来补一补这个不足,也为了国庆后能够更好的完成公司的业务打下基础 二.大致了解什么是JavaScript事件流 首先这里先来举一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta chars

js事件事件理解

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js事件流模型</title> </head> <style> #con{ width:200px; height:200px; background: orange; } #outer{ positio