Js事件机制

最新推荐文章于 2024-09-01 13:33:34 发布

sun_clouds

最新推荐文章于 2024-09-01 13:33:34 发布

阅读量214

点赞数

文章标签： javascript 事件机制

本文链接：https://blog.csdn.net/sun_clouds/article/details/78187357

版权

<!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="单击事件" οnclick="testOnClick();" />
  <input type="button" name="" value="双击事件" οndblclick="testDblClick();" />

  <div id=showdiv οnmοusemοve="testOnmouseMove();">
   鼠标移动
  </div>
  <br/>
  <div id=div01 οnmοuseοut="testOnmouseDown();">
   鼠标移出
  </div>
  键盘弹起：<input type="text" name="" value="" οnkeyup="testOnkeyUp();" />
  键盘按下：<input type="text" name="" value="" οnkeydοwn="testOnkeyDown();" />
  <br />
  测试获得焦点<input type="text" name="" οnfοcus="testOnfoucs();" />
  测试失去焦点<input type="text" name="" οnblur="testOnblur();"/>
  <br />
  American<select name="" οnchange="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" οnclick=" return test();">百度</a>
  <br /><br />
  <a href="javascript:test()">测试调用函数</a>
</body>
</html>

sun_clouds

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js事件机制

js事件机制事件机制：(事件的监听机制)当某类事务的发生时会引起另一类事务的发生单双击事件鼠标键盘焦点需要给合适的标签添加合适的事件 --> function testOnClick(){ alert("单机事件") } function testDblClick(){ a
复制链接

扫一扫