妙味课堂-Event事件

1、焦点：当一个元素有焦点的时候，那么他就可以接受用户的输入(不是所有元素都能接受焦点)
给元素设置焦点的方式：
　　1、点击
　　2、tab
　　3、js

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

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

  1.      element.onfocus = function(){};

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

  1.  　　element.onblur = function(){};

　　obj.focus() 给指定的元素设置焦点
　　obj.blur() 取消指定元素的焦点
　　obj.select()选择指定元素里面的文本内容

3、（例子：方块随着鼠标移动）
　　event: 事件对象。
　　当一个事件发生时，和当前这个对象发生的事件所有有关的信息都会临时保存在一个指定的地方-event对象，供我们需要时调用。就像是飞机的黑匣子。
　　事件对象必须在一个对象的事件调用函数中使用才有内容。
　　事件函数：事件调用的函数，一个函数是不是事件函数，不在定义时决定而是在调用的时候决定

4、兼容

  1.      element.onclick = fn1;

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

  1.     function fn1(){
  2.  　　alert(event);
  3.  }

　　

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

  1.      function fn1(ev){
  2.  　　　　alert(ev);
  3.  }

　　兼容写法：

  1.      function fn1(ev){
  2.  　　　　var ev = ev || event;
  3.  }

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

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

　　● 事件冒泡：当一个元素接受到事件的时候，会把他接受到的事件传播给他的父级，一直到顶层window。
　　● 事件捕获:一个元素要想接受到事件，它的父元素会首先接受到该事件，然后再传给它。
　　注意：在ie下是没有的事件捕获的。在事件绑定中，标准下有

6、事件绑定

　　● 第一种：

  1.      element.onclick = fn1;

　　注意：oDiv.onclick = fn1;
　　　　　oDiv.onclick = fn2;
　　　　　这样fn2会覆盖fn1;

　　● 第二种：

　　IE:obj.attachEvent(事件名称，事件函数)
　　　　1、没有捕获
　　　　2、事件名称有on
　　　　3、事件函数的执行顺序：标准》正序 非标准》倒序
　　　　4、this指向window

  1.      element.attachEvent(onclick,fn1);

　　标准：obj.addEventListener(事件名称，事件函数，是否捕获)
　　　　1、有捕获
　　　　2、事件名称没有on
　　　　3、事件的执行顺序是正序
　　　　4、this指向触发该事件的对象

  1.      element.addEventListener(click,fn1,false);

　　bind函数

  1.          function bind(obj,evname,fn){
  2.              if(obj.addEventListener){
  3.                  obj.addEventListener(evname,fn,false);
  4.              }else{
  5.                  obj.attachEvent('on' + evname,function(){
  6.                      fn.call(obj);
  7.                  });
  8.              }
  9.          }

7、事件取消绑定
　　● 第一种

  1.      element.onclick = null;

　　● 第二种
　　IE:obj.detachEvent(事件名称，事件函数);

  1.      document.detachEvent('onclick',fn1);

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

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

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

　　● onkeydown : 当键盘按键按下的时候触发
　　● onkeyup : 当键盘按键抬起的时候触发
　　● event.keyCode : 数字类型 键盘按键的值 键值
　　ctrlKey，shiftKey，altKey布尔值
　　当一个事件触发的时候，如果shift || ctrl || alt键没有按下，则返回false，否则返回true;

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

　　● 事件默认行为 : 当一个事件发生的时候浏览器默认会做的事。
　　● 阻止默认事件：return false;
　　oncontextmenu : 右键菜单事件，当右键菜单（环境菜单）显示出来的时候触发。

案例：

　　

　　▓▓▓▓▓▓ 方块随着鼠标移动：

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

  1.  <style>
  2.              body{
  3.                  height: 2000px;
  4.              }
  5.              #div{
  6.                  width:100px;
  7.                  height: 100px;
  8.                  background:red;
  9.                  position: absolute;
  10.              }
  11.          </style>
  12.          <body>
  13.              <div id="div1"></div>
  14.          </body>
  15.          <script>
  16.              var oDiv = document.getElementById('div1');
  17.              document.onmouseover = function(ev){
  18.                  var ev = ev || event;
  19.                  // 如果当滚动条滚动了（页面的头部部分隐藏了），方块是以页面定位的，而鼠标是以可视区定位的，这样就会产生bug。所以我们要加上滚动条滚动的距离
  20.                  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  21.                  oDIv.style.top = ev.clientX + scrollTop + 'px';
  22.                  oDIv.style.left = ev.clientY  + 'px';
  23.              }
  24.          </script>

　　

　　▓▓▓▓▓▓ 输入框文字提示:

  1.          <style></style>
  2.          <body>
  3.              <input type="text" id="text1"  value="请输入内容"/>
  4.              <input type="button" id="btn" value="全选" />
  5.          </body>
  6.          <script>
  7.              var oText = document.getElementById('text1');
  8.              var oBtn = document.getElementById('btn');
  9.              oText.onfocus = function(){
  10.                  if(this.value == '请输入内容'){
  11.                      this.value = '';
  12.                  }
  13.              }
  14.              oText.onblur = function(){
  15.                  if(this.value == ''){
  16.                      this.value = '请输入内容';
  17.                  }
  18.              }
  19.              oBtn.onclick = function(){
  20.                  oText.select();
  21.              }
  22.          </script>

　　

