• 150455

    文章

  • 1095

    评论

  • 13

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

JavaScript中事件处理、事件捕获和事件冒泡的基本概念


JavaScript中事件处理、事件捕获和事件冒泡

今天在牛客网上刷题,遇到了一个问题没有答对,主要是针对这道题,对自己的知识剖析一下,解决问题的关键点。下面就是我对JavaScript中事件处理、事件捕获和事件冒泡的一个理解和分享:

JS中的事件处理

首先先说一下事件处理的基本概念吧!

事件处理的基本概念

​ 1.事件是浏览器响应用户交互操作的一种机制,利用JavaScript事件处理机制可以开发出更具有交互性,更容易使用的web页面。

​ 2.事件定义了用户与web页面交互时产生的各种操作。浏览器在大部分时间都等待交互事件的发生,并在事件发生时,自动调用事件处理函数,完成事件处理过程。

1.什么是事件

​ 事件就是文档和浏览器的特定的交互瞬间 ,JS和HTML之间的交互就是通过事件实现的

2. 事件流

​ 事件流描述的是从页面中接受事件的顺序,包含IE提出的事件冒泡与Nescape提出的事件捕获流。浏览器默认的是事件冒泡流。

​ 两种思想:

​ IE的事件流叫做事件冒泡,即事件开始时由具体的元素接收,然后逐级向上传播到较为不具体的节点。

​ Netscape团队提出的另一种事件流叫做事件捕获。事件捕获的思想是不太具体的DOM节点应该更早接收事件,而最具体的节点应该最后接收到事件。

img

img

事件冒泡

​ 微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面。也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #myDiv{
        width: 100px;
        height: 100px;
        background-color: aqua;
    }
</style>
<body>
    <div id="myDiv"></div>
</body>
</html>

当用户点击了<div>元素,click事件将按照<div>—><body>—><html>—>document的顺序进行传播。若在<div><body>上都定义了click事件,如下:

<script type="text/javascript">
        var div=document.getElementById("myDiv");
        div.οnclick=function(event){
            alert("div");
        };
        document.body.οnclick=function(event){
            alert("body");
        };    
</script>

点击<div>,将先输出“div”,再输出“body”

IE9,chrome,Firefox,Opera,Safari都支持事件冒泡,并将事件冒泡到window对象。

事件捕获

网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反,事件会从最外层开始发生,直到最具体的元素。当用户点击了<div>元素,采用事件捕获,则click事件将按照document—><html>—><body>—><div>的顺序进行传播。

若在<div>和<body>上都定义了click事件,如下:
<script type="text/javascript">
        var div=document.getElementById("myDiv");    
        div.addEventListener("click",function(event){
            alert("div");
        },true);
        document.body.addEventListener("click",function(event){
            alert("body");
        },true);
        
    </script>
点击<div>,将先输出“body”,再输出“div”。

IE9,chrome,Firefox,Opera,Safari都支持事件捕获,但是IE8和IE8以下的版本只支持事件冒泡。尽管DOM2规范要求事件应该从document对象开始传播,但是现在的浏览器实现都是从window对象开始捕获事件。


695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

0条评论

Loading...


发表评论

电子邮件地址不会被公开。 必填项已用*标注

自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客