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>