javascript 中的事件机制
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 中的事件机制的更多相关文章
- jQuery中的事件机制深入浅出
昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...
- JavaScript中的事件循环机制跟函数柯里化
一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...
- JavaScript中的事件委托机制跟深浅拷贝
今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...
- 深入理解javascript中的事件循环event-loop
前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...
- JavaScript中的事件对象
JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...
- JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获
先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...
- 了解javascript中的事件(二)
本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...
- javascript中onclick事件能调用多个方法吗
Q: javascript中onclick事件能调用多个方法吗? A: 可以的,方法如下onclick="aa();bb();cc();"每个方法用“;”分号隔开就行了
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
随机推荐
- auth用户认证库
关于auth库,建议如下:1. ion_auth,基于Redux重写而成,非常不错的认证库,国外用的很多,几个最新的ci2.0.2基础上的开源系统(如doveforum)都用它,支持ci 2.0和以上 ...
- debug命令简介
debug命令不区分大小,debug的命令都是一个字母,后跟或不跟参数 1.debug [路径\文件] [参数] [参数]--[参数] debug相应程序 2. D(Dump) [地址] [范围] 显 ...
- 【POJ2482】Stars in Your Window(线段树,扫描线)
题意:在二维坐标系中有一些带权值的点,要求用一个长宽指定不能互换的框套住其中的一些,使得它们的权值和最大. n<=10000 x,y<=2^31 思路:首先按X排序,将Y坐标离散化,X坐标 ...
- Html+Ajax+Springmvc+Mybatis,不用JSP
有一个原因如下很合本人观点: http://bbs.csdn.net/topics/390939813 前端使用HTML+Ajax,后端使用Java Servlet,这样完全可以做到前后端分离,前端那 ...
- JavaScript 对象、DOM对象、jquery对象的区别、转换详解
一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...
- MINA系列学习-IoAccpetor
其实在mina的源码中,IoService可以总结成五部分service责任.Processor线程处理.handler处理器.接收器和连接器,分别对应着IoService.IoProcessor.I ...
- ELK日志管理之——kibana部署
1.kibana安装 [root@localhost ~]# wget https://download.elastic.co/kibana/kibana/kibana-4.1.1-linux-x64 ...
- php开发环境搭建——laravel框架,apache服务器,git版本控制
本文主要阐述做项目前的开发环境安装——后端为php,前端采用grunt进行自动化构建.具体介绍了windows平台下采用apache运行php的环境搭建,以及git工具安装.写得有点粗糙,但过程完整, ...
- Source Insight 3.X utf8支持插件更新
[更新内容] 修复了当UTF8文件外部改变时,SI无法检测到的bug. 实现 [下载地址] 点我 [计划] 未来(无限长)优化utf8编码检测规则,提高准确度.
- Mongodb无法访问28107的问题
解压mongodb文件后,放到指定文件,最好别有空格.汉字之类的文件中 此时在mongodb文件夹下,建立一个 db 文件夹,此时执行启动命令,默认27017端口号可以打开,但是28017端口无法打开 ...