hello,我是沐晴，最近呢，来总结一下 JS中的常用的事件，希望我们都能一起查漏补缺。

焦点事件

焦点事件在表单中经常用到，那什么是焦点呢？比如我们文本框里面的有光标的时候，就是获得了焦点，我们就可以输入内容了，选择某个单选框的时候，其实都是获取了焦点，如果一个元素有焦点的话，它就可以接收用户的输入。
      所以不是所有元素都能接收焦点 能够响应用户操作的元素才有焦点，比如文本框，单选框，a链接也具有，链接获得焦点会跳转页面，div元素没有焦点。这一点是需要注意的。

那么我们来看两个常用的事件：

获取焦点事件onfocus ：获取焦点的时候触发

失去焦点事件 onblur：失去焦点的时候触发

例子：我们一定见过这样的需求，假设有一个搜索框，未输入内容时，显示提示文字：“请输入内容”，当点击输入框要输入时，提示文字消失，当没有输入内容鼠标离开了文本框，又会重新显示提示内容。

obj.onfocus = function(){
    if(this.value == "请输入内容"){
        this.value = "";
    }
}
obj.onblur = function(){
    if(this.value == ""){
        this.value = "请输入内容";
    }
}

很简单的需求，看代码应该都能看懂，注意判断条件。OK，那么来看下一个需求。

我们肯定见过这样的效果，打开百度啥也没做，发现光标（焦点）就在搜索框内。这个是怎么做到的呢？

其实就是用到方法focus();这个方法可以给指定元素设置焦点，所以我们只需在页面一打开，就调用这个方法就可以了。来看看其他的方法：
obj.focus() 给指定元素设置焦点
obj.blur() 取消指定元素的的焦点

obj.select() 这个方法是选中指定元素里面的文本内容

比如我们想实现点击按钮 把某个文本框内容全部选中，这样就方便赋值了，就可以用这个方法（不过只能选中用户输入的内容 即可交互性的内容）

接下来要看的是一个重要的知识点，我们经常需要用到：事件对象

什么是事件对象呢？其实是当一个事件发送的时候，和当前这个对象发生的这个事件有关的一些详细信息都会被临时保存到event对象，供我们需要的时候调用。event对象就是事件对象

而且我们需要注意的是：event对象，必须在一个事件调用的函数里用，才是有内容的。也就是说在 被绑定在事件上的函数里面调用。

对于事件对象，最重要的一点是兼容问题，在不同浏览器表现不一样，如下：

1  ie/chrome:event是一个内置全局对象，但chrome未初始化，值为undefined,ie为null。
2  ff等标准下浏览器：事件对象是通过事件函数的第一个参数传入。（这里需要注意的是标准下的ie和chrome是既有内置全局对象，同时也具有一个参数是事件对象的特性。非标准下的就只有第一个特性。） 那第一个参数是什么意思呢，如下：

obj.onclick = function(ev){
   //这里的ev是一个参数，就代表事件对象，参数名可以随便写。
}

所以，我们需要做一个兼容的处理。其实也很简单，如下：

obj.onclick = function(ev){
    var ev = ev || event ;
}

oK，下面我们来看一下事件捕获：（事件冒泡就不具体讲了，不了解的可以看之前写的浅谈事件冒泡很详细）

要学习事件捕获，首先我们需要了解事件的第二种绑定形式，因为在第二种绑定形式中，才存在事件捕获。

事件的第一种绑定事件呢，就是我们常用的那种了直接把函数添加到事件上，不过既然有第二种，那第一种肯定是存在某种问题的，比如当我们想要一个事件添加多个函数的时候，问题就出现了，如下

// 绑定事件的第一种方式
// 假设有两个函数fn1,fn2
obj.onclick = fn1; //
obj.onclick = fn2; // 会覆盖上面的函数
取消绑定就是：obj.onclick = null;
 

所以事件第一种形式，无法给一种事件绑定多个函数，于是乎就出现了第二种形式，可以做到这一点。不过在不同浏览器下，也存在兼容问题。

首先在 IE下的方法：obj.attachEvent(事件名称,事件函数)  比如：

obj.attachEvent('onclick',fn1);
obj.attachEvent('onclick',fn2 );

fn1(){
  alert(this); //window
}
fn2(){
  alert(1 );
}

// 标准 IE下弹出： window   1
// 非标准 IE下弹出：1     window

这样就给同一个事件绑定了多个函数，且不会相互覆盖。

but由上 我们需要注意几点：

1 在非标准IE下是没有事件捕获的，也就是说这个方法绑定函数，不存在事件捕获

2 事件名称是带on的

3 事件执行的顺序  标准IE下正序，在非标准IE下反序

4 函数里this指向 window（这一点如何解决，请参考以前得到博客 JS的this指向，再继续阅读下面的）

相对应的取消事件： obj.dettachEvent(事件名称,事件函数)

