1、鼠标事件
常用的鼠标事件有MouseDown、MouseUp、MouseMove、MouseOver、MouseOut、Click、Blur及Focus等事件。
mousedown：按下鼠标键时触发
mouseup：抬起鼠标键时触发
click：单击鼠标时触发
dblclick：在同一个元素上双击鼠标时触发
mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件
mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件
wheel：在浏览器窗口滚动鼠标滚轮时触发
代码：
// 为某个节点添加事件监听器
box = document.getElementById("b1");
box.addEventListener( "mousedown",
function(){
console.log("你的鼠标按下了！");
}
);
box.addEventListener( "mouseup",
function(){
console.log("你的鼠标抬起了！");
}
);
box.addEventListener( "click",
function(){
console.log("你的鼠标单击了！");
}
);
box.addEventListener( "dblclick",
function(){
console.log("你的鼠标双击了！");
}
);
box.addEventListener( "mouseenter",
function(){
console.log("你的鼠标进入目标元素了！");
}
);
box.addEventListener( "mouseleave",
function(){
console.log("你的鼠标离开目标元素了！");
}
);
// 为浏览器窗口对象添加事件监听器：以滚动监听为例
window.addEventListener( "wheel",
function(){
console.log("你的鼠标滚轮正在滚动...");
}
);
box.addEventListener( "mousedown",
function(){
console.log("鼠标按下事件已触发");
}
);
box.addEventListener( "mouseup",
function(){
console.log("鼠标抬起事件已触发");
}
);
box.addEventListener( "click",
function(){
console.log("鼠标单击事件已触发");
}
);
box.addEventListener( "dblclick",
function(){
console.log("鼠标双击事件已触发");
}
);
box.addEventListener( "mouseenter",
function(){
console.log("鼠标进入节点事件已触发");
}
);
box.addEventListener( "mouseleave",
function(){
console.log("鼠标离开节点事件已触发");
}
);
// 窗口监听鼠标滚动
window.addEventListener( "wheel",
function(){
console.log("鼠标滚动事件已触发");
}
);结果：
2、键盘事件
常用的键盘事件有KeyDown、KeyPress、KeyUp、Select 和Change事件。
1.KeyDown事件
在键盘上按下一个键时，发生KeyDown事件。在这个事件发生后，由JavaScript自动调用 onKeyDown 句柄。该句柄适用于测览器对象document、图像、超链接及文本区域。
2.KeyPress事件
在键盘上按下一个键后且字符被显示出来之前发生KeyPress事件。在这个事件发生后，由JavaScript 自动调用onKeyPress 句柄。该甸柄适用于浏览器对象document、图像、超链接及文本区域。KeyDown事件总是发生在KeyPress事件之前。如果这个事件处理函数返回false值，就不会产生KeyPress事件。
3.KeyUp事件
在键盘上按下一个键，再释放这个键的时候发生KeyUp事件。在这个事件发生后由JavaScript 自动调用onKeyUp句柄。该句柄适用于浏览器对象document、图像、超链接及文本区域。
一个典型的按键会产生所有这3种事件，依次是KeyDown、KeyPress、按键释放时的KeyUp。KeyDown 触发后，不一定触发KeyUp。当KeyDown 按下并拖动鼠标，那么将不会触发KeyUp事件。
4.Select事件
选定文本输入框或文本输入区域的一段文本后，发生Select事件。在Select事件发生后，由JavaScript 自动调用onSelect 句柄。onSelect句柄适用于文本输入框以及文本输入区。
5)Change 事件
一个选择框、文本输入框或者文本输入区域失去焦点，其中的值又发生改变时，就会发生Change事件。在Change事件发生时，由 JavaScript 自动调用onChange句柄。Change事件是一个非常有用的事件，它的典型应用是验证一个输入的数据。
代码：
<title>键盘事件</title>
<style>
#output {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
width: 300px;
height: 100px;
/* 超出这个盒子的内容，以纵向滚动的方式展示 */
overflow-y: scroll;
/* 保持空白符和换行符 */
white-space: pre-wrap;
}
</style>
</head>
<body>
<div id="output"></div>
<script>
// keydown：按下键盘时触发
// keyup：抬起键盘时触发
// 获取显示按键信息的div节点
const outputDiv = document.getElementById('output');
document.addEventListener( "keydown",
function(event){
console.log(`有键盘被按下: ${event.key}`);
}
)
// 监听整个文档的keydown事件
document.addEventListener(
'keydown',
function(event) {
// 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）
const keyCode = event.key;
// 拼凑输出字符串
const message = `键盘 ${keyCode} 被按下`;
// 将拼凑好的字符串，添加到输出区域
outputDiv.textContent += message + '\n';
outputDiv.scrollTop = outputDiv.scrollHeight;
// 自动滚动到输出区域的底部
// clientHeight 获取元素高度包括 padding 部分，但是不包括 border/margin
// clientWidth 获取元素宽度包括 padding 部分，但是不包括 border/margin
// scrollHeight 元素总高度，它包括 padding ，但是不包括 border/margin， 包括溢出的不可见内容
// scrollWidth 元素总宽度，它包括 padding ，但是不包括 border/margin ， 包括溢出的不可见内容
// scrollLeft 元素的水平滚动条向右滚动的像素数量
// scrollTop 元素的垂直滚动条向下滚动的像素数量
}
);
</script> 结果：
3.表单对象
form 对象（称表单对象或窗体对象）提供一个让客户端输入文字或选择的功能。例如单选按钮、复选框、选择列表等由<form>标签组构成，JavaScript 自动为每一个表单建立个表单对象，并可以将各个子元素中用户提供的信息送至服务器进行处理，当然也可以在JavaScript 脚本中编写程序，对数据进行处理。
表单中的基本元素(子对象)有按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等。在JavaScript 中婴访问这些基本元素，必须通过对应特定的表单元素的名字来实现.每一个元素主要是通过该元素的属性或方法来引用。注意，有些属性无法在页面设计时使用，只能在编程代码中使用。
调用form对象的一般格式为
<form name="表单名"action="URL"...>
<input type="表项类型"name="表项名”value="默认值”事件="方法函数"….>
</form>
1.Text单行单列输人元素
功能：对Text标识中的元素实施有效的控制。
属性：name，设定提交信息时的信息名称；value，用于设定出现在Text文本框中的value 值；defaultvalue，设定Text元素的默认值。
方法：blur(），当前焦点移出；select(），高亮文字。
事件：onFocus，当Text 获得焦点时，产生该事件；onBlur，当元素失去焦点时，产生该事件；onSelect，当文字被高亮显示后，产生该文件；onChange，当Text元素内的值改变时，产生该文件。
2.Textarea多行文本域输人元素
功能：对Textarea中的元素进行控制。
属性：name，设定提交信息时的信息名称；value，设定出现在Textarea多行文本域中的value值；defaultvalue，元素的默认值。
方法：Blur()，失去焦点；Select(），高亮文字。
事件：onBlur，当失去输入焦点后产生该事件；onFocus，当输入获得焦点后，产生该文件；onChange，当文字值改变时，产生该事件；onSelect，高亮文字，产生该文件。
3.Select 选择元素
功能：实施对下拉选择元素的控制。
属性：name，设定提交信息时的信息名称；value，用于设定Select下拉列表框中的value 值；length，对应Select 中的length；options，组成多个选项的数组；SelectIndex，指明
个选项；Text，选项对应的文字；Selected，指明当前选项是否被选中；Index，指明当前选
系的位置（索引值）；defaultSelected，默认选项。
事件：onBlur，当Select 选项失去焦点时，产生该事件；onFocus，当Select 获得焦点时，
产生该事件；onChange，选项状态改变后，产生该事件。
4.Button 按钮
功能：对Button按钮的控制。
属性：name，设定提交信息时的信息名称，对应文档中Button的name；value，设定当
前按钮上显示的value值。
方法：Click(），该方法类似于单击一个按钮。
事件：onClick，当单击Button按钮时，产生该事件。
5.Checkbox复选框
功能：实施对一个具有复选框中元素的控制。
属性：name，设定提交信息时的信息名称；value，用于Checkbox复选框旁边显示的
value 信息；Checked，该属性设定复选框的选中状态，Checked值为被选中。
方法：Click(）：使得鼠标单击复选框的某一个项。事件：onClick：当复选框被选中时，产生该事件。
6.Password口令
功能：对具有口令输入模式的文本框元素的控制。
属性：name，设定提交信息时的信息名称，对应HTML文档中 Password中的name;value，用于设定出现在 Password文本框中的密文模式的 value 值；defaultvalue,Password文本框中的密文模式的默认值。
方法：Select(），高亮口令文本；Blur()，失去 Passward焦点；Focus(),获得 Password焦点。
7.Submit 提交元素
功能：对一个具有提交功能按钮的控制。
属性：name，设定提交信息时的信息名称，对应HTML文档中Submit；value，用于设
定提交按钮上显示的value值。
方法：Click()，相当于单击Submit 按钮。
事件：onClick，当单击该按钮时，产生该事
代码：
<body>
<!-- 简单的HTML表单 -->
<form id="myForm" >
姓名: <input type="text" id="name" value="在此处输入你的姓名"> <br>
邮箱: <input type="email" id="email" value="在此处输入你的邮箱"> <br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</body>
<script>
// 获取表单节点
const form = document.getElementById('myForm');
// 添加“表单提交”事件监听器
form.addEventListener('submit',
function(event) {
event.preventDefault(); // 阻止表单的“默认提交行为”
// 弹出警告框（在实际应用中，你可能会在这里进行AJAX请求或其他处理）
alert('表单提交按钮被按下! (但默认提交行为被截止了)');
// 你可以在这里添加其他代码来处理表单数据
// 例如，获取输入值：
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
console.log('Name:', name);
console.log('Email:', email);
}
);
// 添加表单重置事件监听器
form.addEventListener('reset',
function(event) {
// 弹出警告框
alert('表单已经重置! ');
}
);
// 1.获取姓名输入框节点
const inputElement = document.getElementById('name');
// 2.为表单的姓名输入框添加 select 选中事件监听器
inputElement.addEventListener('select',
function(event) {
console.log('选中的文本范围:', event.target.selectionStart, event.target.selectionEnd); //打印选中文本的起始索引和结束索引
// 注意： selectionEnd 属性返回的是选择范围的结束位置的下一个字符的索引
const selectedText = inputElement.value.substring(event.target.selectionStart, event.target.selectionEnd);
console.log('已选中文本:', selectedText);
}
);
</script>
</html> 