Event Handlers

From rbachwiki
Revision as of 20:45, 25 October 2016 by Bacchas (talk | contribs)
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>

Back To Top- Home - Category