一、事件流

1.事件流

描述的是在页面中接受事件的顺序

2.事件冒泡

由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点

(最具体 –> 最不具体)

3.事件捕获

最不具体的节点先接收事件,而最具体的节点应该是最后接收事件

(最不具体 –> 最具体)

2.事件处理

1.HTML事件处理

直接添加到HTML结构中

2.DOM0级事件处理

把一个函数赋值给一个事件处理程序属性

<button id="btn">按钮</button>
<script type="text/javascript">
document.getElementById("btn").onclick = function () {
alert("DOM0级事件处理1");//多个事件会被覆盖掉
}
document.getElementById("btn").onclick = function () {
alert("DOM0级事件处理2");
}
</script>

3.DOM2级事件处理

addEventListener(“事件名”,”“事件处理函数”,“布尔值”)

当前版本,一般布尔值都不操作。

true:事件捕获

false:事件冒泡

removeEventListener();

<button id="btn">按钮</button>
<button id="btn2">DOM2级按钮</button>
<script type="text/javascript">
//document.getElementById("btn").onclick = function () {
// alert("DOM0级事件处理1");//多个事件会被覆盖掉
//}
//document.getElementById("btn").onclick = function () {
// alert("DOM0级事件处理2");
//} var btn2 = document.getElementById("btn2");
btn2.addEventListener("click", function () {
alert("DOM2级事件处理1");
}) btn2.addEventListener("click", demo1);
btn2.addEventListener("click", demo2); function demo1() {
alert("DOM2级事件处理2");
} function demo2() {
alert("DOM2级事件处理3");
}
//移除
//btn2.removeEventListener("click", demo2);
</script>

4.IE事件处理程序

attachEvent

detachEvent

3.事件对象

事件对象event

1).type:获取事件类型

2).target:获取事件目标

<div id="div1">
<button id="btn1">按钮</button>
</div>
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
var div1 = document.getElementById("div1");
btn1.addEventListener("click", showType);
div1.addEventListener("click", showDiv);
function showType(event) {
document.write(event.type+"<br>");
document.write(event.target + "<br>");
} function showDiv(event) {
alert("div");
}
</script>

3).stopPropagation():阻止事件冒泡

没有调用showDiv,冒泡被取消了。

function showType(event) {
document.write(event.type+"<br>");
document.write(event.target + "<br>"); //组织事件冒泡
event.stopPropagation();
}

4).preventDefault():组织事件默认行为

(1)

<a id="aid" href="http://www.baidu.com">百度</a>

js

 document.getElementById("aid").addEventListener("click", showaid);
function showaid() {
alert(1);
}

(2)在showaid方法里面,添加

e.stopPropagation();//阻止事件冒泡

(3)阻止默认行为

function showaid(e) {
alert(1);
e.stopPropagation();//阻止事件冒泡
e.preventDefault();//阻止默认行为(这里是跳转baidu)
}

----->------>

javascript - 事件详解(阻止事件冒泡+阻止事件行为)的更多相关文章

  1. 【转载】C# 中的委托和事件(详解:简单易懂的讲解)

    本文转载自http://www.cnblogs.com/SkySoot/archive/2012/04/05/2433639.html C# 中的委托和事件(详解) C# 中的委托和事件 委托和事件在 ...

  2. JavaScript事件详解-jQuery的事件实现(三)

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  3. JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  4. JavaScript事件详解-zepto的事件实现

    zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...

  5. JAVASCRIPT事件详解-------原生事件基础....

    javaScirpt事件详解-原生事件基础(一)   事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...

  6. react第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)

    第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制) 课程目标 深入理解和掌握事件的冒泡及捕获机制 理解react中的合成事件的本质 在react组件中合理的使用原生事件 ...

  7. JavaScript中的鼠标滚轮事件详解

    JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...

  8. DOM——事件详解

    事件 事件:触发-响应机制 事件三要素 事件源:触发(被)事件的元素 事件名称: click 点击事件 事件处理程序:事件触发后要执行的代码(函数形式) 事件的基本使用  var box = docu ...

  9. 移动端开发touchstart,touchmove,touchend事件详解和项目

    移动端开发touchstart,touchmove,touchend事件详解和项目 最近在做移动端的开发,在一个“服务商管理”页面使用到了触摸事件"touchstart",&quo ...

  10. 第三天:JS事件详解-事件流

    学习来源: F:\新建文件夹 (2)\HTML5开发\HTML5开发\04.JavaScript基础\6.JavaScript事件详解 学习内容:  1)基础概念 2)举例说明: 代码如上,如果用事件 ...

随机推荐

  1. Hive入门指南

    转自:http://blog.csdn.net/zhoudaxia/article/details/8842576 1.安装与配置 Hive是建立在Hadoop上的数据仓库软件,用于查询和管理存放在分 ...

  2. 15、Nginx动静分离实战

    1.Nginx动静分离基本概述 动静分离, 通过中间件将动静分离和静态请求进行分离. 那为什么要通过中间件将动态请求和静态请求进行分离? 减少不必要的请求消耗, 同时能减少请求的延时. 通过中间件将动 ...

  3. 关于cli打包至服务器出现的BUG(样式错乱,路径出错)解决方案

    很久没来博客园了,今天给大家带来两个硬货bug,前端大牛可能不觉得是啥,但是对于没碰到过这问题的小菜鸟我来说还是很不错的 1.npm run build 至服务端的时候出现路径报错解决方案 ①.本地测 ...

  4. BZOJ1912 最长链树形DP

    每次求出最长链更新答案后要将最长链上的边权改为-1 写的贼长 还可以优化... /*Huyyt*/ #include<bits/stdc++.h> #define mem(a,b) mem ...

  5. maven项目引入外部jar包

    方式1:dependency 本地jar包 <dependency> <groupId>com.hope.cloud</groupId> <!--自定义--& ...

  6. 使用RedisTemplate的操作类访问Redis(转载)

    原文地址:http://www.cnblogs.com/luochengqiuse/p/4641256.html private ValueOperations<K, V> valueOp ...

  7. 区块链——java实现

    简述 本文主要的内容试一次关于区块链的作业,本次作业中有很多地方和实际的区块链不符合,比如hash,本文实现的区块链只是用了区块本身的hash并没去区分,头部和数据部分.仅供参考学习. 介绍 内容有点 ...

  8. 解决Iview 中 input 无法监听 enter 事件

    比如 我们想要在某个组件的根元素监听一个原生事件 可以使用 .native 修饰 v-on 例子: 这样子写 enter事件将无效 但是使用 .native 修饰 就可以监听到 enter事件啦.

  9. html5 音乐 audio

    手机做小项目,需要添加音乐,做此笔记,依赖jquery,代码如下: <!DOCTYPE html> <html lang="en"> <head> ...

  10. 【leetcode】1268. Search Suggestions System

    题目如下: Given an array of strings products and a string searchWord. We want to design a system that su ...