浅谈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 相关文章推荐
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
JavaScript中的函数嵌套使用
Jun 04 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
Canvas实现动态的雪花效果
Feb 13 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
Vue-component全局注册实例
Sep 06 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
javascript cookies操作集合
2010/04/12 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
python3.5使用tkinter制作记事本
2016/06/20 Python
python使用tornado实现简单爬虫
2018/07/28 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
python分布式计算dispy的使用详解
2019/12/22 Python
python如何修改文件时间属性
2021/02/05 Python
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
判断单链表中是否存在环
2012/07/16 面试题
体育教育专业毕业生自荐信
2013/11/15 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
民主生活会发言材料
2014/10/20 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
消防宣传语大全
2015/07/13 职场文书
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android