浅析javascript中的Event事件

更新时间：2016年12月09日 09:43:38 作者：老板丶鱼丸粗面

本文主要对javascript中的（Event）事件进行介绍，文章篇尾举了几个案例：方块随着鼠标移动；输入框文字提示；仿select控件；留言本；自定义右键菜单；键盘控制div运动。需要的朋友可以看下

1、焦点：当一个元素有焦点的时候，那么他就可以接受用户的输入(不是所有元素都能接受焦点)

给元素设置焦点的方式：

　 1、点击

　　2、tab

　　3、js

2、（例子：输入框提示文字）

　　onfocus:当元素获取焦点时触发：

element.onfocus = function(){};

　 onblur:当元素失去焦点时触发：

element.onblur = function(){};

　 obj.focus() 给指定的元素设置焦点

　　obj.blur() 取消指定元素的焦点

　　obj.select()选择指定元素里面的文本内容

3、（例子：方块随着鼠标移动）

event: 事件对象。

　　当一个事件发生时，和当前这个对象发生的事件所有有关的信息都会临时保存在一个指定的地方-event对象，供我们需要时调用。就像是飞机的黑匣子。

　　事件对象必须在一个对象的事件调用函数中使用才有内容。

　　事件函数：事件调用的函数，一个函数是不是事件函数，不在定义时决定而是在调用的时候决定

4、兼容

element.onclick = fn1;

　　IE/Chrome浏览器:event是一个内置的全局对象（可以直接使用）

 function fn1(){
 　　alert(event);
  }

　　标准下：事件对象是通过事件函数的第一个参数传入

 function fn1(ev){
　　　　alert(ev);
 }

　　兼容写法：

  function fn1(ev){
 　　　　var ev = ev || event;
  }

　　clientX[Y]:当一个事件发生的时候，鼠标到页面可视区的距离

5、事件流（例子：仿select控件）

　　● 事件冒泡：当一个元素接受到事件的时候，会把他接受到的事件传播给他的父级，一直到顶层window。

　　● 事件捕获:一个元素要想接受到事件，它的父元素会首先接受到该事件，然后再传给它。

　　注意：在ie下是没有的事件捕获的。在事件绑定中，标准下有

6、事件绑定

　　● 第一种：

element.onclick = fn1;

　　注意：oDiv.onclick = fn1;

　　　　　oDiv.onclick = fn2;

　　　　　这样fn2会覆盖fn1;

　　● 第二种：

　　IE:obj.attachEvent(事件名称，事件函数)

　　　 1、没有捕获

　　　　2、事件名称有on

　　　　3、事件函数的执行顺序：标准》正序非标准》倒序

　　　　4、this指向window

element.attachEvent(onclick,fn1);

　　标准：obj.addEventListener(事件名称，事件函数，是否捕获)

　　　　1、有捕获

　　　　2、事件名称没有on

　　　　3、事件的执行顺序是正序

　　　　4、this指向触发该事件的对象

element.addEventListener(click,fn1,false);

　bind函数

   function bind(obj,evname,fn){
    if(obj.addEventListener){
    obj.addEventListener(evname,fn,false);
    }else{
     obj.attachEvent('on' + evname,function(){
      fn.call(obj);
     });
    }
   }

事件取消绑定

　● 第一种

element.onclick = null;

　● 第二种

IE:obj.detachEvent(事件名称，事件函数);

document.detachEvent('onclick',fn1);

　　标准：obj.removeEventListener(事件名称，事件函数，是否捕获)；

document.removeEventListener('click',fn1,false);

8、键盘事件(例子：留言本)

　● onkeydown : 当键盘按键按下的时候触发

　● onkeyup : 当键盘按键抬起的时候触发

　● event.keyCode : 数字类型键盘按键的值键值

ctrlKey，shiftKey，altKey布尔值

　当一个事件触发的时候，如果shift || ctrl || alt键没有按下，则返回false，否则返回true;

9、默认事件(例子：自定义右键菜单、键盘控制div运动)

　● 事件默认行为 : 当一个事件发生的时候浏览器默认会做的事。

　● 阻止默认事件：return false;