接下来看标准浏览器下：obj.addEventListener(事件名称,事件函数,是否捕获)；（第三个参数默认是false ：代表冒泡　true:代表捕获）,（需要注意的是标准IE也有这个方法，也就是说标准IE下，这个方法和上面那个方法，它都具有）具体用法如下：

obj.addEventListener('click ',fn1,false);
obj.addEventListener('click ',fn2,false);
fn1(){
  alert(this); // obj
}
fn2(){ 

  alert(1);
}

//点击obj 弹出顺序： obj ，1

由上我们可以知道标准下：

1有事件捕获  2  事件名称无on     3 事件指向顺序是正序。 4  this指向触发事件的对象

事件绑定取消： obj.removeEventListener(事件名称,事件函数,是否捕获), 传入的参数和绑定事件传入的参数要保持一致

既然有两种我们就需要做兼容处理了，我们来封装一个函数：大家可以参考下.

function bind(obj,evname,fn){
    if(obj.addEventListener){
          obj.addEventListener(evname,fn,false);
    }else{
        obj.attachEvent('on'+evname,fnction(){
               fn.call(obj);  //解决IEthis指向
        });
    }
}

现在具体来看看事件捕获，事件捕获和事件冒泡恰好相反，冒泡是向外面一层一层的冒出去，而捕获是向内，监听的向内的事件。

其实事件传递过程，就相当于我们学的力的相互作用力，比如练武功的时候，拍砖头，首先我们的力由外界传入到打的那个砖头，接着力又会从砖头传入到我们手上，接着我们手就疼了。事件传递过程也是这样，当我点击一个div,首先由父级一直传到这个div，这是捕获阶段，然后又从div层层反弹到父级，这就是冒泡阶段。

首先我们来下面的一个栗子

oDiv1.addEventListener('click', function() {
         alert(1);
  }, false);

 // false,冒泡阶段发生，就是告诉div1，如果有一个冒泡出去的事件触发了你，你就弹出1

 oDiv1.addEventListener('click', function() {
    alert(3);
 }, true);
 // true,捕获阶段发送，告诉div1，如果有一个传递进去的事件触发了你，你就弹出3

oDiv3.addEventListener('click', function() {
    alert(2);
}, false);

// false,冒泡阶段发生，就是告诉div3，如果有一个冒泡出去的事件触发了你，你就弹出2

/*
那么根据我们上面说的，当我们点击div3这个事件发生过程是怎么样的呢？
   1 首先会发生事件捕获阶段，由外向内传递事件一直到div3, 捕获阶段顺序是 div1，div2，div3。这个时候我们上面已经给div1的捕获事件绑定了函数，所以弹出了3 

   2 接着是冒泡阶段了，由div3一直向外传递 ，所以冒泡阶段顺序是：div3 ,div2,div1。由于我们在上面对div1,和div3的冒泡阶段都绑定了函数，所以会弹出 2 ，1

   所以弹出顺序是：3，2，1，和绑定顺序是不同的，不过大部分情况下，默认是冒泡了。

 需要注意的是，其实我们每次触发事件，都有这么个过程，之所以没体现出来，只是因为默认情况下是都是冒泡，捕获一般设置了才会体现出捕获。

*/ 
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</body>

键盘事件（能够接收焦点的元素才能接收键盘事件）

1 onkeydown 键盘按下就会发生。如果按下不抬起会连续触发。
2 onkeyup 键盘抬起。

我们在做项目的时候，经常有需求，当用户点击了某个键可以操作某个功能。这个时候我们怎么知道用户操作的是哪个键呢？

在事件对象event下有个属性ketCode可以知道。每个键都有属于的自己的键值，被保存在event.keyCode中。

event.keyCode: 是一个数字类型的，保存了用户按下的键值，相同功能的键保存的值一样

例子：键盘控制Div移动 停顿问题：定时器其他属性

 有几个特别的键： ctrlKey,shiftKey,altKey 是 布尔值
  当一个事件发生的时候，如果ctrl || shift || alt 是按下的状态，返回true，否则返回false

 如果要实现ctrl+回车 提交 可以做这样的判断：（event.keyCode==13&&event.ctrlKey）

最后一个知识点：事件的默认事件（浏览器自带的行为，比如我们在浏览器中点击右键会弹出菜单，这就是默认行为）

有些时候我们是不想有这种默认行为，比如点击右键不想弹出浏览器自带的菜单 ,想弹出自定义的菜单，那么怎么取消默认的事件呢？

首先我们先找到这个事件是什么，document.oncontextmenu = function(){}，这个就是触发菜单的事件，当用户在页面点击右键菜单（环境菜单）的时候触发，我们只需要在里面加上renturn false,就阻止了这个事件的发生。如下，再点击右键就不会弹出浏览器的菜单了。

document.oncontextmenu = function(){
     return false;
}

