首先提到event，先要明白event的产生，也要先明白焦点，什么是焦点。焦点 : 使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户的输入。

我们可以通过一些方式给元素设置焦点。而并不是所有元素都能够接收焦点的，能够响应用户操作的元素才有焦点。例如：

  1. <input type="text" />   <a href="http://www.baidu.com">百度</a>

　　说到input，平时用的较多的是onfocus : 当元素获取到焦点的时候触发，onblur : 当元素失去焦点的时候触发。当然还有是不常用：obj.select() -选择指定元素里面的文本内容。

　　

  1. //点击btn时，选中text中的内容
  2.  
  3. oBtn.onclick = function() {
  4.  
  5.     oText.select();
  6.  
  7. }

　　接下来才是event : 事件对象 , 当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象，供我们在需要的调用。而刚刚说的，event会保存相关信息，比如说用来鼠标位置、键盘按键。Event对象的兼容：ev = ev || window.event。而接踵而来的就有clientX[Y] ，它是--当一个事件发生的时候，鼠标到页面可视区的距离。我们可以通过一段代码查看event对象中的属性。

  1. function fn1(ev) {
  2.  
  3.     var ev = ev || event;
  4.     for ( var attr in ev ) {
  5.         console.log( attr + ' = ' + ev[attr] );
  6.     }
  7.  
  8. }
  9. document.onclick = fn1;

　

　event对象的所有相关属性，都会打印在控制台上。

　　而由event延伸出来的一个小Demo，就是可以随鼠标任意移动的div。

　　详见：随鼠标任意移动的div

　　代码如下：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. #div1 {width: 100px; height:100px; background: red; position: absolute;}
  8. </style>
  9. <script>
  10. window.onload = function() {
  11.  
  12.     //onmousemove : 当鼠标在一个元素上面移动的触发
  13.     //触发频率不是像素，而是间隔时间，在一个指定时间内（很短），如果鼠标的位置和上一次的位置发生了变化，那么就会触发一次
  14.  
  15.     var i = ;
  16.  
  17.     var oDiv = document.getElementById('div1');
  18.  
  19.     document.onmousemove = function(ev) {
  20.         //document.title = i++;
  21.  
  22.         var ev = ev || event;
  23.  
  24.         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  25.  
  26.         oDiv.style.left = ev.clientX + 'px';
  27.         oDiv.style.top = ev.clientY + scrollTop + 'px';
  28.  
  29.     }
  30.  
  31. }
  32. </script>
  33. </head>
  34.  
  35. <body style="height: 2000px;">
  36.     <div id="div1"></div>
  37. </body>
  38. </html>

　　

提到事件，一定会想到事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡机制。而阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true; 比较简单一个就是模拟的下拉列表。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. #div1 {width:100px; height:200px; border: 1px solid red; display: none;}
  8. </style>
  9. <script>
  10. window.onload = function() {
  11.     var oBtn = document.getElementById('btn');
  12.     var oDiv = document.getElementById('div1');
  13.  
  14.     oBtn.onclick = function(ev) {
  15.         var ev = ev || event;
  16.         ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡
  17.         oDiv.style.display = 'block';
  18.     }
  19.  
  20.     document.onclick = function() {
  21.         oDiv.style.display = 'none';
  22.     }
  23.  
  24. }
  25. </script>
  26. </head>
  27.  
  28. <body>
  29.     <input type="button" value="按钮" id="btn" />
  30.     <div id="div1"></div>
  31. </body>
  32. </html>

　　　　　　　　

　　

Event事件详解的更多相关文章

  1. JavaScript——event事件详解

    1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...

  2. JavaScript事件详解-jQuery的事件实现（三）

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  3. JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  4. JavaScript事件详解-zepto的事件实现

    zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...

  5. JS中的event 对象详解

    JS中的event 对象详解   JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...

  6. JAVASCRIPT事件详解-------原生事件基础....

    javaScirpt事件详解-原生事件基础(一)   事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...

  7. (转)javascript中event对象详解

    原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解          博客分类: javaScript JavaScriptCS ...

  8. iOS中—触摸事件详解及使用

    iOS中--触摸事件详解及使用 (一)初识 要想学好触摸事件,这第一部分的基础理论是必须要学会的,希望大家可以耐心看完. 1.基本概念: 触摸事件 是iOS事件中的一种事件类型,在iOS中按照事件划分 ...

  9. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

随机推荐

  1. PHP数组的操作

    一.数组操作的基本函数数组的键名和值array_values($arr);获得数组的值array_keys($arr);获得数组的键名array_flip($arr);数组中的值与键名互换(如果有重复 ...

  2. PHP - PDO 之 mysql 事务功能

    <?php /* pdo 学习 */ $dsn = 'mysql:host=localhost;dbname=cswl';//构建连接dsn $db = new pdo($dsn,'root', ...

  3. html 页面 ajax 方法显示遮罩

    showLoading.css 样式: ;;list-style-type:none;} a,img{;} .overlay{;;;;;width:100%;height:100%;_padding: ...

  4. 【BZOJ 1103】 [POI2007]大都市meg

    Description 在经济全球化浪潮的影响下,习惯于漫步在清晨的乡间小路的邮递员Blue Mary也开始骑着摩托车传递邮件了.不过,她经常回忆起以前在乡间漫步的情景.昔日,乡下有依次编号为1..n ...

  5. office2010 office2013打开个别PPT时需要修复的解决方法

    写在前面的废话(请直接查看正文部分):一次意外之后,需要重装Microsoft office,于是屁颠屁颠就重装了一次MS office 2013,装好后发现,打开个别ppt/pptx时打不开,提示修 ...

  6. oracle新建用户

    说明:以下命令在PLSQL中运行 一.以管理员身份登录PLSQL scott/root as sysdba 二.创建新用户 create user extjsTest1 identified by r ...

  7. [转载]再次谈谈easyui datagrid 的数据加载

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  8. C#跳出循环的几种方法的区别

    break是循环结束执行,执行循环体后面的代码. continue是跳过本次循环未执行的代码,继续执行下一次循环. goto是跳到指定的指令去,你指哪,他跳到哪. return是函数返回,如果循环在M ...

  9. spoj 416

    又臭又长的烂代码 ...... #include <iostream> #include <cstdio> #include <cstring> #include ...

  10. kafka.utils.Utils阅读

    这个类实现了一些工具性质的方法,正如其名. 记下自己觉得有意思的方法: readFileAsString(path: String, charset: Charset = Charset.defaul ...