Step 1. Analyze web programs in order to test, debug, and improve them Provide y
ID: 3829642 • Letter: S
Question
Step 1. Analyze web programs in order to test, debug, and improve them Provide your own original example for each of the explanations you provide. Visit http://www.w3schools.com/js/js_htmldom_events.asp (Links to an external site.)Links to an external site.. Explain how to add event attributes to HTML elements, and assign functions to the attributes. Explain how to assign a function in JavaScript using the HTML DOM. Provide your own original examples. Visit http://www.w3schools.com/js/js_htmldom_eventlistener.asp (Links to an external site.)Links to an external site.. Explain how to add and remove an event listenter to an element dynamically in JavaScript. Compare the difference between event bubbling and event capturing. Provide your own original examples. Visit http://www.w3schools.com/js/js_htmldom_navigation.asp (Links to an external site.)Links to an external site.. Explain how content is added to elements such as div tags, and how nodes are added inside other nodes. What is the root element? Explain the difference between siblings and parent nodes. Provide your own original examples. Visit http://www.w3schools.com/js/js_htmldom_nodes.asp (Links to an external site.)Links to an external site.. How do you create nodes on the fly and add them to your page using JavaScript? Provide your own original examples. Visit http://www.w3schools.com/js/js_htmldom_methods.asp (Links to an external site.)Links to an external site.. How would you retrieve a value from a form field and then display it in the web page? Provide your own original examples.
Explanation / Answer
Explanation for below code :
The script present in the below code is using the button id which is a DOM element for that it is assigning the value of a inner HTML.
<!DOCTYPE html>
<html>
<body>
<p>Click "Welcome"</p>
<button id="myBtn">Welcome</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick = display;
function display() {
document.getElementById("demo").innerHTML = "Hello User";
}
</script>
</body>
</html>
Difference between Event bubbling and capturing :
Event bubbling and capturing are two ways of event propagation in the HTML DOM , when an event occurs in an element inside another element, and both elements have registered a handle for that event. The event propagation mode determines in which order the elements receive the event. With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements.With capturing, the event is first captured by the outermost element and propagated to the inner elements.
Example : In the example, if you click on any of the highlighted elements, you can see that the capturing phase of the event propagation flow occurs first, followed by the bubbling phase.
var divs = document.getElementsByTagName('div');
function capture() {
log('capture: ' + this.firstChild.nodeValue.trim())
}
function bubble() {
log('bubble: ' + this.firstChild.nodeValue.trim())
}
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', capture, true);
divs[i].addEventListener('click', bubble, false);
}
var $log = $('#log');
function log(msg) {
$log.append('<p>' + msg + '</p>');
}
div {
border: 1px solid red;
padding: 5px;
min-height: 10px;
}
<script src="http://code.jquery.com/jquery.min.js"></script>
<div>1
<div>2
<div>3
<div>4
<div>5</div>
</div>
</div>
</div>
</div>
<section id="log">
</section>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.