　oncontextmenu : 右键菜单事件，当右键菜单（环境菜单）显示出来的时候触发。

案例：

方块随着鼠标移动：

onmouseover:当鼠标在一个元素上移动时触发

注意：触发的频率不是像素，而是间隔时间。在一个间隔时间内不论鼠标移动了多远只触发一次

<style>
   body{
     height: 2000px;
    }
    #div{
     width:100px;
     height: 100px;
     background:red;
     position: absolute;
    }
   </style>
   <body>
    <div id="div1"></div>
   </body>
   <script>
    var oDiv = document.getElementById('div1');
    document.onmouseover = function(ev){
     var ev = ev || event;
     // 如果当滚动条滚动了（页面的头部部分隐藏了），方块是以页面定位的，而鼠标是以可视区定位的，这样就会产生bug。所以我们要加上滚动条滚动的距离
     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
     oDIv.style.top = ev.clientX + scrollTop + 'px';
     oDIv.style.left = ev.clientY + 'px';
    }
   </script>

输入框文字提示:

  <style></style>
   <body>
    <input type="text" id="text1" value="请输入内容"/>
    <input type="button" id="btn" value="全选" />
   </body>
   <script>
    var oText = document.getElementById('text1');
    var oBtn = document.getElementById('btn');
    oText.onfocus = function(){
     if(this.value == '请输入内容'){
      this.value = '';
     }
    }
    oText.onblur = function(){
     if(this.value == ''){
      this.value = '请输入内容';
     }
    }
    oBtn.onclick = function(){
     oText.select();
    }
   </script>

仿select控件：

 <style>
    #div1{
     width: 100px;
     height: 200px;
     border: 1px solid red;
     display: none;
    }
   </style>
   <body>
    <input type="button" value="按钮" id="btn" />
    <div id="div1"></div>
    <p>ppppppppp</p>
    <p>ppppppppp</p>
    <p>ppppppppp</p>
    <p>ppppppppp</p>
    <p>ppppppppp</p>
   </body>
   <script>
   window.onload = function(){
    var oBtn = document.getElementById('btn');
     var oDiv = document.getElementById('div1');
     oBtn.onclick = function(ev){
      var ev = ev || event;
      ev.cancelBubble = true;
      oDiv.style.display = 'block';
     }
     document.onclick = function(){
      oDiv.style.display = 'none';
     }
    }
   </script>

留言本:

   <style></style>
   <body>
    <input type="text" id="con"/>
    <ul id="box"></ul>
   </body>
   <script>
    var oUl = document.getElementById('box');
    var oText = document.getElementById('con');
    
    document.onkeyup = function(ev){
     var ev = ev || even; 
     if(ev.keyCode != ''){
      if(ev.keyCode == 13){
       var oLi = document.createElement('li'); 
       oLi.innerHTML = oText.value;
       if(oUl.children[0]){
        oUl.insertBefore(oLi,oUl.children[0]);
       }else{
        oUl.appendChild(oLi);
       }
      } 
     }
    }
  </script>

自定义右键菜单:

  <style>
    body{
    height: 2000px;
    }
    #box{
     width: 100px;
     height: 200px;
     background: red;
     display: none;
     position: absolute;;
    }
   </style>
   <body>
    <div id="box"></div>
   </body>
   <script>
    var oBox = document.getElementById('box');
    document.oncontextmenu = function(ev){
     var ev = ev || event;
     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
     var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
     oBox.style.display = 'block';
     oBox.style.top = scrollTop + ev.clientY + 'px';
     oBox.style.left = scrollLeft + ev.clientX + 'px';
 
     return false;
    }
    document.onclick = function(){
     oBox.style.display = 'none';
    }
   </script>

