一 .  焦点:使浏览器能够区分区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户的输入。

我们可以通过一些方式给元素设置焦点

1.点击 2.tab   3.js

不是所有元素都能够接受焦点的，能够响应用户操作的元素才有焦点（比如：输入框，可以响应用户的输入 按钮-可以响应用户的点击操作 a标签-可以响应用户的跳转等）

Obj.onfocus=function(){}  obj.onblur=function(){}  obj.focus();  obj.blur()

obj.select()------会把obj的内容全部选中  （选中的内容是可交互性的文本内容）

  1. <input type="text" id="txt">
  2. <button id="btn">选中文字</button>
  3. window.onload=function(){
  4.      var txt = document.getElementById('txt');
  5.      var btn = document.getElementById('btn');
  6.      btn.onclick = function () {
  7.           txt.select();
  8.      }
  9. }

二. event：事件对象，当一个对象发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定的地方event对象，供我们在需要的时候调用。

如果一个函数是被事件函数调用的，那么，这个函数定义的第一个参数就是事件对象（event）,它是一个内置的全局对象。

在使用的时候有浏览器兼容的问题     在标准的浏览器下 可以直接取到event 而在非标准的浏览下，是取不到的。    Var ev = ev || event;  ----解决了兼容性的问题。

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

三. clientX clientY ---当一个事件发生的时候，鼠标到页面可视区的距离

  1. 一个小小的列子  div跟随鼠标移动
  1. <!DOCTYPE html>
  2. <html ng-app = 'myApp'>
  3. <head>
  4.      <title></title>
  5.      <meta name="name" content="content" charset="utf-8">
  6.      <style type="text/css" media="screen">
  7.           div{width:100px;height: 100px;background-color: red;position: absolute;}
  8.      </style>
  9.      <script type="text/javascript">
  10.      window.onload = function () {
  11.           var oDiv = document.getElementById('div1');
  12.           document.onmousemove = function (ev) {
  13.                var ev = ev || event;
  14.                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  15.  
  16.                     oDiv.style.left = ev.clientX + 'px';
  17.                     oDiv.style.top = ev.clientY + scrollTop + 'px';
  18.  
  19.           }
  20.      }
  21.      </script>
  22. </head>
  23. <body>
  24. <div id="div1"></div>
  25. </body>
  26. </html>

四.事件流

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

  1. <style type="text/css" media="screen">
  2.           div{padding: 40px;}
  3.           #div1{background-color: red;}
  4.           #div2 {background-color: blue;}
  5.           #div3 {background-color: green;}
  6.      </style>
  7. <script type="text/javascript">
  8.      window.onload = function () {
  9.           var oDiv1 = document.getElementById('div1');
  10.           var oDiv2 = document.getElementById('div2');
  11.           var oDiv3 = document.getElementById('div3');
  12.  
  13.           function aa(){
  14.                alert(this.id);
  15.           }
  16.           oDiv1.onclick = aa;
  17.           oDiv2.onclick = aa;
  18.           oDiv3.onclick = aa;
  19.      }
  20.      </script>
  21. <div id="div1">
  22.      <div id="div2">
  23.           <div id="div3"></div>
  24.      </div>
  25. </div>

当点击div3的时候，会依次弹出div3 div2 div1,当点击div2的时候，会依次弹出div2 div1,这个就是冒泡机制，会依次向父级一直冒泡，直至window.

阻止冒泡：当前要阻止冒泡的事件函数中调用event.cancelBubble = true;或者 event.stopPropagation();

绑定事件：给一个对象的同一个事件绑定多个不同的函数

兼容性：ie：obj.attachEvent(事件名称，事件函数)

  1. 没有捕获
  2. 事件名称有on
  3. 事件函数执行的顺序：标准的ie下为---正序    非标准的ie下为---倒序
  4. This指向window

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

  1. 有捕获
  2. 事件名称没有on
  3. 事件执行的顺序是正序
  4. This指向触发改事件的对象 
    1.  window.onload = function () {
    2.           var oDiv1 = document.getElementById('div1');
    3.           function aa(){
    4.                alert(this);
    5.           }
    6.           function bb(){
    7.                alert(1);
    8.           }
    9. //          正常情况下，bb函数会覆盖aa函数，值弹出1.
    10. //          oDiv1.onclick = aa;
    11. //          oDiv1.onclick = bb;
    12. //          在ie下，函数都会执行，但是执行的顺序不一样
    13. //          oDiv1.attachEvent('onclick',aa);
    14. //          oDiv1.attachEvent('onclick',bb);
    15. //          在标准浏览器下，函数都会正序执行
    16.           oDiv1.addEventListener('click',aa,false);
    17.           oDiv1.addEventListener('click',bb,false);
    18.      }

    解决this的指向不同，利用call()方法，改变this的指向

  5. Call()方法，改变this的指向 call方法的第一个参数可以改变函数执行过程中的内部this的指向,call方法第二个参数开始就是原来函数的参数列表

    1. function fn1(a){
    2.       alert(this);
    3.  
    4.  }   　　function fn2(a,b){
    5.       alert(this);
    6.       alert(a+b);
    7.  }
    8.  //fn1();   //window   
    9. // fn1.call(1); //1
    10.  fn2.call(1,2,3)  //1  5
    11.  fn2.call(null,2,3) //window 5
  6. 兼容ie以及标准浏览器的事件绑定函数 
    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. 关键一句：在W3C（或支持事件捕获的）浏览器中，先发生捕获的过程，再发生冒泡的过程。

    1.   oDiv1.addEventListener('click',function(){
    2.                alert(1);
    3.           },true);          //捕获事件
    4.           oDiv1.addEventListener('click',function(){
    5.                alert(2);
    6.           },false);          //冒泡事件
    7.           oDiv3.addEventListener('click',function(){
    8.                alert(3);
    9.           },true);                 //捕获事件

    当点击div1的时候，会弹出1   2

    当点击div2的时候， 会弹出1    2

    当点击div3的时候   会弹出 1   3   2

    点击div1的时候，是捕获事件，会从最外层开始开始捕获事件，div1有2个事件，捕获时，弹出1，冒泡是弹出2.   所以会弹出1   2

    点击div2的时候，由于div2没有加事件，但是它默认的会执行捕获事件，从最外层开始，一直到div2  然后再向外层冒泡  所以会弹出  1   2

    点击div3的时候 是捕获事件，从最外层开始，一直到div3  ，然后再向外层冒泡  所以会弹出 1   3   2

  8. 取消事件绑定

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

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