　　▓▓▓▓▓▓仿select控件：

  1.  <style>
  2.              #div1{
  3.                  width: 100px;
  4.                  height: 200px;
  5.                  border: 1px solid red;
  6.                  display: none;
  7.              }
  8.          </style>
  9.          <body>
  10.              <input type="button" value="按钮" id="btn" />
  11.              <div id="div1"></div>
  12.              <p>ppppppppp</p>
  13.              <p>ppppppppp</p>
  14.              <p>ppppppppp</p>
  15.              <p>ppppppppp</p>
  16.              <p>ppppppppp</p>
  17.          </body>
  18.          <script>
  19.              window.onload = function(){
  20.                  var oBtn = document.getElementById('btn');
  21.                  var oDiv = document.getElementById('div1');
  22.                  oBtn.onclick  = function(ev){
  23.                      var ev = ev || event;
  24.                      ev.cancelBubble = true;
  25.                      oDiv.style.display = 'block';
  26.                  }
  27.                  document.onclick = function(){
  28.                      oDiv.style.display = 'none';
  29.                  }
  30.              }
  31.          </script>

　　

　　▓▓▓▓▓▓ 留言本:

  1.          <style></style>
  2.          <body>
  3.              <input type="text" id="con"/>
  4.              <ul id="box"></ul>
  5.          </body>
  6.          <script>
  7.              var oUl = document.getElementById('box');
  8.              var oText = document.getElementById('con');
  9.  
  10.              document.onkeyup = function(ev){
  11.                  var ev = ev || even;
  12.                  if(ev.keyCode != ''){
  13.                      if(ev.keyCode == 13){
  14.                          var oLi = document.createElement('li');
  15.                          oLi.innerHTML = oText.value;
  16.                          if(oUl.children[0]){
  17.                              oUl.insertBefore(oLi,oUl.children[0]);
  18.                          }else{
  19.                              oUl.appendChild(oLi);
  20.                          }
  21.                      }
  22.                  }
  23.              }
  24.          </script>

　　▓▓▓▓▓▓ 自定义右键菜单:

  1.          <style>
  2.              body{
  3.                  height: 2000px;
  4.              }
  5.              #box{
  6.                  width: 100px;
  7.                  height: 200px;
  8.                  background: red;
  9.                  display: none;
  10.                  position: absolute;;
  11.              }
  12.          </style>
  13.          <body>
  14.              <div id="box"></div>
  15.          </body>
  16.          <script>
  17.              var oBox = document.getElementById('box');
  18.              document.oncontextmenu = function(ev){
  19.                  var ev = ev || event;
  20.                  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  21.                  var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
  22.                  oBox.style.display = 'block';
  23.                  oBox.style.top = scrollTop + ev.clientY + 'px';
  24.                  oBox.style.left = scrollLeft + ev.clientX + 'px';
  25.  
  26.                  return false;
  27.              }
  28.              document.onclick = function(){
  29.                  oBox.style.display = 'none';
  30.              }
  31.          </script>

　　▓▓▓▓▓▓ 键盘控制div运动:

  1.          <style>
  2.              #box{
  3.                  width: 100px;
  4.                  height: 100px;
  5.                  background: red;
  6.                  position: absolute;
  7.              }
  8.          </style>
  9.          <body>
  10.              <div id="box"></div>
  11.          </body>
  12.          <script>
  13.              var oBox = document.getElementById('box');
  14.              var timer = null;
  15.              var oLeft = false;
  16.              var oTop = false;
  17.              var oRight = false;
  18.              var oBottom = false;
  19.  
  20.              // 运动一直就绪，等待按键操作
  21.              timer = setInterval(function(){
  22.                  if(oLeft){
  23.                      oBox.style.left = oBox.offsetLeft - 10 + 'px';
  24.                  }else if(oTop){
  25.                      oBox.style.top = oBox.offsetTop - 10 + 'px';
  26.                  }else if(oRight){
  27.                      oBox.style.left = oBox.offsetLeft + 10 + 'px';
  28.                  }else if(oBottom){
  29.                      oBox.style.top = oBox.offsetTop + 10 + 'px';
  30.                  }
  31.                  // 防止溢出
  32.                  limit();
  33.              },10);
  34.  
  35.              // 按键按下，开始运动
  36.              document.onkeydown = function(ev){
  37.                  var ev = ev || even;
  38.                  switch (ev.keyCode){
  39.                      case 37:
  40.                          oLeft = true;
  41.                          break;
  42.                      case 38:
  43.                          oTop = true;
  44.                          break;
  45.                      case 39:
  46.                          oRight = true;
  47.                          break;
  48.                      case 40:
  49.                          oBottom = true;
  50.                          break;
  51.                  }
  52.              }
  53.  
  54.              // 按键抬起，停止运动
  55.              document.onkeyup = function(ev){
  56.                  var ev = ev || even;
  57.                  switch (ev.keyCode){
  58.                      case 37:
  59.                          oLeft = false;
  60.                          break;
  61.                      case 38:
  62.                          oTop = false;
  63.                          break;
  64.                      case 39:
  65.                          oRight = false;
  66.                          break;
  67.                      case 40:
  68.                          oBottom = false;
  69.                          break;
  70.                  }
  71.              }
  72.  
  73.              function limit(){
  74.                  // 控制左边
  75.                  if(oBox.offsetLeft <= 0){
  76.                      oBox.style.left = 0;
  77.                  }
  78.                  // 控制上边
  79.                  if(oBox.offsetTop <= 0){
  80.                      oBox.style.top = 0;
  81.                  }
  82.                  // 控制右边
  83.                  if(document.documentElement.clientWidth - oBox.offsetLeft - oBox.offsetWidth < 0){
  84.                      oBox.style.left = document.documentElement.clientWidth - oBox.offsetWidth + 'px';
  85.                  }
  86.                  // 控制下边
  87.                  if(document.documentElement.clientHeight - oBox.offsetTop - oBox.offsetHeight < 0){
  88.                      oBox.style.top = document.documentElement.clientHeight - oBox.offsetHeight + 'px';
  89.                  }
  90.              }
  91.          </script>

