资讯专栏INFORMATION COLUMN

fe5-3:事件机制和事件绑定

SKYZACK / 1815人阅读

摘要:一操作元素创建删除修改二事件一创建用函数创建一个元素用设置属性注册用户修改用给一个元素添加子元素这里给添加刚才创建好的按钮删除以下两种方法都可以删除元素一种是自毁一种是父节点删除子元素二点击事件获得按钮声明一个函数用于在按钮点击

一、操作元素(创建, 删除, 修改)
二、事件

// 一、
// 创建
// 用 document.createElement 函数创建一个元素
var button = document.createElement("button");
// 用 innerHTML 设置属性
button.innerHTML = "注册用户"

// 修改
// 用 appendChild 给一个元素添加子元素
// 这里给 .login-form 添加刚才创建好的按钮
var form = document.querySelector(".login-form")
form.appendChild(button)

// 删除
var pwd = document.querySelector("#id-input-password")
// 以下两种方法都可以删除元素
// 一种是自毁
// 一种是父节点删除子元素
pwd.remove()
form.removeChild(pwd)

// 二、
// 点击事件
//  获得按钮
var loginButton = document.querySelector("#id-button-login")
// 声明一个函数, 用于在按钮点击后执行
var clicked = function(event) {
    log("按钮被点击到了", event)
}
// 添加事件, 使用 addEventListener 函数, 它有两个参数
loginButton.addEventListener("click", clicked)
// 第一个是事件的名字, 第二个是事件发生后会被自动调用的函数
// loginButton 发生了 "click" 事件后调用 clicked 函数

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

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

相关文章

  • 我了解到的JavaScript异步编程

    摘要:接下来我们看下三类异步编程的实现。事件监听事件发布订阅事件监听是一种非常常见的异步编程模式,它是一种典型的逻辑分离方式,对代码解耦很有用处。 一、 一道面试题 前段时间面试,考察比较多的是js异步编程方面的相关知识点,如今,正好轮到自己分享技术,所以想把js异步编程学习下,做个总结。下面这个demo 概括了大多数面试过程中遇到的问题: for(var i = 0; i < 3; i++...

    RichardXG 评论0 收藏0
  • 【JS实用技巧】利用冒泡机制,减少事件绑定,优化页面性能

    摘要:如何通过一些技巧,达到减少事件绑定,优化页面性能的目的呢接下来介绍一下我个人对优化事件绑定的实践。这里直接给出最佳实践利用事件冒泡机制来为元素绑定事件。再加上由于创建太多的事件监听,也会对页面性能有影响。 引言 无论新手老手,在前端开发中,经常要为DOM元素绑定事件,以实现某些功能。如何通过一些JS技巧,达到减少事件绑定,优化页面性能的目的呢?接下来介绍一下我个人对优化事件绑定的实践。...

    Jackwoo 评论0 收藏0
  • 浅谈React事件机制

    摘要:事件简介事件是合成事件,所有事件都自动绑定到最外层上。支持事件的冒泡机制,我们可以使用和来中断它。这样做简化了事件处理和回收机制,效率也有很大提升。事件类型合成事件的事件类型是原生事件类型的一个子集。 React事件简介 React事件是合成事件,所有事件都自动绑定到最外层上。因为Virtual DOM 在内存中是以对象的形式存在的,所以React 基于 Virtual DOM 实现了...

    moven_j 评论0 收藏0
  • 浅谈React事件机制

    摘要:事件简介事件是合成事件,所有事件都自动绑定到最外层上。支持事件的冒泡机制,我们可以使用和来中断它。这样做简化了事件处理和回收机制,效率也有很大提升。事件类型合成事件的事件类型是原生事件类型的一个子集。 React事件简介 React事件是合成事件,所有事件都自动绑定到最外层上。因为Virtual DOM 在内存中是以对象的形式存在的,所以React 基于 Virtual DOM 实现了...

    MyFaith 评论0 收藏0
  • # 实现一套自定义事件机制

    摘要:因此事件触发时,事件处理函数的实参中必须包含当前事件的基本信息。事件取消事件取消中需要做的就是已经绑定的事件处理函数移除掉即可。 事件机制为我们的web开发提供了极大的方便,使得我们能在任意时候指定在什么操作时做什么操作、执行什么样的代码。 如点击事件,用户点击时触发;keydown、keyup事件,键盘按下、键盘弹起时触发;还有上传控件中,文件加入前事件,上传完成后事件。 由于在恰当...

    hzx 评论0 收藏0

发表评论

0条评论

SKYZACK

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<