input/change event practice - LilyLiya

输入框输入文字，h1显示动态文字

关键词： .addEventListener(' input ', function (e){

})

<!DOCTYPE html>

<head>
    <title>Input Event</title>
    <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
    <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<body>
    <h1>Enter Your Username</h1>
    <input type="text" id="username">
</body>

</html>

const input = document.querySelector('#username');
const h1 = document.querySelector('h1');

input.addEventListener('input', function (e){
    h1.innerText = `Welcome, ${input.value}`;
    if(input.value === ''){
        h1.innerText = 'Enter Your Username';
    }
})

const input = document.querySelector('input');
const h1 = document.querySelector('h1');

// input.addEventListener('change', function (e) {
//     console.log("CASKDJASKJHD")
// })

input.addEventListener('input', function (e) {
    h1.innerText = input.value;
})

问题：change的作用是什么？？？跟input有什么区别

——当输入框的内容发生变化后（并且鼠标指针离开输入框之后），function里面的具体事件才会被触发

——区别：input是只要你敲动了键盘，每打一个字符，事件都会被触发，即使是做复制粘贴的动作，但是除了return，shift，control，up， down，left，right这些之外，这些并没有输入任何东西到输入框。

posted on 2021-01-21 13:57 LilyLiya 阅读(116) 评论(0) 收藏举报

刷新页面返回顶部