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

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

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

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

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

// 修改
// 用 appendChild 給一個(gè)元素添加子元素
// 這里給 .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")
// 聲明一個(gè)函數(shù), 用于在按鈕點(diǎn)擊后執(zhí)行
var clicked = function(event) {
    log("按鈕被點(diǎn)擊到了", event)
}
// 添加事件, 使用 addEventListener 函數(shù), 它有兩個(gè)參數(shù)
loginButton.addEventListener("click", clicked)
// 第一個(gè)是事件的名字, 第二個(gè)是事件發(fā)生后會(huì)被自動(dòng)調(diào)用的函數(shù)
// loginButton 發(fā)生了 "click" 事件后調(diào)用 clicked 函數(shù)

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103562.html

相關(guān)文章

我了解到的JavaScript異步編程

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

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

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

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

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

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

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

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

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

hzx 2019-08-21 17:18 評(píng)論0 收藏0