Chapter 4 DOM & DOM Events

4.1 DOM elements

  • A webpage is a DOM (Document Object Model)

  • Nodes of a tree where the document is the root

  • Contain parents and children

  • Nodes contain attributes

4.2 DOM elements

4.2.1 Query elements

  • In Vanilla JS
<div id = "pouet" name="plop" class = "plouf">Wesh</div>

document.querySelector("#pouet") // With the ID

document.querySelectorAll(".plouf") // With the class

document.getElementById("pouet") // With the ID

document.getElementsByName("plop") // With the name attribute

document.getElementsByClassName("plouf") // With the class

document.getElementsByTagName("div") // With the tag

4.3 DOM events

DOM events are generated by the user interacting with the web page, or programmatically (i.e by JavaScript).

4.3.1 Browser Events

  • click / dblclick

  • focus

  • keypress, keydown, keyup

  • mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup

  • scroll

https://developer.mozilla.org/fr/docs/Web/Events

4.3.2 Shiny events

Shiny comes with a series of events.

$(document).on('shiny:connected', function(event) {
  alert('Connected to the server'); 
});
Name Event.Properties Cancelable Target
shiny:connected socket No document
shiny:disconnected socket No document
shiny:sessioninitialized NA No document
shiny:busy NA No document
shiny:idle NA No document
shiny:inputchanged name, value, inputType, binding, el Yes input element
shiny:message message Yes document
shiny:conditional NA No document
shiny:bound binding, bindingType No input/output element
shiny:unbound binding, bindingType No input/output element
shiny:value name, value, binding Yes output element
shiny:error name, error, binding Yes output element
shiny:outputinvalidated name, binding No output element
shiny:recalculating NA No output element
shiny:recalculated NA No output element
shiny:visualchange visible, binding No output element
shiny:updateinput message, binding Yes input element
shiny:filedownload name, href No download button/link

4.4 Add Event Listeners

4.4.1 Inside tags

<input type="text" onKeyPress = "alert('plop')">

4.4.2 With JS

<input type="text" id = "plop">
<script> 
  document.getElementById("plop").addEventListener("keypress", function(){
    alert("pouet")
  })
</script>

4.5 Example in Shiny

library(shiny)
library(magrittr)
ui <- function(request){
  tagList(
    textInput(
      "txt", "Enter txt"
    ) %>% tagAppendAttributes(
      onKeyPress = sprintf(
        "Shiny.setInputValue('%s_keypress', event.key)", 
        "txt"
        )
    )
  )
}

server <- function(input, output, session){
  observeEvent( input$txt_keypress , {
    print(input$txt_keypress)
    if (input$txt_keypress == "Enter"){
      print("VALIDATED")
    }
  })
  
}

shinyApp(ui, server)
  • Same, but doing all in JavaScript
library(shiny)
library(magrittr)
ui <- function(request){
  tagList(
    textInput(
      "txt", "Enter txt"
    ), 
    tags$script('
    document.getElementById("txt").addEventListener("keypress", function(event){
      Shiny.setInputValue("txt_keypress", event.key, {priority : "event"})
    })
    ')
  )
}

server <- function(input, output, session){
  observeEvent( input$txt_keypress , {
    print(input$txt_keypress)
    if (input$txt_keypress == "Enter"){
      print("VALIDATED")
    }
  })
  
}

shinyApp(ui, server)
ThinkR Website