Events
Define events
- onclick (onmouseover, onkeyup, etc.)
- inline in html attribute
- addEventListener
// html
<html>
<head>
<title></title>
<style>
#circle{
posirtion: absolute;
left: 50px;
top: 50px;
height: 100px;
width: 100px;
border-radius: 50%;
background: #000;
}
</style>
</head>
<body>
<div id="circle"></div>
</body>
</html>// javascript
var elem = document.getElementById('circle');
elem.onclick = function(){
this.style.backgroundColor = 'green';
}// html
<html>
<head>
<title></title>
<style>
#circle{
posirtion: absolute;
left: 50px;
top: 50px;
height: 100px;
width: 100px;
border-radius: 50%;
background: #000;
}
</style>
</head>
<body>
<div id="circle" onclick="this.style.backgroundColor = 'yellow';"></div>
</body>
</html>Standart events model
var elem = document.getElementById('id'),
someFunc = function(){
alert('Hello!');
},
anotherFunction = function(){
alert('Goodbye!');
};
elem.addEventListener('click', someFunc, false);
elem.addEventListener('click', anotherFunc, false);
elem.removeEventListener('click', anotherFunc, false);Event object
var someFunc = function(e){
console.log(e.type);
console.log(e.target);
console.log(this);
console.log(e.currentTarget);
e.preventDefault();
}Define events for <IE9
var elem = document.getElementById('id'),
someFunc = function(e){
var targ = e.scrElement; // e.target for normal browsers
e.returnValue = false; // e.preventDefault for normal browsers
alert('Old IE');
}
elem.attachEvent('onclick', someFunction);
elem.detachEvent('onclick', someFunction);
Crossbrowsing events
var eventsObj = {
addEvent: function(el, type, fn){
if (typeof addEventListener !== 'undefined'){
el.addEventListener(type, fn, false);
}
else if(typeof attachEvent !== 'undefined'){
el.attachEvent('on' + type, fn);
}
else {
el['on' + type] = fn;
}
},
removeEvent: function(el, type, fn){
if (typeof removeEventListener !== 'undefined'){
el.removeEventListener(type, fn, false);
}
else if(typeof detachEvent !== 'undefined'){
el.detachEvent('on' + type, fn);
}
else {
el['on' + type] = null;
}
}
}
var eventsObj = {
getTarget: function(event){
if(typeof event.target !== 'undefined'){
return event.target;
}
else {
return event.scrElement;
}
},
preventDefault: function(event){
if(typeof event.preventDefault !== 'undefined'){
event.preventDefault();
}
else {
event.returnValue = false;
}
}
}
var el = document.getElementById('id'),
someFunc = function(){
alert('some function!');
};
eventsObj.addEvent(el, 'click', someFunc);Delegate
var changeColor = function (e) {
eventsObj.preventDefault(e);
var elem = eventsObj.getTarget(e),
colorData = elem.getAttribute('data-color');
if ( colorData ) {
if (e.type === 'click') {
document.body.className = '';
} else if (e.type === 'mouseover') {
document.body.className = colorData;
}
}
};
eventsObj.addEvent(document, 'click', changeColor );
eventsObj.addEvent(document, 'mouseover', changeColor );JS - Events
By andrei_bibik
JS - Events
- 781
