一：js中常见得事件

（1） : 鼠标事件
        click ：点击事件
        dblclick ：双击事件
        contextmenu ： 右键单击事件
        mousedown ：鼠标左键按下事件
        mouseup ：鼠标左键抬起事件
        mousemove ：鼠标移动
        mouseover ：鼠标滑入事件
        mouseout ：鼠标滑出事件
        mouseenter ：鼠标移入事件
        mouseleave ：鼠标移出事件
（2）：键盘事件
        keyup ： 键盘抬起事件
        keydown ： 键盘按下事件
        keypress ： 键盘按下事件
（3）：表单事件
        change : 表单内容改变事件
        input : 表单内容输入事件
        blur : 表单失去焦点
        focus： 表单获取焦点
 
二：事件侦听过程详解
　　
　　1：事件侦听 - 就是给事件源（dom元素）绑定一个事件
　　　　

　　　 给DOM元素添加一个事件侦听（监听）,这个DOM元素只能收到对应事件类型的消息
　　　 语法：DOM元素.addEventListener(事件类型,事件回调函数,是否捕获时执行)   - addEventListener这个就是用来侦听事件得关键字
　　　侦听事件addEventListenerd的三个参数参数：

                参数1：事件类型 - 必须是字符串，可以设置为任意字符串，但是部分字符串是系统事件类型
                参数2: 事件回调函数 - 指向一个函数，当收到事件时执行该函数，如果没有收到不执行函数，写侦听事件时不执行函数
                   注意1：事件回调函数 - 有且仅有一个参数 为 e  - event对象
                   注意2：e 是一个事件对象,侦听事件收到消息时获得的事件对象
　　　　 参数3：是否捕获时执行 - 默认值是false，在冒泡时执行，捕获时不执行 / 如果设置为true，在捕获时执行
 // 创建一个侦听事件 , 事件类型为 点击 click ,回调函数为clickHandler ,默认 冒泡
             document.addEventListener('click',clickHandler)

 // 事件回调函数的参数  MouseEvent - 鼠标事件
             function clickHandler(e) {
                 console.log("我被点击了")
             }

　　在上面得代码中侦听事件得对象为 document 就是网页，当我们点击网页得任何一个位置就会触发点击事件，那么就会执行事件的回调函数 clickHandler，打印结果

　　1.2：删除事件　　

　　　　删除事件 ： 语法 - 侦听对象.removeEventListener(事件类型,事件回调函数)  IE8 以上支持
               删除事件的兼容写法：attachEvent 仅IE8及以下支持    事件类型   "on"+type   没有捕获、冒泡阶段选项
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <button id="btn">按钮</button>
 </body>
 <script>
         // 获取dom元素
         var btn = document.querySelector('#btn')
         // 侦听事件
         btn.addEventListener('click',clickHandler1)
         // 事件回调函数
         var num = 0
         function clickHandler1(e){
             num++
             console.log('当num > 3 得时候删除事件')
             if (num>3){
                 // 删除事件
                 e.currentTarget.removeEventListener('click',clickHandler1)
             }
         }
 </script>
 </html>

　　当我们不断点击按钮，就会不断的触发事件，每点击一次 num 的值就会增加，当num大于3时，就删除本次创建的事件和事件回调函数，为什么要删除事件呢？因为当元素的事件不再使用时，必须删除，否则会造成内存堆积，侦听事件都会被存储在堆中，当元素被删除了，也必须删除该元素的所有事件。

　　2：事件侦听 与 抛发  

　　 事件侦听语法 ： 事件侦听对象.addEventListener(事件类型,事件回调函数,是否捕获时执行)

　　 创建事件对象语法：var evt = new Event(事件类型)  -指创建一个事件对象

        抛发事件语法： 事件侦听对象.dispatchEvent(接受事件对象变量)
　　 在我们创建事件的过程中，必须先侦听在抛发   - 如果先抛发在侦听，我们将无法获取到事件是否被触发
            在我们使用侦听事件的过程中需要注意：
                1：事件抛发一般分两种 ： 系统抛发事件 /  自定义抛发事件(需要我们自己创建事件对象)
                2：侦听 和 抛发的对象 是同一个
                3：侦听 和 抛发的事件类型 完全相同
                4：事件回调函数不能使用return 返回值，但是可以return 跳出

 // 侦听事件
         document.addEventListener('奥里给',customHandler)
 // 创建一个事件对象
         var evt = new Event('奥里给')
 // 抛发事件
         document.dispatchEvent(evt)
 // 事件回调函数
         function customHandler(e) {
             console.log(e.type)  //e.type 查看事件的类型
 }
三：事件三阶段
　　

  　　　　 一阶段：捕获 由外到内
                 二阶段：目标 到达目标
                 三阶段：冒泡 由内到外

　　事件三阶段案例：先写好html代码显示三个背景颜色不一样的块。如下

js代码
 // 获取 标签
     var div0 = document.querySelector('.div0')    // 绿色背景块
     var div1 = document.querySelector('.div1')    // 浅粉色块
     var div2 = document.querySelector('.div2')    // 红色块

      // 给每个块都添加点击事件
     div0.addEventListener('click',clickHandler0)
     div1.addEventListener('click',clickHandler1)
     div2.addEventListener('click',clickHandler2)
     function clickHandler0(e){
         console.log('点击div0')
     }

     function clickHandler1(e){
         console.log('点击div1')

     }

     function clickHandler2(e){
         console.log('点击div2')
     }

