1、JS事件详解-事件流

1.1、事件流

1.事件流：

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

2.事件冒泡：

　　由最具体的元素接收，然后逐级上传播至最不具体的节点（文档）

3.事件捕获：

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div>

    <button id="btn"></button>

    <!--冒泡的方式

    先点击btn第一接收的应该是按钮，

    然后应该是包含他的div，再就是html标签，

    最后应该就是html文档了

    事件的捕获：

    最先接收的是文档型接收，然后就是div接收，

    最后才是最具体的button接收-->

</div>

</body>

</html>

2、JS事件详解-事件处理

1.HTML事件处理：

　　直接添加到HTML结构中

2.DOM0级事件处理

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

　　注：只能添加一个事件处理程序；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="div">

    <button id="btn">按钮</button>

</div>

<script>

    var btn = document.getElementById("btn");

    btn.onclick = function(){alert("DOM0级事件处理111");}

    //第一个事件被覆盖。

    // DOM0级事件处理程序只会处理最后一个事件处理程序

    btn.onclick = function(){alert("DOM0级事件处理222");}

    // btn.onclick = null;/*将DOM0级事件处理程序清除*/

</script>

</body>

</html>

3.DOM2级事件处理

　　addEventListener("事件名","事件处理函数","布尔值");

　　true:事件捕获

　　false:事件冒泡

　　removeEventListener();

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="div">

    <button id="btn">按钮</button>

</div>

<script>

    var btn = document.getElementById("btn");

    btn.addEventListener("click",demo1);

    btn.addEventListener("click",demo2);

    btn.addEventListener("click",demo3);

    function demo1(){

        alert("DOM2级事件处理程序1");

    }

    function demo2(){

        alert("DOM2级事件处理程序2");

    }

    function demo3(){

        alert("DOM2级事件处理程序3");

    }

    btn.removeEventListener("click",demo2);

</script>

</body>

</html>

　　DOM2级事件处理程序处理方便。

4.IE事件处理程序

　　attachEvent

　　detachEvent

　　这两个是比IE8低的版本使用的语句。

使用如下代码可解决问题：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div>

<button id="btn">按钮</button>

</div>

<script>

    var btn = document.getElementById("btn");

    if(btn.addEventListener){

        // alert("1");

        // btn.onclick = demo();

        btn.addEventListener("click",demo);

    }else if(btn.attachEvent){

        alert("2");

        btn.attachEvent("onclick",demo);

    }else{

        alert("3");

        btn.onclick = demo;

    }

    function demo(){

        alert("111");

    }

</script>

</body>

</html>

3、JS事件详解-事件对象

3.1、事件对象：

　　在触发DOM事件的时候都会产生一个对象

3.2、事件对象event

　　1.type：获取事件类型

　　2.target：获取事件目标

　　3.stopPropagation：阻止事件冒泡

　　4.preventDefault：阻止事件默认行为

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="div">

    <button id="btn">点击按钮</button>

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

</div>

<script>

    document.getElementById("btn").addEventListener("click",showType);

    document.getElementById("div").addEventListener("click",showDiv);

    document.getElementById("aid").addEventListener("click",showA);

    function showType(){

        alert(event.type);//顾名思义

        alert(event.target);//顾名思义

        event.stopPropagation();//阻止事件冒泡，否则还会触发点击div的事件

    }

    function showDiv(){

        alert("div");

    }

    function showA(){

        event.stopPropagation();

        event.preventDefault();//阻止事件的默认行为

    }

</script>

</body>

</html>

