[Learning]#26 JS: HTML DOM Events — Part 4(Start Over Version)
After understanding the basic HTML DOM Event concept in the last article, now we move on to an example of inserting HTML language in <script>.
Step 1. Adding <div> and <input> tags in <body></body>
In the beginning, we write box in the division.
input is a tag allowing users to key in context in a single line.
<div id="box">Box</div>
<input id="input1" type="text">Step 2.
- Use innerHTML to replace the initial — box — with the new context — Welcome to HTML DOM v2.
- Install a listener called keyup.
(keyup = click a button of a keyboard and it bounces back right away.)
Usually when a function is used for calling back, the system will input an object — event — into it.
So we can name a parameter(I wrote “e”) to output the value of the input frame.
Usage scenario: when creating a register page, we may need a listener to monitor the user’s behavior, e.g. checking the value type of the password they key in.
<script type="text/javascript">
const box1 = document.getElementById('box')
box1.innerHTML= '<p>Welcome to HTML DOM v2.</p>'
const in1 = document.getElementById('input1')
in1.addEventListener('keyup',function(e) {
console.log('e.target.value',e.target.value)
})
})
</script>
