文档章节

JavaScript的事件详解

Ethan-GOGO
 Ethan-GOGO
发布于 2016/03/18 15:57
字数 344
阅读 110
收藏 0

1.事件流

1)事件冒泡:最具体的元素传递到最不具体的元素

2)事件捕获:最不具体的元素传递到最具体的元素


2.事件处理

1.HTML事件处理 缺点是改了方法名,button的点击事件方法名也要同时修改
<body>
    <div id="div">
        <button id="btn1" onclick="demo1()">按钮</button>
    </div>
    <script>
        function demo1(){
            alert("HTML事件处理");
        }
    </script>
</body>

2.DOm0级事件处理 缺点:同一对象的事件会被覆盖
<body>
    <div id="div">
        <button id="btn1">按钮</button>
    </div>
    <script>
        var e = document.getElementById("btn1");
        e.onclick = function(){alert("Dom0级事件处理1")}
        e.onclick = function(){alert("Dom0级事件处理2 覆盖1")}
        function demo1(){
            alert("HTML事件处理");
        }
    </script>
</body>

3.Dom2级处理事件
<body>
    <div id="div">
        <button id="btn1">按钮</button>
    </div>
    <script>
        document.getElementById("btn1").addEventListener("click",demo);
        function demo(){
            alert("Dom2级处理事件")
        }
    </script>
</body>

4.IE处理事件  attachEvent IE>9
<body>
    <div id="div">
        <button id="btn1">按钮</button>
    </div>
    <script>
        document.getElementById("btn1").attachEvent("onclick",demo);
        function demo(){
            alert("Dom2级处理事件")
        }
    </script>
</body>


3.事件对象

<body>
    <div id="div">
        <button id="btn1">按钮</button>
        <a id="aid" href="http://www.baidu.com">百度</a>
    </div>

    <script>
        document.getElementById("btn1").addEventListener("click",showType);
        function showType(event){
            alert(event.type);//事件类型
            alert(event.target);//事件目标
            event.stopPropagation();//如果开启,div即无法接收事件.阻止事件冒泡
        }

        document.getElementById("div").addEventListener("click",showDiv)
        function showDiv(){
            alert("div");
        }

        document.getElementById("aid").addEventListener("click",showA)
        function showA(event){
            event.preventDefault();//阻止事件默认行为
        }
    </script>
</body>


© 著作权归作者所有

上一篇: JavaScript内置对象
下一篇: JavaScript Dom对象
Ethan-GOGO
粉丝 13
博文 174
码字总数 82033
作品 0
广州
私信 提问
浅谈js的事件循环(Event Loop)

事件循环是js这门语言的一大特点。 了解事件循环机制,有助于日常开发中遇到的一些异步问题。 而且还是前端面试一经常考点。 故本人结合一些文章和个人的一些开发经验,浅淡一下 一,js是一门...

田小菜
05/08
0
0
每个JavaScript工程师都应懂的33个概念

摘要: 基础很重要啊! 原文:33 concepts every JavaScript developer should know 译文:每个 JavaScript 工程师都应懂的33个概念 作者:stephentian Fundebug经授权转载,版权归原作者所有...

Fundebug
2018/10/30
0
0
[转] 最全前端开发面试问题及答案整理

原文地址:https://github.com/hawx1993/Front-end-Interview-questions 作者:@markYun 前端开发面试知识点大纲: 1.请你谈谈Cookie的弊端 cookie虽然在持久保存客户端数据提供了方便,分担...

OSC编辑部
2015/07/21
20.7K
4
JEPLUS平台JS事件的DB操作——JEPLUS软件快速开发平台

JEPLUS平台JS事件的DB操作 JEPLUS平台JS事件中有一个关于DB的API,这个API是平台自己封装的,这是比较常见常用的一个API,今天这篇笔记就说一下关于DB这个API得一些用法和操作技巧。 一、打开...

JEPLUS
2018/06/27
14
0
2019 前端面试 | 知其然,并知其所以然

Web 前置知识 《老生常谈的从 URL 输入到页面展现背后发生的事》[编号:web01] 《初次接触前端,我们要理解哪些名词?》 《工欲善其事,必先利其器——软件安装、环境搭建》 《做一次山大王,...

itsOli
05/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
昨天
59
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
昨天
28
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
昨天
65
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
昨天
58
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
昨天
60
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部