Difference between revisions of "Event Handlers"

From rbachwiki
Jump to navigation Jump to search
(Created page with "==Event Handlers== <pre> var p = document.createElement('P'); p.textContent = "A new Paragraph"; p.style.fontSize = '17px'; var li= document.querySelectorAll('li')[1]; li.appe...")
 
 
(2 intermediate revisions by the same user not shown)
Line 30: Line 30:
</pre>
</pre>
==Event Listeners==
==Event Listeners==
<pre>
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;
}
</pre>
HTML
<pre>
<body>
<h1>Orac Decor usa</h1>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
  </ul>
</body>
</pre>
==Event Object Properties ==
<pre>
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';
   
};
</pre>
HTML
<pre>
<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>
</pre>
Get exact coordinates of clicks
console.log(event.clientX, event.clientY);
==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Java Script|Category]]==

Latest revision as of 23:55, 25 October 2016

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