javascript下对于事件、事件流、事件触发的顺序随便说说
1.首先我们来了解几个概念，“事件”，“事件流”，“事件名称”，“事件处理函数/事件监听函数，也许是“老生常谈”，知道的朋友可以越过。
事件： 事件是用户自身或浏览器进行的特定行为。如：用户点击 也就是常用的click事件
事件流：多个事件 按一定顺序触发 形成了事件流
事件名称：如上面所讲的click就是事件名
事件处理函数/事件监听函数（Dom的叫法）就是 事件触发后的处理函数，如obj.onclick=fn;函数fn就是事件处理函数
2.下面我们来了解一下历史，事件是dom的一部分 是在版本3中已经得到完整的说明，当进浏览器除ie(它有自己的事件模型)，其他像netscape,safari，opera都基本上遵守dom的事件模型
3. 冒泡事件，其基本思想是事件从特定的事件目标向非特定的事件目标顺序触发。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>无标题页</title>
</head>
<body onclick="handleClick()">
<div onclick="handleClick()">click me</div>
</body>
</html>
在ie5.5其冒泡顺序如下图
在ie6.o以上增加了html(为了兼容，最后避免在此标签上添加事件) 如图：
而在Mozilla 1.0中的冒泡事件是：
三种其实顺序没什么不同，只是有部分标签是否支持冒泡的差异
4.我们再看 捕获事件
ie4.0使用的是冒泡事件，而netscape navigator使用的是捕获型事件如下图所示：
、
5.ie只支持冒泡事件，而dom是同时支持“ 冒泡事件和捕获事件的 ”，顺序是：”捕获事件”-----》》“冒泡事件” ，前面我们已经讲了moz,opera,safari等浏览器基本上是符合dom事件模型的，所以他们也支持“ 冒泡事件和捕获事件的 ”，如下图：
6.下面我们了解 怎样为标签添加事件，最常用的方法是在其标签里面添加如 一下代码（这种添加，在moz中只有“捕获事件”，等价于用addEventListener(obj,type,false)添加的函数，这个后面再讲）：
<!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>
<title>无标题页</title>
</head>
<body onclick="alert('body')">
<div onclick="alert('div');">
div
<input id="Button1" onclick="alert('btn');" type="button" value="button" />
</div>
</body>
</html>
点击 按钮 在ie中,依据我们对上面的了解，很容易写出答案了，没错！ie只有冒泡事件 所以 顺序为：button>>div>>body;
而在非ie浏览器如moz中 正如我们上面所说的 内嵌式事件 等价于addEventlistener(type,fn,false) 只从捕获事件中 监听。
所以顺序刚好相反 body>>div>>body;
在addEventlistener(type,fn,true添加事件时) 只监听 “捕获事件” 当第三个参数为false时 只监听 冒泡事件
我们看下面一个例子：
代码如下:
<!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=gb2312" />
<title>无标题页</title>
<style type="text/css">
#ll{ background:#f00; _width: expression(this.width>200?"200px":true);}
</style>
</head>
<body id="obj1">
<div id="obj2"><input id="obj3" id="Text1" type="text" /></div>
<script language="javascript" type="text/javascript">
var $=function(eid){
return typeof eid=="object"?eid:document.getElementById(eid);
};
var fn={
fn1:function(){alert("body");},
fn2:function(){alert("div");},
fn3:function(){alert("test");}
};
var et={};
et.addEvent=function(obj,type,fn,flag){
if(obj.attachEvent){
obj.attachEvent("on"+type,fn);
}else if(obj.addEventListener){
flag=(typeof flag!="undefined")?flag:true;
obj.addEventListener(type,fn,flag);
}else{
obj["on"+type]=fn;
}
};
et.addEvent($("obj1"),"click",fn.fn1,true);
et.addEvent($("obj2"),"click",fn.fn2,false);
et.addEvent($("obj3"),"click",fn.fn3,true);
// et.addEvent($("obj3"),"click",fn.fn3);
// et.addEvent($("obj2"),"click",fn.fn2);
// et.addEvent($("obj1"),"click",fn.fn1);
</script>
</body>
</html>
点击文本域，猜一猜分别在ie和moz（火狐）中的区别，当然在ie中由于 只监听 冒泡事件 所以很好判断 执行顺序为：input>>div>>body
而在moz中 由于div在添加事件时 第三个参数为false 说明div只 监听 冒泡事件，然后我们根据dom的事件 模型 不难判断，先是ojb1>>obj3>>obj2
分别弹出 body>> test >>div
顺便唠叨一下：向同一个标签 动态的添加事件是 执行的顺序在ie和其他非ie内核的浏览器有所不同 ie是“先进先出 ” 就是最先添加的最先执行，其他非ie内核的浏览器是 “先进后出”，就是 最后添加的事件 先执行。
相关推荐
-
js中获取事件对象的方法小结
复制代码 代码如下: var evt = window.event || arguments[0]; 下面分三种添加事件的方式讨论,你也许会看到以前没有看到过的获取方式. 1,第一种添加事件的方式,直接在html的属性中写JS代码 复制代码 代码如下: <div onclick="alert(4);">Div1 Element</div> 大概这是上世纪90年代的写法,那时候直接把js代码写在网页中很普遍,也许那时候的js并不太重要,只是用来做做验证或一些花哨的
-
Ext javascript建立超链接，进行事件处理的实现方法
1,如何在javasript建立超链接 <script type="text/JavaScript"> //方法一: location.href='网址'; //方法二: document.write('<a href="网址">文字</a>'); </script> 2,应用到Ext中的树控件事件处理 tree_03.js 复制代码 代码如下: Ext.onReady(function(){ var root = n
-
js 事件对象 鼠标滚轮效果演示说明
Mouse Wheel Data .slider { width:50px; height:180px; background:#eee; padding:10px 0; cursor:n-resize; } .slider-slot { width:16px; margin:0 auto; height:180px; background:#eee; border:1px solid gray; border-color:#999 white white #999; position:rela
-
js使用函数绑定技术改变事件处理程序的作用域
第一种,也是 最常见的,就是直接在html标签里面通过指定事件处理程序同名的HTML属性来注册事件,代码如下: 复制代码 代码如下: function eventHandler() { alert("当前作用域是 input 元素本身"); } <input type="button" value="单击我" onclick="eventHandler(this)"/> 第二种方式就是将一个函数赋值给一个事件处理程
-
JavaScript实现为指定对象添加多个事件处理程序的方法
本文实例讲述了JavaScript实现为指定对象添加多个事件处理程序的方法.分享给大家供大家参考.具体如下: 如果你希望对象点击的时候同时处理多个事情,可以使用下面的代码 /* Start of the multihandle Object...*/ function MultiHandle(owner){ var my_handlers = new Array(); var my_owner = owner; this.append = function(handler){ my_handle
-
Javascript 事件流和事件绑定
事件流 浏览器中的事件流意味着页面上可有不仅一个,甚至多个元素响应同一个事件.而这一个或多个元素响应事件发生的先后顺序在各个浏览器(主要针对IE和Netscape)上是不同的. 冒泡型事件(Dubbed Bubbling) IE上的解决方案就是冒泡型事件(Dubbed Bubbling).冒泡型事件的基本思想是,事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. 示例(1):点击我触发冒泡型事件流 示例(1)的XHTML代码结构:<span id="cnt0
-
javascript 基础篇3 类，回调函数，内置对象，事件处理
复制代码 代码如下: function 类名(参数表){ this.属性; ...... this.函数; } 这样,函数和数据成员都是用"this."来实现. 我们自己定义一个简单类student好了,然后再去构造它,并且实现一个输出函数. 复制代码 代码如下: <script LANGUAGE="JavaScript"> <!-- function student(a,b){ this.name = a; this.age=b; this.ou
-
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现.事件就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码.这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合.本文将介绍JS事件相关的基础知识. 一.事件流 事件流描述的是从页面中接受事件的顺序. 事件冒泡 事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的结点(文档).以下面HTML页面为例,如果你点击了页面中的按钮,那么"
-
javascript 事件处理、鼠标拖动效果实现方法详解
先看看要拖动的层(模拟窗口)的效果图吧. 要实现的拖动效果:鼠标左键在窗口上方的标题栏上按下,同时移动鼠标,窗口跟着移动.窗口: 复制代码 代码如下: <div id="win"> <div id="win_header"></div> </div> 一点准备工作: 要让窗口能自由移动,那么窗口的定位(position)应该采用绝对定位(absolute): 给窗口添加标题栏,这里使用一个放在窗口顶部的层实现,同时将标
-
javascript下对于事件、事件流、事件触发的顺序随便说说
1.首先我们来了解几个概念,"事件","事件流","事件名称","事件处理函数/事件监听函数,也许是"老生常谈",知道的朋友可以越过. 事件: 事件是用户自身或浏览器进行的特定行为.如:用户点击 也就是常用的click事件 事件流:多个事件 按一定顺序触发 形成了事件流 事件名称:如上面所讲的click就是事件名 事件处理函数/事件监听函数(Dom的叫法)就是 事件触发后的处理函数,如obj.onclick=fn;函
-
javascript下拉框选项单击事件的例子分享
我本人是从事前端开发的技术人员,下拉框是我们应用的比较多的页面元素,今天我结合实际工作中遇到的问题说一下关于下拉框注册事件的一些例子,希望对大家有所帮助. 复制代码 代码如下: <select name="" id="sel"> <option value="111">1</option> <option value="222">2</option> <opti
-
JavaScript关于某元素点击事件的监听和触发
目录 一. 触发元素同步效果 方法一: 原生JavaScript的click()点击事件 方法二:JQuery事件 — trigger()方法 二. 触发元素监听效果 方法一: 原生JavaScript监听 方法二:JQuery监听 场景:在javascript中,如果引用了某个框架中的元素,元素已在原框架实现并内置了点击事件,此时我们希望自己新建的元素的点击事件也触发和前述元素一样的效果. 举例:假设现存在元素A,元素B 方法①:元素A的点击事件会触发元素B的点击事件方法②:直接监听元素B的点
-
javascript事件冒泡和事件捕获详解
事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. <div id="outer"> <p id="inner">Click me!</p> </div> 上面的代码当中一个div元素当中有一个p子元素,如果两个元素都有一个click的处理函数,那么我们怎么才能知道哪一个函数会首先被触发呢? 为了解决这个问题微软和网景提出了两种几乎完全相反的概念. 事件冒泡 微软提出
-
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定.在js代码中绑定.下面的方式1.方式2属于在html中绑定事件,方式3.方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法. 方式1: HTML的DOM元素支持onclick.onblur等以on开头属性,我们可以直接在这些属性值中编写javascript代码.当点击div的时候,
-
深入理解JS的事件绑定、事件流模型
一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll 3.键盘事件: keydown:键盘按下时触发 keypress:键盘按下并抬起的瞬间触发. keyup:键盘抬起触发 [注意事项] ①执行顺序:keydown keypress keyup ②keypress只能捕获数字,字母,符号键,
-
js事件流、事件委托与事件阶段实例详解
目录 前言 1.事件流 2.事件处理程序 3.事件对象 4.跨浏览器事件处理 5.事件委托 总结 前言 JavaScript 与 HTML 的交互是通过事件实现的,事件代表文档或浏览器窗口中某个有意义的时刻.可以使用仅在事件发生时执行的监听器(也叫处理程序)订阅事件.本文总结一下 JS 中的事件相关知识点. 1.事件流 HTML 中与 javascript 交互是通过事件驱动来实现的,例如鼠标点击事件 onclick.页面的滚动事件 onscroll 等等,可以向文档或者文档中的元素添加事件侦听
-
深入解析JavaScript框架Backbone.js中的事件机制
事件模型及其原理 Backbone.Events就是事件实现的核心,它可以让对象拥有事件能力 var Events = Backbone.Events = { .. } 对象通过listenTo侦听其他对象,通过trigger触发事件.可以脱离Backbone的MVC,在自定义的对象上使用事件 var model = _.extend({},Backbone.Events); var view = _.extend({},Backbone.Events); view.listenTo(model
-
浅谈javascript中的事件冒泡和事件捕获
1.事件冒泡 IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).以下面的HTML 页面为例: <!DOCTYPE html> <html> <head> <title>Event Bubbling Example</title> </head> <body> <div id="myDiv&q