注册事件

target.addEventListener(type, listener, options);

或者

target.addEventListener(type, listener, useCapture); //第三个选项为布尔值，表示是否启用事件捕获，默认不启用false

　　事件类型参考 https://developer.mozilla.org/zh-CN/docs/Web/API/Event

删除事件

target.removeEventListener(type, listener[, useCapture])

事件冒泡 / 事件捕捉

　　事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡

举个栗子，点击里面的div 同时也会触发外面div 的事件

<body>

    <div id="outside">

        <div id="inside">

        </div>

    </div>

</body>

</html>

<script>

    document.querySelector('#outside').addEventListener('click',function(e){

        console.log("i am outside");

    })

    document.querySelector('#inside').addEventListener('click',function(e){

        console.log('i am inside');

    })

</script>

两种方法可以组织事件冒泡

  • e.cancelBubble = true
  • e.stopPropagation()
    document.querySelector('#outside').addEventListener('click',function(e){

        console.log("i am outside");

    })

    document.querySelector('#inside').addEventListener('click',function(e){

        // e.cancelBubble = true;

        e.stopPropagation();

        console.log('i am inside');

    })

事件委托

事件委托就是事件冒泡的一种应用，举个栗子，在下面dom中，如果想要给每个li上绑定click事件，需要循环遍历每一个li，然后在给每一个li分别注册事件，这显然影响性能，因此我们可以通过事件委托来实现这一操作

<ul>

    <li>hello 1</li>

    <li>hello 2</li>

    <li>hello 3</li>

    <li>hello 4</li>

  </ul>

我们给ul注册点击事件，事件会捕捉每一次li的点击，将点击对象保存在e.target ，而e.currectTarget中保存的是ul对象

<script>

    let ul = document.querySelectorAll('ul')[0]

    let aLi = document.querySelectorAll('li')

    ul.addEventListener('click',function(e){

       let oLi1 = e.target

       let oLi2 = e.currentTarget

        console.log(oLi1)   //  被点击的li

        console.log(oLi2)   // ul

        console.og(oLi1===oLi2)  // false

    })
</script>

代码来源：https://www.jianshu.com/p/1dd668ccc97a

阻止默认行为

什么是默认行为？ 例如点击a标签后会自动跳转，点击submit按钮后会提交等等

Event.preventDefault()

JS 事件 Event的更多相关文章

  1. js事件(Event)知识整理

    事件(Event)知识整理,本文由网上资料整理而来,需要的朋友可以参考下   鼠标事件 鼠标移动到目标元素上的那一刻,首先触发mouseover 之后如果光标继续在元素上移动,则不断触发mousemo ...

  2. js事件 event.target

    我们购物车里,会时不时增加和删除产品时,就会绑定事件和解绑的动作. <ul> <li></li> <li></li> </ul> ...

  3. js事件(Event)知识整理[转]

    事件注册 平常我们绑定事件的时候用dom.onxxxx=function(){}的形式 这种方式是给元素的onxxxx属性赋值,只能绑定有一个处理句柄. 但很多时候我们需要绑定多个处理句柄到一个事件上 ...

  4. js 事件event

    var EventUtil = { addHandler: function(element,type,handler){ if(element.addEventListener){ element. ...

  5. Node.js 事件循环（Event Loop）介绍

    Node.js 事件循环(Event Loop)介绍 JavaScript是一种单线程运行但又绝不会阻塞的语言,其实现非阻塞的关键是“事件循环”和“回调机制”.Node.js在JavaScript的基 ...

  6. JavaScript -- 时光流逝（八）：js中的事件Event的使用

    JavaScript -- 知识点回顾篇(八):js中的事件Event的使用 事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. (1) onabort : onabort 事件会在图像 ...

  7. js阻止时间冒泡事件——event.stopPropagation()

    1. 作用:不再派发事件. 2. 语法: html代码: <div class="oreder-cont" ng-click="Orderdetails()&quo ...

  8. 理解js事件循环（event loop）

    队列:先进先出 栈:后进先出 javascript的Event Loop 和 Node.js的Event Loop 区别: js(运行在浏览器),有主线程.异步任务队列的概念: node.js使用li ...

  9. The Node.js Event Loop, Timers, and process.nextTick() Node.js事件循环，定时器和process.nextTick()

    个人翻译 原文:https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/ The Node.js Event Loop, Ti ...

随机推荐

  1. 函数节流和防抖（todo）

    一.什么是函数节流和函数防抖 函数节流和函数防抖目的都是避免同时多次执行函数. 函数防抖是将多次执行变成一次执行,函数节流是将多次执行变成每隔一定时间执行一次. 二.具体实现 三.什么时候需要节流,什 ...

  2. 时间复杂度On和空间复杂度O1是什么意思？

    (1).把输入规模看成x轴,所花时间/空间看成y轴 O(n)就是y=x,y随x的增长而线性增长.也就是成正比,一条斜线. O(1)就是y=1,是一个常量,不管x怎么变,y不变,一条与x轴平行的线. ( ...

  3. PAT 乙级 1060 爱丁顿数(25) C++版

    1060. 爱丁顿数(25) 时间限制 250 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 英国天文学家爱丁顿很喜欢骑车.据说他 ...

  4. 学习笔记之WinSCP

    WinSCP :: Official Site :: Free SFTP and FTP client for Windows https://winscp.net/eng/index.php Win ...

  5. dos命令及github介绍

    dos命令:(不区分大小写)(尽量不要用汉字) 1.打开终端的快捷方式: window+r 输入cmd 或点击 开始栏 输入cmd 2.终端的目录:c盘默认 user/administator: 想在 ...

  6. 00013 - top命令详解

    top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以通过用户按键来不 ...

  7. SSH框架总结(环境搭建+框架分析+实例源码下载)

    一.SSH框架简介 SSH是struts+spring+hibernate集成的web应用程序开源框架. Struts:用来控制的,核心控制器是Controller. Spring:对Struts和H ...

  8. PROC UNIVARIATE 简单示例

    OPTIONS NOCENTER LS=MAX PS=MAX USER=SASHELP; PROC UNIVARIATE DATA=FISH;WHERE SPECIES='Bream';VAR HEI ...

  9. ZooKeeper系列（6）:ZooKeeper机制架构

    一.ZooKeeper权限管理机制 1.1 权限管理ACL(Access Control List) ZooKeeper 的权限管理亦即ACL 控制功能,使用ACL来对Znode进行访问控制.ACL的 ...

  10. 16 Linux系统的文件压缩、解压与归档

    这一节的内容,我们详细介绍下Linux的文件压缩.解压缩与文件归档的内容,也就是tar.gzip.bzip2.xz等命令的内容: 压缩(compress)与解压缩(uncompress) Linux系 ...