web前端学习（四）JavaScript学习笔记部分（5）-- 事件流详解的更多相关文章

  1. ArcGIS API for javascript开发笔记（六）——REST详解及如何使用REST API调用GP服务

    感谢一路走来默默支持和陪伴的你~~~ -------------------欢迎来访,拒绝转载-------------------- 一.Rest API基础 ArcGIS 平台提供了丰富的REST ...

  2. Linux 学习笔记之 --- epoll 事件模型详解

    epoll 主要采用对已就绪的 fd 进行轮询操作   一.epoll 触发方式 epoll支持 ET 和 LT 两种触发方式 ET(边缘触发):Nginx 就是采用 ET 触发方式,只支持 no-b ...

  3. Web前端与移动开发学习路线图

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...

  4. 想做web前端project师应该学习些什么？

    偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...

  5. 进击的Python【第十四章】：Web前端基础之Javascript

    进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...

  6. 最全的WEB前端开发程序员学习清单

    史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...

  7. 腾讯Web前端开发框架JX(Javascript eXtension tools)

    转自:Web前端开发-Web前端工程师 » 腾讯Web前端开发框架JX(Javascript eXtension tools) JX – Javascript eXtension tools 一个类似 ...

  8. IP地址和子网划分学习笔记之《IP地址详解》

    2018-05-03 18:47:37   在学习IP地址和子网划分前,必须对进制计数有一定了解,尤其是二进制和十进制之间的相互转换,对于我们掌握IP地址和子网的划分非常有帮助,可参看如下目录详文. ...

  9. Quartz学习——SSMM(Spring+SpringMVC+Mybatis+Mysql)和Quartz集成详解（转）

    通过前面的学习,你可能大致了解了Quartz,本篇博文为你打开学习SSMM+Quartz的旅程!欢迎上车,开始美好的旅程! 本篇是在SSM框架基础上进行的. 参考文章: 1.Quartz学习——Qua ...

随机推荐

  1. PAT甲级——A1085 Perfect Sequence

    Given a sequence of positive integers and another positive integer p. The sequence is said to be a p ...

  2. java面向对象特征 — 一句话概括

    java基础学习总结之基本特征,最开始学习的时候,是形而上的理解,用了3年多,再回头看,理解起来颇为顺理成章 语言学习大概就是这样一种规律,学习,不甚解,应用,应用,渐深入人心,回头一看,恍然一悟 最 ...

  3. 一次读懂mybatis中的缓存机制

    缓存功能针对于查询(没听说果UPDATE,INSERT语句要缓存什么,都是直接执行的) 默认情况下,mybatis会启用一级缓存. 如果使用同一个session对象调用了相同的SELECT语句,则直接 ...

  4. Ubuntu中使用Nginx+rtmp搭建流媒体直播服务

    一.背景 本篇文章是继上一篇文章<Ubuntu中使用Nginx+rtmp模块搭建流媒体视频点播服务>文章而写,在上一篇文章中我们搭建了一个点播服务器,在此基础上我们再搭建一个直播服务器, ...

  5. 去掉IE提示：在此页上的ActiveX控件和本页上的其他部分的交互可能不安全。你想允许这种交互吗？

    由于项目需求,需要用到OCX控件.而在IE浏览器中加载OCX控件会有如下提示: 这是因为OCX控件有一个ID,而这个ID注册后IE不认为该OCX控件是安全的.所以,必须把这个控件注册为安全控件. 假设 ...

  6. Errors were encountered while processing: mysql-server-5.5

    ubuntu 中运行完sudo apt-get install curl之后,最后出现: ldconfig deferred processing now taking place Errors we ...

  7. Odoo中Qweb使用入门

    参考 可参考官网例子https://doc.odoo.com/trunk/web/qweb/或 http://thierry-godin.developpez.com/openerp/tutorial ...

  8. mapreduce.Job: Running job: job_1553100392548_0001

    这几天一直在尝试一个mapreduce的例子,但是一直都是卡在mapreduce.Job: Running job: job_1553100392548_0001,查看日志也不报错,查看每个配置文件没 ...

  9. 阿里OSS ajax方式 web直传

    部分js代码 send_request = function(){//这是从后台获取认证策略等信息. var htmlobj=$.ajax({url:root+"/service/polic ...

  10. PHP7中标量类型declare的用法详解

    这篇文章主要介绍了PHP7标量类型declare用法,结合实例形式分析了PHP7中标量类型declare的功能.特性与相关使用技巧,需要的朋友可以参考下 本文实例讲述了PHP7标量类型declare用 ...