Js事件机制_js事物处理机制-优快云博客

本文介绍了JavaScript中的各种事件机制，包括单双击事件、鼠标事件、键盘事件、焦点事件等，并展示了如何为不同的HTML元素绑定这些事件。同时，还讨论了事件的阻断机制以及如何通过超链接标签来调用函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>js事件机制</title>
  
  <script type="text/javascript">
   function testOnClick(){
    alert("单机事件")
   }
   function testDblClick(){
    alert("双击事件");
   }

   /*function testOnmouseMove(){
    alert("鼠标移动");
   }
   function testOnmouseDown(){
    alert("鼠标下移");
   }*/
   function testOnkeyUp(){
    alert("键盘弹起");
   }
   function testOnkeyDown(){
    alert("键盘按下");
   }
   function testOnfoucs(){
    alert("获得焦点");
   }
   function testOnblur(){
    alert("失去焦点");
   }
   function onChange(){
    alert("测试改变");
   }
  </script>
  <style type="text/css">
   #showdiv{
    border:solid 1px;
    width: 300px;
    height: 200px;
   }
   #div01{
    border:solid 1px;
    width: 300px;
    height: 200px;
   }
  </style>
</head>
<body>
  <input type="button" name="" value="单击事件" onclick="testOnClick();" />
  <input type="button" name="" value="双击事件" ondblclick="testDblClick();" />

  <div id=showdiv onmousemove="testOnmouseMove();">
   鼠标移动
  </div>
  <br/>
  <div id=div01 onmouseout="testOnmouseDown();">
   鼠标移出
  </div>
  键盘弹起：<input type="text" name="" value="" onkeyup="testOnkeyUp();" />
  键盘按下：<input type="text" name="" value="" onkeydown="testOnkeyDown();" />
  <br />
  测试获得焦点<input type="text" name="" onfocus="testOnfoucs();" />
  测试失去焦点<input type="text" name="" onblur="testOnblur();"/>
  <br />
  American<select name="" onchange="onChange();">
   <option value="">北京</option>
   <option value="">上海</option>
   <option value="">广州</option>
  </select>
  <br /><br /><br /><br />
</body>
</html>

此外我们还需要注意，超链接标签的调用和事件的阻断机制

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>超链接标签调用函数*事件的阻断机制</title>
  
  <script type="text/javascript">
   function test(){
    alert("我被调用了");
    //return true;//阻断失败
    retrun false;//阻断成功
    //阻断标签自带的功能
   }

  </script>
</head>
<body>
  <h3>超链接标签调用函数*事件的阻断机制</h3>
  <a href="http://www.baidu.com" onclick=" return test();">百度</a>
  <br /><br />
  <a href="javascript:test()">测试调用函数</a>
</body>
</html>