js的event事件的更多相关文章

  1. 【js】event(事件对象)详解

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

  2. js的event事件对象汇总

    JavaScript事件对象是浏览器默认传入的,但是对于浏览器的兼容问题,我们需要对事件对象进行兼容.但是jQuery已经帮我们解决了所有兼容性的问题,并且给我们添加了很多有用的方法.已经是比较历史的 ...

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

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

  4. JavaScript -- 时光流逝（八）：js中的事件Event的使用

    JavaScript -- 知识点回顾篇(八):js中的事件Event的使用 事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. (1) onabort : onabort 事件会在图像 ...

  5. 通过js触发onPageView和event事件获取页面信息

    注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6814814715022148100/ 承接上一篇文档<js页面触发launch事件编写> pageVi ...

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

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

  7. JS(event事件)

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

  8. Event事件

    妙味课堂-Event事件 1.焦点:当一个元素有焦点的时候,那么他就可以接受用户的输入(不是所有元素都能接受焦点) 给元素设置焦点的方式: 1.点击 2.tab 3.js 2.(例子:输入框提示文字) ...

  9. 怎么理解js中的事件委托

    怎么理解js中的事件委托 时间 2015-01-15 00:59:59  SegmentFault 原文  http://segmentfault.com/blog/sunchengli/119000 ...

随机推荐

  1. ios app网址说明

    URLforBrowser = 'https://itunes.apple.com/cn/app/wan-huo-shi-shang-zhu-li-ren/id1077705***'; URLfori ...

  2. 【PAT_Basic日记】1004 成绩排名

    至今仍然存在问题,第一个测试点不过 #include <stdio.h> #include <stdlib.h> #include <string.h> typed ...

  3. 《深入理解Java函数式编程》系列文章

    Introduction 本系列文将帮助你理解Java函数式编程的用法.原理. 本文受启发于JavaOne 2016关于Lambda表达式的相关主题演讲Lambdas and Functional P ...

  4. php 启动过程 - sapi MSHUTDOWN 过程

    php 启动过程 - sapi MSHUTDOWN 过程 概述 当服务器关闭时, 会走到 sapi MSHUTDOWN 过程 注册过程 本次内容是在 php 启动过程 - sapi MINIT 过程 ...

  5. mongo数据库基础

    mongodb mongodb特性 分布式文件存储 介与关系数据库和非关系数据库之间 文件存储格式为BSON(一种JSON的扩展) BSON是对二进制格式的JSON的简称,BSON支持文档和数组的嵌套 ...

  6. 事件的preventDefault方法

    事件有一个preventDefault()方法,该方法可以用来取消事件的默认行为.许多事件都有默认执行的关联行为.例如,如果用户在文本字段中键入一个字符,则默认行为就是在文本字段中显示该字符.由于可以 ...

  7. python——面向对象进阶

    类的成员 类的成员可以分为三大类:字段.方法和属性 注:所有成员中,只有普通字段的内容保存对象中,即:根据此类创建了多少对象,在内存中就有多少个普通字段.而其他的成员,则都是保存在类中,即:无论对象的 ...

  8. 一个只有99行代码的JS流程框架（二）

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 张镇圳,腾讯Web前端高级工程师,对内部系统前端建设有多年经验,喜欢钻研捣鼓各种前端组件和框架. 导语 前面写 ...

  9. 各种 SVG 制作单选和多选框动画

    在线演示      源码下载

  10. 一个想法照进现实-《IT连》创业项目：创业时该不该用新手程序员

    前言: 距离上一篇文章,转眼已然一个多月了,这段时间没出来和大伙汇报创业的进度,怪我了. 最近又感冒了,已经一个多星期了,还在感冒中,不过感冒也不能偷懒了,每天都有大把的事情等着我解决~~~ 不过今天 ...