1.javascript中的事件.

事件流

javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑定事件, 或者只需要这样一个.

事件分类

捕获型事件(非IE), 冒泡型事件 (所有浏览器都支持)

捕获型事件是自上而下的, 而冒泡型事件是自下而上的. 或许有图会更直观一点.

冒泡型事件在平常遇到可能会比较多一些, 但捕获型事件怎样才会执行到呢? 而如果我们想要在非IE浏览器中创建捕获型事件, 只需将 addEventListener  的第三个参数设计为true就可以了.

这样的dom结构

----------->>

<div id='div1' style="width:300px;height:300px;background:#0000ff;">

<div id='div2' style="width:200px;height:200px;position:relative; left:50%;top:50%;background:#ffff00;">

</div>

</div>

------------>>

var $ = document.getElementById;

$('div1').addEventListener('click', alertID, true);

$('div2').addEventListener('click', alertID, true);

function alertID(){

alert(this.id);

}

----------->>

ID为div1和div2的两个元素都被绑定了捕捉阶段的事件处理函数, 这样:

当点击#div1(蓝色区域)时, 应该会alert出'div1'

当点击#div2(黄色区域)时, 应该会先alert出'div1', 再alert出'div2', 因为在事件捕捉阶段, 事件是从根元素向下传播的, #div1是#div2的父元素, 自然绑定在#div1上的click事件也会优先于#div2上的click事件被执行.

冒泡型事件例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>冒泡事件</title>

<script type="text/javascript">

var i = 1;

function Add(sText,objText)

{

     document.getElementById("Console").innerHTML +=sText + "执行顺序：" + i + "<br />" + "<hr />";

     i = i + 1;

     //window.event.cancelBubble = true;

}

</script>

</head>

<body onclick="Add('body事件触发<br />','body')">

<div onclick="Add('div事件触发<br />','div')">

<p onclick="Add('p事件触发<br />','p')" style="background:#c00;">点击</p>

</div>

<div id="Console" style="border:solid 1px #ee0; background:#ffc;"></div>

</body>

</html>

这个例子当中可以很清楚看到事件冒泡是从元素p一直上升到body元素.

那么冒泡型事件如何阻止? 或许我在某个时候不想要这种事件机制.

如下有一个函数, 兼容了IE和其他浏览器的阻止事件冒泡.

function stopBubble(e) {

  //如果提供了事件对象, 则这是一个非IE浏览器

  if( e && e.stopPropagation ){

    //因此它支持W3C的stopPropagation()方法

    e.stopPropagation();

  }else{

  //否则, 我们需要使用IE的方式来取消事件冒泡

    window.event.cancelBubble = true;

  }

}

在IE中并没有 stopPropagation 方法, 但我们可以通过 window.event.cancelBubble 来阻止事件冒泡.

监听函数

IE    :    attachEvent, detachEvent

非IE :    addEventListener,  removeEventListener

除了上面四个函数还有一个比较通用的方法是 document.getElementById(元素ID).onclick = function( ){ }

事件对象

当触发事件, 在监听函数执行函数里怎样才可以获取事件对象呢? 在IE 中使用 window.event,srcElement, 而在非IE浏览器则用 e.currentTarget

例代码:

btn.onclick = ctdClickEvent;

function ctdClickEvent(e){

  if( window.event ) //IE

  {

    var readonly = 'readOnly';

    var obj = window.event.srcElement;

  }else

  {

    //非IE

    var readonly = 'readOnly';

    var obj = e.currentTarget;

  }

  var id = obj.id.replace("btn_", "");

  if( obj.value )

  {

  ......

  }

}



原文地址：http://www.nowamagic.net/javascript/js_EventAnalysis.php
												


											
javascript 中的事件机制的更多相关文章
	

    
								
  1. jQuery中的事件机制深入浅出
		
    昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...
    
		
    2. 
						
  2. JavaScript中的事件循环机制跟函数柯里化
		
    一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() =>  ...
    
		
    3. 
						
  3. JavaScript中的事件委托机制跟深浅拷贝
		
    今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...
    
		
    4. 
						
  4. 深入理解javascript中的事件循环event-loop
		
    前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...
    
		
    5. 
						
  5. JavaScript中的事件对象
		
    JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...
    
		
    6. 
						
  6. JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获
		
    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...
    
		
    7. 
						
  7. 了解javascript中的事件（二）
		
    本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...
    
		
    8. 
						
  8. javascript中onclick事件能调用多个方法吗
		
    Q: javascript中onclick事件能调用多个方法吗? A: 可以的,方法如下onclick="aa();bb();cc();"每个方法用“;”分号隔开就行了
    
		
    9. 
						
  9. js实例分析JavaScript中的事件委托和事件绑定
		
    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Oracle中的正则表达式
			
    检查约束 --密码的长度必须在3-6 --年龄必须在1-120 --性别只能是男或女 --电话号码必须满足电话的格式: 手机格式,座机格式 drop table test; select * from ...
    
			
    2. 
						
  2. ZooKeeper概述(转)
			
    译自http://zookeeper.apache.org/doc/trunk/zookeeperOver.html ZooKeeper是一个用于分布式应用的开源分布式协调服务.它提供了简单的原语集合 ...
    
			
    3. 
						
  3. poj 2761 Feed the dogs (treap树)
			
    /************************************************************* 题目: Feed the dogs(poj 2761) 链接: http: ...
    
			
    4. 
						
  4. PHP-redis中文文档介绍（转自http://www.jb51.net/article/33887.htm）
			
    Redis::__construct构造函数$redis = new Redis(); connect, open 链接redis服务参数host: string,服务地址port: int,端口号t ...
    
			
    5. 
						
  5. 巧妙地用二叉树完成算式计算算法<计算器，二叉树，C++，独辟蹊径>
			
    #01.引言,我们知道算式计算的问题是栈里面一个非常经典的题目.但是用栈来实现是一个非常麻烦的过程,第一要解决算式判断,是否为符合规则的算式,第二要由中最表达式转化为后缀表达式.这两个部分是栈实现计算 ...
    
			
    6. 
						
  6. OOP之C#设计及其UML（反向工程）
			
    现在总结一下C#类关键字(virtual.abstract.override.new.sealed)的使用(以C#代码体现),并再次熟悉一下OOP思想,使用UML工具EA(Enterprise Arc ...
    
			
    7. 
						
  7. Excel2016右键新建工作表，打开时提示“因为文件格式或文件扩展名无效。请确定文件未损坏，并且文件扩展名与文件的格式匹配。”的解决办法
			
    上午新建excel工作表时,发现新建完之后居然打不开 提示: 尼玛这坑爹的,难道我的Excel坏了?? 排查问题之后发现 只有新建“Microsoft Excel 工作表”时会出现这种问题,新建“Wo ...
    
			
    8. 
						
  8. Oracle 12c 的新功能：模式匹配查询
			
    模式匹配SQL 在一系列的数据行中辨识出某种模式是一种广泛需求的功能,但在以前的SQL中是不可能的.有许多解决方法,但这些都很难写,很难理解,而且执行效率低下.在Oracle数据库中,从12c开始,你 ...
    
			
    9. 
						
  9. IIS发布WCF服务项目之本地
			
    最近由于项目需求,要做一个上传文件附件的功能,由于是多用户访问,所以这就用到了WCF服务,程序编写完成就需要发布了, 下面记录下发布到IIS的过程: 1,安装IIS 第一步:检查Windows7中II ...
    
			
    10. 
						
  10. [LeetCode][Java]Triangle@LeetCode
			
    Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent n ...
    
			
    11.