脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 浅谈JavaScript的事件

浅谈JavaScript的事件

 更新时间：2015年02月27日 11:07:29   投稿：hebedich  
事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

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;
}

您可能感兴趣的文章:

相关文章

  • uniapp实现下拉刷新的几种方式小结

    uniapp实现下拉刷新的几种方式小结

    原生的uniapp的下拉刷新是一个普通的加载框,样式真的很单一,下面这篇文章主要总结介绍了uniapp实现下拉刷新的几种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • ECharts调用接口获取后端数据的四种方法总结

    ECharts调用接口获取后端数据的四种方法总结

    echarts是我们经常用到的数据可视化图形,但是后端反馈给我们的数据经常是数组包对象的集合类型,下面这篇文章主要给大家介绍了关于ECharts调用接口获取后端数据的四种方法,需要的朋友可以参考下
    2022-11-11
  • javascript实现简单飞机大战小游戏

    javascript实现简单飞机大战小游戏

    这篇文章主要为大家详细介绍了javascript实现简单飞机大战小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • javascript获取url上某个参数的方法

    javascript获取url上某个参数的方法

    获取url上的某个参数的方法有很多，在本文为大家介绍下使用javascript是如何实现的，感兴趣的朋友不要错过
    2013-11-11
  • JavaScript Chart 插件整理

    JavaScript Chart 插件整理

    前段时间由于工作关系，查找了一些JS的chart插件，以下数据采集于2010.4.8。
    2010-06-06
  • Javascript异步流程控制之串行执行详解

    Javascript异步流程控制之串行执行详解

    这篇文章主要给大家介绍了关于Javascript异步流程控制之串行执行的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • MUI 实现侧滑菜单及其主体部分上下滑动的方法

    MUI 实现侧滑菜单及其主体部分上下滑动的方法

    下面小编就为大家分享一篇MUI 实现侧滑菜单及其主体部分上下滑动的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • 另类网页中添加运行效果

    另类网页中添加运行效果

    另类网页中添加运行效果...
    2006-12-12
  • uniapp组件之tab选项卡滑动切换功能实现

    uniapp组件之tab选项卡滑动切换功能实现

    这篇文章主要介绍了uniapp组件之tab选项卡滑动切换功能实现，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
    2023-01-01
  • 优雅的使用javascript递归画一棵结构树示例代码

    优雅的使用javascript递归画一棵结构树示例代码

    这篇文章主要给大家介绍了关于如何优雅的使用javascript递归画一棵结构树的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用javascript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-09-09

最新评论