《javascript高级程序设计2》学习笔记12 事件

最新推荐文章于 2024-07-16 17:56:11 发布

stabird

最新推荐文章于 2024-07-16 17:56:11 发布

阅读量75

点赞数

分类专栏： javascript 读书笔记文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/stabird/article/details/84550437

版权

javascript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

读书笔记

9 篇文章 0 订阅

订阅专栏

事件冒泡：ie的事件流叫事件冒泡（事件开始由最具体逐级向上传播到较为不具体的节点）

事件捕获：netscape 提出的另一种事件流叫事件捕获（不太具体的节点逐级向下传播到具体的节点与冒泡相反。）

DOM事件流

3个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为捕获事件提供机会，然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以再这个阶段对事件作出响应。

事件处理程序（或事件侦听器）

定义：响应某个事件的函数。以on开头。

DOM0级事件处理程序

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>DOM0级事件处理程序</title>
</head>
<body>
    <input type="button" id="myBtn" value="Click Me" />
    <input type="button" id="myRemoveBtn" value="Remove Event Handler" />
    <script type="text/javascript">
        var btn = document.getElementById("myBtn");
        btn.onclick = function(){
            alert(this.id);
        };
        
        var removeBtn = document.getElementById("myRemoveBtn");
        removeBtn.onclick = function(){
             btn.onclick = null;//删除事件处理程序
        };
    </script>
</body>
</html>

DOM2级事件处理程序

定义了2个方法，用于处理制定和删除事件处理程序的操作：addEventListener()和removeEventListener()

接收三个参数：要处理的事件名，作为事件处理程序的函数，一个布尔值。 true:表示在捕获阶段调用事件处理程序。false:表示在冒泡阶段调用。

主要好处是：可以添加多个事件处理程序。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>DOM2级事件处理程序</title>
</head>
<body>
    <input type="button" id="myBtn" value="Click Me" />
   <p>本实例在IE9以下的浏览器无法运行。</p>
    <script type="text/javascript">
        var btn = document.getElementById("myBtn");
        btn.addEventListener("click", function(){
            alert(this.id);
        }, false);
        btn.addEventListener("click", function(){
            alert("Hello world!");
        }, false);

    </script>
</body>
</html>

stabird

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《javascript高级程序设计2》学习笔记12 事件

事件冒泡：ie的事件流叫事件冒泡（事件开始由最具体逐级向上传播到较为不具体的节点）事件捕获：netscape 提出的另一种事件流叫事件捕获（不太具体的节点逐级向下传播到具体的节点与冒泡相反。）DOM事件流3个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为捕获事件提供机会，然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以再这个阶段对事件作出响应。...
复制链接

扫一扫