JS基础入门篇（二十一）—事件流

littleGrow 发布于2019-08-29 15:40 / 3292人阅读

摘要：事件绑定方式一用绑定事件方式二用进行事件侦听，也能起到绑定事件的作用。第一个参数事件名第二个参数解绑的函数名如果是匿名函数，无法解绑。一般使用有名函数传参。

1.事件绑定

方式一：用on绑定事件

方式二：用addEventListener进行事件侦听，也能起到绑定事件的作用。

addEventListener

    第一个参数：事件名
        （click、mouseover...）
        注意：事件名不加on
    第二个参数：绑定的函数
        （有名函数、匿名函数）
    第三个参数：
        是否捕获
        默认值：false
        
可以为一个元素的同一个事件名 绑定上多个处理函数

点击查看效果以及代码，codepen中也有console可以查看

以下是完整代码




    
    Title

2.事件解绑

事件解绑：

 (1)通过用on绑定的事件，只需要为事件 重新赋值 即可。
 (2)通过addEventListener绑定的事件，需要用removeEventListener();来解绑。
        第一个参数：事件名
        第二个参数：解绑的函数名（如果是匿名函数，无法解绑。一般使用有名函数传参。）
        第三个参数：是否捕获，默认值false。

点击查看事件解绑效果！！！

以下是部分核心代码：

3.事件流

事件流的三个阶段：

    （1）捕获阶段
            从 最外层元素 开始 向目标 进行查找的阶段, 
                并且 同时执行 该阶段中 所有 被查找的元素 的 捕获阶段绑定的事件
    （2）处于目标阶段
            触发 目标元素的 对应事件
    （3）冒泡阶段
            从 目标元素 开始 逐渐往 外层 查找,
                并且 同时执行 该阶段中 所有 被查找的元素 的 冒泡阶段绑定的事件。

戳链接，点击div查看效果！！！

以下是全部代码：




    
    Title

以上代码点击黄色的结果。

4.阻止冒泡

    通过 on 进行绑定
        通过 event.cancelBubble = true;阻止冒泡
    通过 addEventListener进行绑定
        通过 event.stopPropagation();阻止冒泡

以上两种其中一种，方式都可以阻止不同绑定方式的冒泡。

以下代码可以粘贴运行看看效果。




    
    Title

5.浏览器的默认行为

浏览器默认行为

    浏览器默认为我们提供的功能
    比如页面跳转，右键菜单，文字拖动，图片拖动

阻止默认行为

    有两种方式
        （1）return false;
        （2）event.preventDefault();


    你好你好啊你好
        百度

注意事项：

一般尽可能使用event.preventDefault阻止默认样式。因为return false；方法在jQuery中，此方法不仅会阻止默认行为，还会阻止冒泡。相当于同时调用了preventDefault和stopPropagation方法。

6.模拟上下文菜单










    复制
    粘贴
    剪切
    另存

云服务器 GPU云服务器二十一 js绑定事件基础 js零基础入门视频入门篇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113476.html

JS基础入门篇（二十一）—事件流

摘要：事件绑定方式一用绑定事件方式二用进行事件侦听，也能起到绑定事件的作用。第一个参数事件名第二个参数解绑的函数名如果是匿名函数，无法解绑。一般使用有名函数传参。 1.事件绑定方式一：用on绑定事件 #box{ width:100px; height:100px; background-color:red; } ...

shevy 2019-08-22 17:59 评论0 收藏0
JS基础入门篇（二十一）—事件流

摘要：事件绑定方式一用绑定事件方式二用进行事件侦听，也能起到绑定事件的作用。第一个参数事件名第二个参数解绑的函数名如果是匿名函数，无法解绑。一般使用有名函数传参。 1.事件绑定方式一：用on绑定事件 #box{ width:100px; height:100px; background-color:red; } ...

Salamander 2019-08-02 10:40 评论0 收藏0
Java学习路线总结，搬砖工逆袭Java架构师（全网最强）

摘要：哪吒社区技能树打卡打卡贴函数式接口简介领域优质创作者哪吒公众号作者架构师奋斗者扫描主页左侧二维码，加入群聊，一起学习一起进步欢迎点赞收藏留言前情提要无意间听到领导们的谈话，现在公司的现状是码农太多，但能独立带队的人太少，简而言之，不缺干 ? 哪吒社区Java技能树打卡【打卡贴 day2...

Scorpion 2021-11-18 10:02 评论0 收藏0
[系统安全] 三十五.Procmon工具基本用法及文件进程、注册表查看

摘要：本文将分享软件基本用法及文件进程注册表查看，这是一款微软推荐的系统监视工具，功能非常强大可用来检测恶意软件。可以帮助使用者对系统中的任何文件注册表操作进行监视和记录，通过注册表和文件读写的变化，有效帮助诊断系统故障或发现恶意软件病毒及木马。 ...

kk_miles 2021-09-02 15:11 评论0 收藏0
JS基础入门篇（二十）—事件和事件对象（一）

摘要：事件事件的定义所有的元素都有事件，我们要做的就是为事件绑定函数，当元素发生事件时就会出发对应的函数。当我们没有为事件绑定函数时，事件的值为。点击事件需要注意的是事件名是，不是。鼠标移动事件鼠标移动持续触发，当鼠标移出此元素上停止触发。 1.事件事件的定义：所有的元素都有事件，我们要做的就是为事件绑定函数，当元素发生事件时就会出发对应的函数。当我们没有为事件绑定函数时，事件的值为nul...

entner 2019-08-29 15:36 评论0 收藏0