Difference between revisions of "Event Handlers"
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);