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>