no-jquery 04 Events

Events

Sending Native (DOM) Events

anchorElement.click();

Sending Custom Events

var event = document.createEvent('Event');
event.initEvent('my-custom-event', true, true); //can bubble, and is cancellable
someElement.dispatchEvent(event); //modern; not IE
var event = new CustomEvent('my-custom-event', {bubbles: true, cancelable: true});
someElement.dispatchEvent(event);

Listening For Events

//above IE8
someElement.addEventListener('click', function() {
// TODO event handler logic
});

Removing Event Handlers

var myEventHandler = function(event) {
// handles the event...
} someElement.removeEventListener('click', myEventHandler);

Modifying Events

someEl.addEventListener('some-event', function(event) {
event.stopPropagation();
}); //also prevent other handlers from executing.
someEl.addEventListener('some-event', function(event) {
event.stopImmediatePropagation();
}); someAnchor.addEventListener('click', function(event) {
event.preventDefault();
});

Event Delegation

document.getElementById('my-list').addEventListener('click', function(event) {
var clickedEl = event.target;
if(clickedEl.tagName === 'BUTTON') {
var listItem = clickedEl.parentNode;
listItem.parentNode.removeChild(listItem);
}
});

Keyboard Events

document.addEventListener('keydown', function(event) {
if (event.ctrlKey && event.which === 72) {
// open help widget
}
});
//or
someElement.addEventListener('keypress', function(event) {
// ...
}); someElement.addEventListener('keyup', function(event) {
// ...
});

Mouse Events

someEl.addEventListener('mouseover', function() {
// mouse is hovering over this element
}); someEl.addEventListener('mouseout', function() {
// mouse was hovering over this element, but no longer is
});

Browser Load Events

window.addEventListener('load', function() {
// page is fully rendered
}); document.addEventListener('DOMContentLoaded', function() {
// markup is on the page
}); //<img>, <link>, and <script>. img.addEventListener('load', function() {
// image has successfully loaded
});
//And if the image should fail to load? img.addEventListener('error', function() {
// image has failed to load
});

Ancient Browser Support

Listening For Events

someElement.attachEvent('onclick', function() {
// TODO event handler logic
}); //complex
function registerHandler(target, type, callback) {
var listenerMethod = target.addEventListener || target.attachEvent,
eventName = target.addEventListener ? type : 'on' + type; listenerMethod(eventName, callback);
} // example use
registerHandler(someElement, 'click', function() {
// TODO event handler logic
}); function unregisterHandler(target, type, callback) {
var removeMethod = target.removeEventListener || target.detachEvent,
eventName = target.removeEventListener ? type : 'on' + type; removeMethod(eventName, callback);
} // example use
unregisterHandler(someElement, 'click', someEventHandlerFunction);

The Event Object

function myEventHandler(event) {
var target = event.target || event.srcElement // handle event & target
} function myEventHandler(event) {
if (event.stopPropgation) {
event.stopPropagation();
}
else {
event.cancelBubble = true;
}
}
上一篇:JSTL标签用法 详解


下一篇:JavaWeb_(Hibernate框架)Hibernate配置文件hibernate.cfg.xml