浅谈JavaScript的事件


Posted in Javascript onFebruary 27, 2015

1、事件流

    事件流描述的是从页面中接收事件的顺序。但是IE提出的是冒泡流,而Netscape Communicator提出的是捕获流。
JavaScript事件流

2、事件冒泡(event bubbling)

    事件开始由最具体的元素(嵌套层次最深的那个节点)接收,然后逐级向上传播为较不为具体的节点(文档)。如下:

<html>

    <head>

        <title>事件冒泡</title>

    </head>

    <body>

        <div id="myDiv">点击我</div>

    </body>

</html>

window.onload = function(){

    var obj = document.getElementById("test");

    obj.onclick = function(){

        alert(this.tagName);

    };

    document.body.onclick = function(){

        alert(this.tagName);

    };

    document.documentElement.onclick = function(){

        alert(this.tagName);

    };

    document.onclick = function(){

        alert("document");

    };

    window.onclick = function(){

        alert("window");

    }

};

事件传播顺序:div——>body——>html——>document

注意:
    现代所有浏览器都支持冒泡事件,但实现还有一些差别。IE5.5及更早版本中的事件冒泡会直接从body跳到document(不执行html)。Firefox、Chrome和Safari则将事件一直冒泡到window对象。

3、停止事件冒泡和取消默认事件

 a. 获取事件对象

function getEvent(event) {

// window.event IE

// event 非IE

return event || window.event;

}

 b 功能:停止事件冒泡 
function stopBubble(e) {

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

 if ( e && e.stopPropagation ) {

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

 e.stopPropagation();

} else {

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

window.event.cancelBubble = true;

}

}

 c. 阻止浏览器的默认行为

function stopDefault( e ) {

     // 阻止默认浏览器动作(W3C)

     if ( e && e.preventDefault ) {

         e.preventDefault();

     } else {

        // IE中阻止函数器默认动作的方式

        window.event.returnValue = false;

    }

    return false;

}
Javascript 相关文章推荐
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
JS实现图片放大镜效果的方法
Feb 27 #Javascript
浅谈javascript中的instanceof和typeof
Feb 27 #Javascript
js实现有时间限制消失的图片方法
Feb 27 #Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 #Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 #Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 #Javascript
JavaScript中Function详解
Feb 27 #Javascript
You might like
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
django如何连接已存在数据的数据库
2018/08/14 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
Python Django搭建网站流程图解
2020/06/13 Python
Python和Bash结合在一起的方法
2020/11/13 Python
python 实现波浪滤镜特效
2020/12/02 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
面试后的英文感谢信
2014/02/01 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
大学学习计划书范文
2014/05/02 职场文书
2016新年慰问信范文
2015/03/25 职场文书
阿凡达观后感
2015/06/10 职场文书
2016年清明节寄语
2015/12/04 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书