Event Handlers
Jump to navigation
Jump to search
Event Handlers
var p = document.createElement('P');
p.textContent = "A new Paragraph";
p.style.fontSize = '17px';
var li= document.querySelectorAll('li')[1];
li.appendChild(p);
var a = document.querySelector('a');
var h1 = document.querySelector('h1');
a.onmouseover = function(){
h1.textContent = "Outwater Plastics Industries";
};
a.onmouseout = function(){
h1.textContent = "Outwater";
};
HTML
<body>
<h1>Outwter</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</body>
Event Listeners
var a = document.querySelector('a');
var h = document.querySelector('h1');
var hcontent = document.querySelector('h1').textContent;
a.addEventListener('mouseover', Listner1);
a.addEventListener('mouseout', Listner2);
function Listner1(){
h.textContent = "Outwater Plastics Industries";
}
function Listner2(){
h.textContent = hcontent;
}
HTML
<body>
<h1>Orac Decor usa</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</body>
Event Object Properties
var inner = document.querySelector('#inner');
var outer = document.querySelector('#outer');
var h = document.querySelector('h1');
inner.addEventListener('click', innerListener);
outer.addEventListener('click', outerListener);
function innerListener(){
event.stopPropagation(); // without this the inner and outer div would register the click.
h.textContent = "Outwater Plastics"
outer.style.backgroundColor="red";
event.target.style.backgroundColor = 'teal';
};
function outerListener(){
h.textContent = "Barndoor"
event.target.style.backgroundColor = 'blue';
};
HTML
<body>
<h1>Orac Decor usa</h1>
<div style="width:100px; height:100px; background-color: green" id="outer">
<div style="width: 35px; height: 35px; background-color: yellow" id="inner">
</div>
</div>
</body>
Get exact coordinates of clicks
console.log(event.clientX, event.clientY);