<body>
<!--
页面元素大体分为三类
1、展示类 文字
2、多媒体类 图片/音频/视频
3、交互改值 输入框 单选框 多选框
-->
<input type="text" />
<input type="range" />
<input type="checkbox" />
<script>
// 选择type 属性为 type = text 的内容
const x = document.querySelector("[type=text]");
// 1 、获取焦点 focus
x.onfocus = function () {
console.log("");
};
// 2 、失去焦点 blur
x.blur = function () {
console.log("");
};
// 3 、值变更 change
x.onchange = function () {
//输入框存储的值在value属性中
console.log(this.value);
};
// 4 、输入框输入 input
x.oninput = function () {
console.log(this.value);
};
// 5 、键盘事件 - 案件抬起 keyup
// 事件参数 当系统触发某个事件时 会被那本次事件传到函数中
// 形参名习惯写e 时event 事件缩写
x.onkeyup = function (e) {
console.log("");
// keyCode 按键编号 其中回车编号 13
if (e.keyCode == 13) {
console.log("检测到回车按钮");
}
};
</script>
</body>关键词 获取焦点、失去焦点、更改值、输入框、键盘
686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
