Difference between revisions of "Event Handlers"
Jump to navigation
Jump to search
| 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> | |||
==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Java Script|Category]]== | ==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Java Script|Category]]== | ||
Revision as of 20:45, 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>