13事件

事件类型

  • 依赖于设备的输入事件:键盘事件和鼠标事件,这些事件都是直接和设备相关的。
  • 独立于设备的输入事件:例如cick事件等,这些事件并没有直接与设备相关
  • 用户界面的相关事件:用户界面事件属于较高级的事件,一般多用于表单中的组件。状
  • 变化的相关事件:这些事件与用户行为无关,而是由网络或浏览器触发的。
  • 特定API事件:这些事件多用于特定场景的实现,例如 HTML5中提供的拖放API中的事件等
  • 与错误处理的相关事件

注册事件

注册事件指:就是将 Javascript函数与指定的事件相关联。

句柄:被绑定的函数成为该事件的句柄。

  1. 通过事件属性 <button id="btn1" onclick="fn()">按钮</button> <script> function fn() { console.log('你终于点击了我') } </script>
  2. DOM中相关对象提供的事件属性 <button id="btn2">按钮</button> <script> var btn2 = document.getElementById('btn2') btn2.onclick = function () { console.log('你终于点击了我') } // 如果为某个事件指定的处理函数是已定义好的,只写函数名,不能有小括号 btn2.onclick = fn </script>
  3. 为指定元素添加事件监听器 <button id="btn3">按钮</button> <script> var btn3 = document.getElementById('btn3') // 添加事件 btn3.addEventListener('click', fn) // 移除事件 btn3.removeEventListener('click', fn) </script> 其中addEventListener(eventName,functionName,capture),参数分别如下:
    • eventName 为元素指定具体的事件名称(例如单击事件是 clicke等)
    • functionName 注册事件的句柄
    • capture 设置事件是捕获阶段还是冒泡阶段。 false为默认值,表示冒泡阶段

    IE8中提供的事件监听器为:element.attachEvent(eventName,functionName)

    • eventName:为元素指定具体的事件名称(例如单击事件是 click等)
    • functionName:注册事件的句柄

事件中的this,当使用 addeventlistener()方法为某个HTML页面元素注册事件的时候,this就指代注册事件的元素。

移除注册事件

移除事件只有removeEventListener(),DOM标准规范提供的 removeEvenListener()方法,调用该方法表示向指定元素移除事件监听器。

element.removeEvenListener(eventName,functionName,capture)

  • eventName 表示移除的事件名称(例如单击事件是 click等)
  • functionName 注册事件的句柄(之前使用 addeventlistener0方法定义的)
  • capture 设置事件是捕获阶段还是冒泡阶段。flkc为默认值,表示冒泡阶段

Even事件对象

为HTML页面中的元素注册事件时,事件的处理函数具体一个参数,该参数就是 Event事件对象Event事件对象中包含了该事件的信息,以及该事件发生在哪个元素上

var liElement = document.getElementById('link')
liElement.onclick = function (event) {
    /*
                target属性:触发当前事件的目标元素
                currentTarget属性:绑定当前事件的目标元素
                this:与currentTarget属性一致
            */
    console.log(event.target, event.currentTarget, this)
}

属性或方法

描述

target

表示触发当前事件的HTML元素

currentTarget

表示注册当前事件的HTML元素

srcElement

E8及之前版本浏览器支持,表示触发当前事件的HTML元素

returnValue

E8及之前版本浏览器支持,表示取消当前事件的默认行为

cancelBubble

E8及之前版本测览器支持,表示阻止当前事件的冒泡行为

preventDefault

表示取消当前事件的默认行为

stopPropagation

表示阻止当前事件的冒泡行为

获取目标元素

  1. target 用于获取触发当前事件的HTML元素
  2. currentTarget 用于获取当前事件的HTML元素

默认行为

什么是默认行为:

  • <a>标签跳转功能
  • <form>元素中点击<input type='submit'>提交按钮时,提交表单功能
  • 输入框的输入文本内容功能
  • 单选框或复选框的切换选项功能。
  1. preventDefault var link = document.getElementById('link') // 1. Event事件对象preventDefault()方法 link.onclick = function (event) { event.preventDefault(); }
  2. return false // 2. 函数return语句 link.onclick = function () { return false }