键盘控制div运动:

   <style>
    #box{
     width: 100px;
     height: 100px;
     background: red;
     position: absolute;
    }
   </style>
   <body>
    <div id="box"></div>
   </body>
   <script>
    var oBox = document.getElementById('box');
    var timer = null;
    var oLeft = false;
    var oTop = false;
    var oRight = false;
    var oBottom = false;
    // 运动一直就绪，等待按键操作
    timer = setInterval(function(){
     if(oLeft){
     oBox.style.left = oBox.offsetLeft - 10 + 'px';
     }else if(oTop){
      oBox.style.top = oBox.offsetTop - 10 + 'px';
     }else if(oRight){
      oBox.style.left = oBox.offsetLeft + 10 + 'px';
     }else if(oBottom){
      oBox.style.top = oBox.offsetTop + 10 + 'px';
     }
     // 防止溢出
     limit();
    },10); 
    // 按键按下，开始运动
    document.onkeydown = function(ev){
     var ev = ev || even;
     switch (ev.keyCode){
      case 37:
       oLeft = true;
       break;
      case 38:
       oTop = true;
       break;
      case 39:
       oRight = true;
       break;
      case 40:
       oBottom = true;
       break;
     }
    }
    // 按键抬起，停止运动
    document.onkeyup = function(ev){
     var ev = ev || even;
     switch (ev.keyCode){
      case 37:
       oLeft = false;
       break;
      case 38:
       oTop = false;
       break;
      case 39:
       oRight = false;
       break;
      case 40:
       oBottom = false;
       break;
     }
    }
    function limit(){
     // 控制左边
     if(oBox.offsetLeft <= 0){
      oBox.style.left = 0;
     }
     // 控制上边
     if(oBox.offsetTop <= 0){
      oBox.style.top = 0;
     }
     // 控制右边
     if(document.documentElement.clientWidth - oBox.offsetLeft - oBox.offsetWidth < 0){
      oBox.style.left = document.documentElement.clientWidth - oBox.offsetWidth + 'px';
     }
     // 控制下边
     if(document.documentElement.clientHeight - oBox.offsetTop - oBox.offsetHeight < 0){
      oBox.style.top = document.documentElement.clientHeight - oBox.offsetHeight + 'px';
     }
    }
   </script>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

js
event

Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
这篇文章主要介绍了Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法，非常具有实用价值，需要的朋友可以参考下
2017-08-08
es6中let和const的使用方法详解
这篇文章主要介绍了es6中let和const的使用方法,结合实例形式详细分析了es6中let和const的基本功能、原理、使用方法及操作注意事项,需要的朋友可以参考下
2020-02-02
lightBox 简易的全屏透明遮罩解决方法
现在全屏的半透明遮罩层在web2.0网站应用非常广泛了，绝大多数遮罩是通过计算页面大小，然后覆盖一个与页面同等大小的层实现，如腾讯qzone, wordpress后台。
2010-06-06
JavaScript 隐性类型转换步骤浅析
隐性类型转换，是==引起的转换，下面通过本文给大家分享JavaScript 隐性类型转换步骤，感兴趣的朋友一起看看吧
2018-03-03
微信小程序websocket聊天室的实现示例代码
这篇文章主要介绍了微信小程序websocket聊天室的实现示例代码，小程序本身对http、websocket等连接均有诸多限制，所以这次项目选择了node.js自带的ws模块。感兴趣的可以参考一下
2019-02-02
layui prompt 设置允许空白提交的方法
今天小编就为大家分享一篇layui prompt 设置允许空白提交的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JS实现点击发送验证码 xx秒后重新发送功能
在一些注册类的网站，经常遇到这样的需求，点击发送验证码，xx秒后重新发送，这样的功能怎么实现呢，接下来通过本文给大家分享js点击发送验证码 xx秒后重新发送功能，需要的朋友参考下吧
2019-07-07
JS多个表单数据提交下的serialize()应用实例分析
这篇文章主要介绍了JS多个表单数据提交下的serialize()应用,接合实例形式分析了原生javascript实现多个表单提交时serialize操作相关使用技巧与操作注意事项,需要的朋友可以参考下
2019-08-08
最简单的JS实现json转csv的方法
这篇文章主要介绍了最简单的JS实现json转csv的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-01-01
基于微信小程序实现人脸数量检测的开发步骤
最近项目需求是统计当前摄像头中的人脸个数,所以下面这篇文章主要给大家介绍了关于基于微信小程序实现人脸数量检测的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-12-12