JavaScript的事件初始

JavaScript 的事件初识

基本概念

html和JS做的一个约定。浏览器需要监听用户做了什么样的操作，并对用户的操作进行对应的反馈，从而形成一个动态的页面效果。用户对于页面的一些操作(点击, 选择, 修改等) 操作都会在浏览器中产生一个个的事件。

事件的三要素

事件源: 哪个元素触发的
事件类型: 是点击, 选中, 还是修改
事件处理程序: 进一步的处理，往往是一个回调函数(用JS编写的)

示例代码

<body><input type="button" value="这是一个按钮">
</body>
<script>// 事件源let button = document.querySelector('input')// 绑定事件类型(点击事件)// 函数设定了事件处理程序button.onclick = function() {alert("hello")}
</script>

常用的键盘事件

onkeydown 事件

onkeydown 事件在用户按下某个键(在键盘上)时发生。

示例：显示键盘按下的对应字母

<body><input type="button" value="这是一个按钮">
</body>
<script>
// 事件源let input = document.querySelector('input')// 绑定事件input.onkeydown = function(event) {console.log("键盘正在按下");let a = event.keyCode;let b = String.fromCharCode(a)console.log(b)}
</script>

注：onkeydown 事件不区分大小写，但是 onkeypress 事件可以

onkeypress 事件

onkeypress 事件也是在用户按下键(在键盘上)时发生

注：不是所有键（例如 ALT、CTRL、SHIFT、ESC）都会在所有浏览器中触发 onkeypress 事件，如需只检测用户是否按下了某个键，需改用 onkeydown 事件，因为它适用于所有键

示例：显示键盘按下的对应字母

<body><input type="button" value="这是一个按钮">
</body>
<script>// 事件源let input = document.querySelector('input')// 绑定事件input.onkeypress = function(event) {console.log("键盘正在按下");let a = event.keyCode;let b = String.fromCharCode(a)console.log(b)}
</script>

onkeyup 事件

onkeyup 事件在用户释放键（在键盘上）时发生

示例：释放按键时给出提示

<body><input type="text" onkeyup="myOnkeyUp()">   
</body>
<script>function myOnkeyUp() {console.log("按键被抬起")}
</script>

KeyboardEvent 对象

属性/方法	描述
altKey	返回触发按键事件时是否按下了 “ALT” 键
ctrlKey	返回按键鼠标事件时是否按下了 “CTRL” 键
shiftKey	返回按键事件触发时是否按下了 “SHIFT” 键

示例代码

<body><input type="text">
</body>
<script>let input = document.querySelector('input')input.onkeydown = function(event) {//如果按键按下的是shift此时弹出一个弹窗，提示shift被按下if(event.shiftKey) {alert("shift键被按下")}if(event.altKey) {alert("alt键被按下")}}
</script>