Uppdaterad 2024-09-08

Event

oninput

Body and Frameset Events

onload
onunload

Form Events

onblur
onchange
onfocus
onreset
onselect
onsubmit

Image Events

onabort

Keyboard Events

onkeydown
onkeypress
onkeyup

Mouse Events

onclick
ondblclick
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup

Touch Events

ongesturestart
ongesturechange
ongestureend

ontouchstart
ontouchmove
ontouchend
ontouchcancel

Skapa ett helt eget event med Javascript

var e = document.createEvent('HTMLEvents');
e.initEvent(type, false, true);
el.dispatchEvent(e);

Creating and triggering events

Creating custom events

var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);

// Dispatch the event.
elem.dispatchEvent(event);

`MutationObserver`

// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList, observer) {
	for(var mutation of mutationsList) {
		if (mutation.type == 'childList') {
			console.log('A child node has been added or removed.');
		} else if (mutation.type == 'attributes') {
			console.log('The ' + mutation.attributeName + ' attribute was modified.');
		}
	}
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();