Event Handlers

From rbachwiki
Revision as of 23:55, 25 October 2016 by Bacchas (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
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);

Back To Top- Home - Category