fe5-3:事件機(jī)制和事件綁定

SKYZACK 發(fā)布于2019-08-23 16:57 / 1906人閱讀

摘要：一操作元素創(chuàng)建刪除修改二事件一創(chuàng)建用函數(shù)創(chuàng)建一個元素用設(shè)置屬性注冊用戶修改用給一個元素添加子元素這里給添加剛才創(chuàng)建好的按鈕刪除以下兩種方法都可以刪除元素一種是自毀一種是父節(jié)點(diǎn)刪除子元素二點(diǎn)擊事件獲得按鈕聲明一個函數(shù)用于在按鈕點(diǎn)擊

一、操作元素(創(chuàng)建, 刪除, 修改)
二、事件

// 一、
// 創(chuàng)建
// 用 document.createElement 函數(shù)創(chuàng)建一個元素
var button = document.createElement("button");
// 用 innerHTML 設(shè)置屬性
button.innerHTML = "注冊用戶"

// 修改
// 用 appendChild 給一個元素添加子元素
// 這里給 .login-form 添加剛才創(chuàng)建好的按鈕
var form = document.querySelector(".login-form")
form.appendChild(button)

// 刪除
var pwd = document.querySelector("#id-input-password")
// 以下兩種方法都可以刪除元素
// 一種是自毀
// 一種是父節(jié)點(diǎn)刪除子元素
pwd.remove()
form.removeChild(pwd)

// 二、
// 點(diǎn)擊事件
//  獲得按鈕
var loginButton = document.querySelector("#id-button-login")
// 聲明一個函數(shù), 用于在按鈕點(diǎn)擊后執(zhí)行
var clicked = function(event) {
    log("按鈕被點(diǎn)擊到了", event)
}
// 添加事件, 使用 addEventListener 函數(shù), 它有兩個參數(shù)
loginButton.addEventListener("click", clicked)
// 第一個是事件的名字, 第二個是事件發(fā)生后會被自動調(diào)用的函數(shù)
// loginButton 發(fā)生了 "click" 事件后調(diào)用 clicked 函數(shù)

GPU云服務(wù)器云服務(wù)器事件機(jī)制事件冒泡機(jī)制事件注冊機(jī)制 extjs 事件機(jī)制

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/103562.html

相關(guān)文章

我了解到的JavaScript異步編程

摘要：接下來我們看下三類異步編程的實(shí)現(xiàn)。事件監(jiān)聽事件發(fā)布訂閱事件監(jiān)聽是一種非常常見的異步編程模式，它是一種典型的邏輯分離方式，對代碼解耦很有用處。一、一道面試題前段時間面試，考察比較多的是js異步編程方面的相關(guān)知識點(diǎn)，如今，正好輪到自己分享技術(shù)，所以想把js異步編程學(xué)習(xí)下，做個總結(jié)。下面這個demo 概括了大多數(shù)面試過程中遇到的問題： for(var i = 0; i < 3; i++...

RichardXG 2019-08-20 18:56 評論0 收藏0
【JS實(shí)用技巧】利用冒泡機(jī)制，減少事件綁定，優(yōu)化頁面性能

摘要：如何通過一些技巧，達(dá)到減少事件綁定，優(yōu)化頁面性能的目的呢接下來介紹一下我個人對優(yōu)化事件綁定的實(shí)踐。這里直接給出最佳實(shí)踐利用事件冒泡機(jī)制來為元素綁定事件。再加上由于創(chuàng)建太多的事件監(jiān)聽，也會對頁面性能有影響。引言無論新手老手，在前端開發(fā)中，經(jīng)常要為DOM元素綁定事件，以實(shí)現(xiàn)某些功能。如何通過一些JS技巧，達(dá)到減少事件綁定，優(yōu)化頁面性能的目的呢？接下來介紹一下我個人對優(yōu)化事件綁定的實(shí)踐。...

Jackwoo 2019-08-20 14:17 評論0 收藏0
淺談React事件機(jī)制

摘要：事件簡介事件是合成事件，所有事件都自動綁定到最外層上。支持事件的冒泡機(jī)制，我們可以使用和來中斷它。這樣做簡化了事件處理和回收機(jī)制，效率也有很大提升。事件類型合成事件的事件類型是原生事件類型的一個子集。 React事件簡介 React事件是合成事件，所有事件都自動綁定到最外層上。因?yàn)閂irtual DOM 在內(nèi)存中是以對象的形式存在的，所以React 基于 Virtual DOM 實(shí)現(xiàn)了...

moven_j 2019-08-02 15:29 評論0 收藏0
淺談React事件機(jī)制

摘要：事件簡介事件是合成事件，所有事件都自動綁定到最外層上。支持事件的冒泡機(jī)制，我們可以使用和來中斷它。這樣做簡化了事件處理和回收機(jī)制，效率也有很大提升。事件類型合成事件的事件類型是原生事件類型的一個子集。 React事件簡介 React事件是合成事件，所有事件都自動綁定到最外層上。因?yàn)閂irtual DOM 在內(nèi)存中是以對象的形式存在的，所以React 基于 Virtual DOM 實(shí)現(xiàn)了...

MyFaith 2019-08-23 18:36 評論0 收藏0
# 實(shí)現(xiàn)一套自定義事件機(jī)制

摘要：因此事件觸發(fā)時，事件處理函數(shù)的實(shí)參中必須包含當(dāng)前事件的基本信息。事件取消事件取消中需要做的就是已經(jīng)綁定的事件處理函數(shù)移除掉即可。事件機(jī)制為我們的web開發(fā)提供了極大的方便，使得我們能在任意時候指定在什么操作時做什么操作、執(zhí)行什么樣的代碼。如點(diǎn)擊事件，用戶點(diǎn)擊時觸發(fā)；keydown、keyup事件，鍵盤按下、鍵盤彈起時觸發(fā)；還有上傳控件中，文件加入前事件，上傳完成后事件。由于在恰當(dāng)...

hzx 2019-08-21 17:18 評論0 收藏0