不过其实阻止默认菜单是有兼容性问题的， IE和标准浏览下不同，如下：

// 非IE的浏览器 ：e.preventDefault();
//  IE  ：return false;

 // 封装成函数。网上常见的

//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.preventDefault ) {
         e.preventDefault();    // 非IE的浏览器 ：
 }else{
      window.event.returnValue = false;      //IE
       return false;
}

今天的分享就到这里，希望能给大家带来点有用的东西，我是沐晴，喜欢就点个赞吧。如有问题，欢迎指正，请不要点反对，拜托指出错误，才能一起进步。

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

  1. 第三天：JS事件详解-事件流

    学习来源: F:\新建文件夹 (2)\HTML5开发\HTML5开发\04.JavaScript基础\6.JavaScript事件详解 学习内容:  1)基础概念 2)举例说明: 代码如上,如果用事件 ...

  2. js 事件详解 冒泡

    起因:正常情况下我点击s2时是先弹出我是children,再弹出我是father,但是却出现了先弹出我是father,后弹出我是children的情况,这种情况是在和安卓app交互的h5页面中出现的, ...

  3. Js 事件详解

    1.事件流 1.1 事件流 描述的是在页面中接受事件的顺序 1.2 事件冒泡 由最具体的元素接收,然后逐级向上传播最不具体的元素的节点(文档) 1.3 事件捕获 最不具体的节点先接收事件,而最具体的节 ...

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

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

  5. js keyup、keypress和keydown事件 详解

    js keyup.keypress和keydown事件  详解 js keyup.keypress和keydown事件都是有关于键盘的事件 当一个按键被pressed 或released在每一个现代浏 ...

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

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

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

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

  8. 单选框radio改变事件详解（用的jquery的radio的change事件）

    单选框radio改变事件详解(用的jquery的radio的change事件) 一.总结 1.用的jquery的radio的change事件:当元素的值发生改变时,会发生 change 事件,radi ...

  9. DOM——事件详解

    事件 事件:触发-响应机制 事件三要素 事件源:触发(被)事件的元素 事件名称: click 点击事件 事件处理程序:事件触发后要执行的代码(函数形式) 事件的基本使用  var box = docu ...

随机推荐

  1. cacti监控mysql

    cacti监控mysql 2013-09-25 16:21:43 分类: LINUX 原文地址:cacti监控mysql 作者:baochenggood cacti监控mysql 1 下载cacti监 ...

  2. docker-7 docker在阿里云的使用

    在传统模式中,开发团队在开发环境中完成软件开发,自己做了一遍单元测试, 测试通过,ᨀ交到代码版本管理库.运维把应用部署到测 试环境, QA 进行测试,没问题后通知部署人员发布到生产环境. 在上述过程中 ...

  3. [转载]利用@media screen实现网页布局的自适应,@media screen and

    开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...

  4. 让CKEditor支持FLV视频播放

    平时都是做C/S开发,最近需要维护一个协会门户网站. 文章编辑使用CKEditor 3.3.2 + ckfinder 2.0的方案.可是这种方案居然不支持FLV视频播放,度娘说以前的老版本是支持的,这 ...

  5. monkeyrunner之夜神模拟器的安装与使用（二）

    在上一篇文章-安卓开发环境搭建中,我们创建并启动了eclipse自带的安卓模拟器,该模拟器不仅启动慢,而且在使用过程中的反应速度也是出奇的差,经常出现卡机现象.为了解决这种现象,因此,我们又寻找到了更 ...

  6. 解决docker容器中文乱码，修改docker容器编码格式

    前台上传文件到服务器后,服务器返回给前台的文件列表中出现中文乱码,所有的中文文件名全部变成?,英文文件名则正常显示. 问题经过定位,发现后台代码的multipartfile类在执行transterto ...

  7. 用PS设计等高线效果的背景图片

    有些简单的单网页,如果利用等高线效果的背景图片,再配合合适的背景色,能达到绚丽的效果.如下图所示: 本文就介绍该等高线效果的背景图片是如何制作的.Follow Me!!!! 1.新建文档,尺寸:100 ...

  8. iScroll4下表单元素聚焦及键盘的异常问题

    本文是zawa同事写的一篇博文,相信很多在webapp开发中的同学使用iscroll4会遇到的该问题,问过zawa兄的建议,在这里分享给大家,希望能帮助到各位~ 原文地址:http://www.zaw ...

  9. Java开发之文件上传

    文件上传有SmartUpload.Apache的Commons fileupload.我们今天介绍Commons fileupload的用法. 1.commons-fileupload-1.3.1.j ...

  10. 给深度学习入门者的Python快速教程 - numpy和Matplotlib篇

    始终无法有效把word排版好的粘贴过来,排版更佳版本请见知乎文章: https://zhuanlan.zhihu.com/p/24309547 实在搞不定博客园的排版,排版更佳的版本在: 给深度学习入 ...