当我们在点击红色块时，我们会发现，div1和div2都被打印了，这就是事件的冒泡，我们点击的真正目标为红色块div2，但是却触发了其他两个块，那么事件如何进行三阶段的呢？   首先当我们点击红色块div2时，事件进入一阶段，捕获阶段，他会先进入div0，查找目标，当没有发现，会进入下一层查找目标，当进入粉丝块时，也没有发现我们想要的目标，当进入红色块div2 时，就会找到我们点击的目标，div2，这个时候事件的一阶段就变成了二阶段，目标阶段，就会开始向外发送信息触发事件，执行事件回调函数，并由二阶段变成三阶段，冒泡阶段，这时是由内向外的一个过程，不断的往外并触发经过的块的事件，直到最外层，这就是事件三阶段的全过程。那么我们可不可以让他不冒泡呢，有

阻止冒泡语法 e.stopPropagation()  只需要写在想停止冒泡的事件回调函数中

阻止事件冒泡 - 当我们只想让红色块触发事件，其他两个块不触发就是不冒泡，就在红色块的事件回调函数中，写上阻止事件冒泡，这样当事件到二阶段找到目标时，就不会往外冒泡了，那么div0和div1就不会被触发，看如下代码，
     div0.addEventListener('click',clickHandler0)
     div1.addEventListener('click',clickHandler1)
     div2.addEventListener('click',clickHandler2)
     function clickHandler0(e){
         console.log('点击div0')

     }

     function clickHandler1(e){
         console.log('点击div1')

     }

     function clickHandler2(e){
         e.stopPropagation()  // 阻止事件冒泡
         console.log('点击div2') 

     }

这就是事件的三阶段过程，当你想在哪里阻止就在哪里书写阻止事件的方法，是很给力的

Js 事件基础的更多相关文章

  1. 第十一节 JS事件基础

    空白点击事件(没什么用处,做个介绍) <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  2. JS事件基础

    事件对象Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态.什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元素注册的 ...

  3. JS——事件基础应用

    直接写在html标签里: <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1> 另外一种在脚本里调用: <!D ...

  4. C#-WebForm-JS知识：基础部分、BOM部分、DOM部分、JS事件

    一.基础部分: 1.JavaScript 是什么? 是一门脚本语言,是属于弱类型(语言语法很随意),C#是强类型(语言语法非常严格)(李献策lxc) 优点:JS 执行速度快 2.JS 与java有什么 ...

  5. JS 的事件基础、事件侦听与抛发、

    前言 JavaScript是一种事件驱动型语言.事件驱动是指JavaScript引擎并不是在看到代码之后就会立即执行,而是会在合适的时间才去执行.这个合适的时间是指当某个事件发生之后(例如一个输入框的 ...

  6. node.js零基础详细教程(4)：node.js事件机制、node异步IO操作

    第四章 建议学习时间3小时  课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑. ...

  7. jS事件之网站常用效果汇总

    下拉菜单 <!--简单的设置了样式,方便起见,将style和script写到同一个文档,着重练习事件基础--> <!DOCTYPE html> <html> < ...

  8. JS事件委托的原理和应用

    js事件委托也叫事件代理,实际上事件委托就是通过事件冒泡实现的,所谓的事件就是onclick,onmouseover,ondown等等,那么委托呢?委托就是指本来这个事是要你自己做的,但是你却让别人帮 ...

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

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

随机推荐

  1. 如果这篇文章说不清epoll的本质，那就过来掐死我吧！

    转载自:https://www.toutiao.com/i6683264188661367309/ 目录 一.从网卡接收数据说起 二.如何知道接收了数据? 三.进程阻塞为什么不占用cpu资源? 四.内 ...

  2. JDBC 中的事务和批处理 batch

    JDBC事务处理: 事务处理一般在事务开始前把事务提交设置为false 所有DML语句执行完成后提交事务 demo: package com.xzlf.jdbc; import java.sql.Co ...

  3. curl发送多维数组

    //通过curl模拟post的请求: function SendDataByCurl($url,$data=array()){ //对空格进行转义 $url = str_replace(' ','+' ...

  4. 解决Macbook Pro 2017安装Windows10双系统后在Windows系统中Apple蓝牙鼠标不能使用问题

    MAC BOOK PRO 2017安装Windows10双系统 在Windows系统中蓝牙鼠标不能使用解决办法 最近因工作需要,macOS系统不能要求,大部分工作必须要在Windows系统中进行,最初 ...

  5. 关于vagrant环境下项目中图片缓存的问题

    之前用的是iis所以可能没有这些问题,后来换了nginx之后发现图片缓存问题很严重,本项目用的是thinkphp5框架:浏览器.runtime.session.cookie.加参数,后台,所有缓存都清 ...

  6. TVP专家眼中的云开发：定是未来，尚不完美

    TVP专家眼中的云开发:定是未来,尚不完美 C++之父 Bjarne曾说,"世界上只有两种编程语言,一种被人骂,一种没人用".这句玩笑话道出了软件开发行业的真谛,不怕被人吐槽,就怕 ...

  7. C++ Windows - How to get process path from its PID

    出处 https://stackoverflow.com/questions/1933113/c-windows-how-to-get-process-path-from-its-pid 注意质疑(我 ...

  8. opencv-7-鼠标绘制自定义图形

    opencv-7-鼠标绘制自定义图形 opencvc++qt 开始之前 昨天写了具体的基本的图形绘制, 然后我们使用相应的函数接口进行调用, 便能够在图像上绘制出来相应的图形, 我们以图像绘制为例, ...

  9. 监控MySQL服务及httpd服务

    一:监控MySQL服务 [root@server ~]# vim /usr/local/zabbix/etc/zabbix_agentd.conf PidFile=/tmp/zabbix_agentd ...

  10. 【集群实战】Rsync常见错误总结

    1. 服务端指定模块没有对应目录 报错详情: @ERROR: chdir failed rsync error: error startingclient-server protocol (code ...