Event事件的更多相关文章

  1. [.NET] C# 知识回顾 - Event 事件

    C# 知识回顾 - Event 事件 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6060297.html 序 昨天,通过<C# 知识回顾 - ...

  2. JS学习笔记9之event事件及其他事件

    -->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...

  3. JS(event事件)

    常用的event事件: 属性 此事件发生在何时... onabort 图像的加载被中断. onblur 元素失去焦点. onchange 域的内容被改变. onclick 当用户点击某个对象时调用的事 ...

  4. event事件学习小节

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Javascript 事件对象（二）event事件

    Event事件: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  6. js event 事件兼容浏览器 ie不需要 event参数 firefox 需要

    js event 事件兼容浏览器    ie不需要 event参数   firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  7. PHP event 事件机制

    PHP event 事件机制   <?php /* * PHP 事件机制 */ class baseClass{ private $_e; public function __set($name ...

  8. trigger()的event事件对象之坑

    问题引入,先贴一段有问题的代码,如果你对 trigger()  这个函数了解不透彻,还真看不出这段代码错在哪.完成的功能是样式转换器,想让页面在加载后自行触发点击事件隐藏三个按钮,但是效果如图并没有隐 ...

  9. Event事件详解

    首先提到event,先要明白event的产生,也要先明白焦点,什么是焦点.焦点 : 使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 我们可以通过一些方式给元素设置 ...

随机推荐

  1. javascript动画系列第三篇——碰撞检测

    前面的话 前面分别介绍了拖拽模拟和磁性吸附,当可视区域内存在多个可拖拽元素,就出现碰撞检测的问题,这也是javascript动画的一个经典问题.本篇将详细介绍碰撞检测 原理介绍 碰撞检测的方法有很多, ...

  2. 传播正能量——做一个快乐的程序员

    引子 今天在博客园看到施瓦小辛格的文章我们搞开发的为什么会感觉到累,顿时有感而发.自己本来不擅长写文章,更不擅长写这种非技术性的文章,但是在思绪喷薄之际,还是止不住有很多话要说.针对从客观上说&quo ...

  3. C# 中参数验证方式的演变

    一般在写方法的时候,第一步就是进行参数验证,这也体现了编码者的细心和缜密,但是在很多时候这个过程很枯燥和乏味,比如在拿到一个API设计文档的时候,通常会规定类型参数是否允许为空,如果是字符可能有长度限 ...

  4. C#基础篇 - 理解委托和事件

    1.委托 委托类似于C++中的函数指针(一个指向内存位置的指针).委托是C#中类型安全的,可以订阅一个或多个具有相同签名方法的函数指针.简单理解,委托是一种可以把函数当做参数传递的类型.很多情况下,某 ...

  5. fiddler发送post请求

    1.指定为 post 请求,输入 url Content-Type: application/x-www-form-urlencoded;charset=utf-8 request body中的参数格 ...

  6. CRL快速开发框架系列教程九(导入/导出数据)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  7. 用游标实现查询当前服务器所有数据库所有表的SQL

    declare @name varchar(100) DECLARE My_Cursor CURSOR --定义游标 FOR (SELECT Name FROM Master..SysDatabase ...

  8. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  9. 流程表单中js如何清空SheetUser控件数据？

    昨天有人问我js怎么清空.我试了试,发现简单的赋给他空值,并没有用.只能给他赋一个真实存在的值才有用.于是跟踪了一下他的删除按钮. 效果如下 使用场景:可以根据字段的不同类别变更人员. js代码如下, ...

  10. win10上部署Hadoop-2.7.3——非Cygwin、非虚拟机

    开始接触Hadoop,听人说一般都是在Lunix下部署Hadoop,但是本人Lunix不是很了解,所以Google以下如何在Win10下安装Hadoop(之后再在Lunix下弄),找到不少文章,以下是 ...