获取鼠标坐标

  • pageXpageY 表示鼠标在整个页面中的位置。如果页面过大(存在滚动条),部分页面可能存在可视区域之外。
  • clientXclientY 表示鼠标在整个可视区域中的位置。
  • screenXscreenY 表示鼠标在整个屏幕中的位置。从屏幕(不是浏览器)的左上角开始计算。
  • offsetXoffsetY 表示鼠标相对于定位父元素的位置。

事件流

  1. 捕获阶段(网景公司提出) 按照DOM树结构由 documenti对象向下的顺序传播,直到目标元素为止
  2. 目标阶段 该阶段就是指目标元素触发当前事件。
  3. 冒泡阶段 按照DOM树结构由目标元素向上的顺序传播,直到document对象为止。

取消事件冒泡

var box1 = document.getElementById('box1')
var box2 = document.getElementById('box2')
var box3 = document.getElementById('box3')
// 第三个参数:默认值 false 表示冒泡阶段;true 表示捕获阶段
box1.addEventListener('click', function () {
    console.log('this is box1')
})
box2.addEventListener('click', function () {
    console.log('this is box2')
})
box2.addEventListener('click', function (event) {
    console.log('this is box3')
    event.stopPropagation()
})

事件委托

当为大量的HTML元素注册相同事件,并且事件的句柄逻辑完全相同时,会造成页面速度下降。不过,事件流允许在这些HTML元素的共同父级元素注册事件。这种方式被称为事件委托

  • 适用于新创建的元素 如果向DOM树结构中添加新的元素,那么不需要再向这个新元素注册相同事件。因为注册事件已经委托给了该元素的祖先元素完成。
  • 简化逻辑代码 这种方式只需要祖先元素一次注册事件,而不需要分别为大量元素注册事件。使得逻辑代码的性能提高,也更加容易维护
city.addEventListener('city', function (event) {
    var target = event.target
    if (target.nodeName === 'LI') {
        console.log('666')
    }
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • node环境安装

    Dreamy.TZK
  • 八、Django分组查询

    你可以组合& 和| 操作符以及使用括号进行分组来编写任意复杂的Q 对象。同时,Q 对象可以使用~ 操作符取反,这允许组合正常的查询和取反(NOT) 查询:

    Dreamy.TZK
  • 为服务器添加秘钥进行登录

    首先在根目录下创建一个隐藏文件mkdir .ssh/,然后设置权限chmod 700 .ssh/

    Dreamy.TZK
  • 微服务架构下的数据一致性保证(二)

    大家好,今天是第二次在这里给大家分享数据一致性的话题,在第一篇分享中我们介绍了微服务架构下应该满足数据最终一致性原则,并介绍实现最终一致性3种模式。 本文是...

    yuanyi928
  • JavaScript中的Event(事件)详解

    时间静止不是简史
  • C#系列学习笔记之事件

    需要使用winform来实现传入图片的base64值,调用接口,返回结果这样的一个功能。大致的设置如下图:

    算法发
  • js高程之事件通识篇(一)

    在早期的浏览器厂商都认为页面中的元素事件都不仅仅是当前元素上,而是相关的其他元素甚至整个页面都应该相关的机制。但有意思的是,早期的两个开发团队分别是ie和Net...

    RobinsonZhang
  • javascript事件流的原理

    事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字。

    前端老鸟
  • 事件机制

    DOM事件模型分为捕获和冒泡。一个事件发生后,会在子元素和父元素之间传播(propagation)。事件传播分为三个阶段:

    Cloud-Cloudys
  • 事件流处理框架NEsper for .NET

    复合事件处理(Complex Event Processing)介绍提到了开源的Esper,NEsper 是一个事件流处理(Event Stream Proce...

    张善友

扫码关注云+社区

领取腾讯云代金券