JavasScript 的对象事件的处理程序

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>

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>