Skip to content

Event Handling

The dnb-ui-lib offers a couple of different ways to handling events:

  1. the declarative way to set and handle events (the way we SET the event is declarative)
  2. the imperative way to set and handle events

Have a look at the following basic examples:

The dnb-ui-lib uses snake case (snake_case) to define the event name property (e.g. on_click or on_change). Read more about the naming conventions.

React

Some of the most basic event handling in React.

Stateless Component

Lifecycle Component

This example requires also support for class properties.

Declarative

import { Button } from 'dnb-ui-lib'
export default class MyComponent extends React.Component {
myHandler = event => {}
render() {
return <Button text="Declarative" on_click={this.myHandler} />
}
}

Imperative

export default class MyComponent extends React.Component {
constructor(props) {
super(props)
this._ref = React.createRef()
}
componentDidMount() {
const eventId = this._ref.current.addEvent('on_change', event => {})
this._ref.current.removeEvent(eventId)
}
render() {
return <Button text="Imperative" ref={this._ref} />
}
}

Vue

Use either the @click or v-on:click event binding property. Or else you could also use the imperative ref method.

Declarative

// Template
<dnb-button @click="handleClick">Declarative</dnb-button>
// JS
import dnb from 'dnb-ui-lib/components/vue'
const components = dnb.getComponents(Vue)
...
methods: {
handleClick: e => {}
},
components
...

Imperative

// Template
<dnb-button ref="my_button">Imperative</dnb-button>
// JS
import dnb from 'dnb-ui-lib/components/vue'
const components = dnb.getComponents(Vue)
...
methods: {
handleClick: e => {}
},
mounted() {
this.$refs.my_button.addEvent('on_click', this.handleClick)
},
components
...

HTML & ES5

You may also take a look at the example-html project:

<!-- Declarative -->
<dnb-button text="Declarative" on_click="clickHandler" />
<dnb-button text="Declarative" on_click="myScope.on_click" />
<script>
// Global scope
function clickHandler() {}
// Class scope
function MyClass() {}
MyClass.prototype.on_click = function(event) {}
window.myScope = new MyClass()
</script>
<!-- Imperative -->
<dnb-button text="Imperative" />
<script>
var elem = document.querySelector('dnb-button[text=Imperative]')
var eventId = elem.addEvent('on_click', function(event) {})
elem.removeEvent(eventId)
</script>

Dispatch Imperative Event

Besides the event handler methods, addEvent and removeEvent, there is also a method to dispatch an event:

element.fireEvent('on_click', { value: 'Custom Value' })

Example

This working example uses React to handle the setup (useEffect). But, keep in mind, this is only for demonstration purposes. It works for sure without React on the outer scope.