JS的事件(1)--焦点事件/event事件/事件流

1. 焦点事件

- 使浏览器能够区分用户输入的对象,当一个元素有焦点的时候，那么它就可以等待用户的输入

- 可以切换焦点的方法：1、点击；2、tab；3、javascript

- 注意：不是所有元素都有焦点，能响应用户操作的元素才有焦点（如div就没有焦点，a就有焦点）

//焦点事件的方法

(1) focus() // 元素获得焦点，例如百度网页刷新之后会立即在搜索框获取焦点

(2) blur() // 元素取消焦点

(3) select() // 选择指定文本里的内容，且只能选择能获取焦点的元素的内容

// 小练习：写一个placeholder的兼容函数，value为’请输入内容’，当获取焦点时清空，失去焦点时且为空时恢复

html部分

<!--焦点事件：模拟输入框的placeholder功能-->
<input type="text" value="请输入内容" id="input1">

js部分

//    焦点事件：模拟输入框的placeholder功能

    var oInput1 = document.getElementById("input1");
    oInput1.onfocus = function () {
        oInput1.value = "";
    };
    oInput1.onblur = function () {
      oInput1.value = "请输入内容";
    };
    //oInput1.select();

2. event事件

event:事件对象，当一个事件发生时，和当前这个对象发生的事件有关的一些信息都会被临时存储在一个指定的地方–event对象，供我们需要时调用

类似飞机的黑匣子–记录飞机飞行的状况信息以供需要的时候找到这些信息

事件对象必须在一个函数调用里面使用才有内容

函数是不是时间函数，不是定义时决定，是调用时决定

//event事件兼容问题

原因：event对象在ie和chrome里面是内置的全局变量，像window一样定义好的，弹出为空和未定义, 但是event在火狐里会报错：事件对象是通过事件函数的第一个参数–function fn1(ev){alert(ev)};（标准下的用法，在标准的ie和chrome也是有效）

解决方法：用兼容方式去写：ev = ev || event;

document.onclick = function () {
        var ev = ev || event;
        for(var attr in ev){
            console.log(attr +'='+ev[attr]);    //可以通过这句话在控制台打印出来event的内容
        }
    };

//点击document 时出现的属性，都包含在事件里面

小练习：鼠标拖着小方块在页面移动

//做一个div跟着鼠标移动的效果
    var oDiv1 = document.getElementById("div1");
    oDiv1.onmousedown = function (ev) {
        ev = ev || event;
        var oLeft = ev.clientX - oDiv1.offsetLeft;
        var oTop = ev.clientY - oDiv1.offsetTop;
        document.onmousemove = function (ev) {
            ev = ev|| event;
            oDiv1.style.left = ev.clientX - oLeft + "px";
            oDiv1.style.top = ev.clientY - oTop + "px";
        };
        document.onmouseup = function () {
            document.onmousemove = document.onmouseup = null;
        };
        return false;
    }

3.事件流

1. 事件冒泡

产生原因：和页面的HTML结构有关

原理是事件冒泡机制：当一个元素接收到事件时，会把它收到的所有信息都传递给父级，父级再传递给顶层

给一个元素绑定事件实际上是绑定事件所处理的函数–事件函数绑定，即使没写点击在你点击时onclick也会触发，但是他没有绑定任何函数那么就不会执行任何动作

事件冒泡是默认存在的

在事件函数中调用event.cancelBubble = true; 阻止冒泡//阻止当前对象的当前事件的冒泡，其他的事件冒泡不会阻止

//小练习：做一个下拉菜单，在点击时，让该菜单展示出来，点击页面的其他位置时，菜单隐藏

//html部分

<!--事件流：事件冒泡-->
<!--做一个下拉菜单，在点击时，让该菜单展示出来，点击页面的其他位置时，菜单隐藏-->
<input id="input2" type="button" value="下拉菜单">
<div id="div2"></div>

//js部分

//事件流
    //事件冒泡：做一个下拉菜单，在点击时，让该菜单展示出来，点击页面的其他位置时，菜单隐藏
    var oInput2 = document.querySelector("#input2");
    var oDiv2 = document.querySelector("#div2");
    oInput2.onclick = function (ev) {
        ev = ev || event;
        oDiv2.style.display = "block";
        ev.cancelBubble = true;
    };
    document.onclick = function () {
        oDiv2.style.display = "none";
    }

2. 事件捕获

事件捕获（只有标准下才有）

事件捕获的解释：例如在document上绑定两个点击事件函数会让后面的覆盖前面的（尤其多人一起做的项目），在一个大型项目中很可能出现一个元素需要绑定多个不同的函数为了能够给一个对象的同一个事件绑定多个不同的函数，加了一个元素绑定事件函数的第二种形式：

ie下：obj.attachEvent(事件名称,事件函数)；

1、没有捕获；2、事件名称有on；3、事件执行顺序倒序；4、this指向window

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

1、有捕获；2、事件名称没有on；3、事件执行是顺序；4、this指向该事件的对象

当定义了函数时，函数会有个call()方法：fn1()=fn1.call()，区别是用call()方法的第一个参数可以改变内部this的指向（null时为原本该指向的），后面的参数是正常的参数

默认是false，false：冒泡 true：捕获

//小练习：标准浏览器的事件监听

//事件捕获：标准浏览器的事件监听
    function bind(obj,evname,fn){
        if(obj.addEventListener){    //标准下
            obj.addEventListener(evname,fn,false)
        }else{obj.attachEvent('on'+evname,function(){
            fn.call(obj);})    //ie下
        }
    }
    bind(oDiv1,"click",function(){
        alert(this);
    })

小知识普及

1. 事件捕获（只有标准下）obj.addEventListener(事件名称,事件函数,是否捕获)，最后一个参数为true时会发现弹出顺序和之前相反了

2. 捕获只监视进入的事件触发时执行，而冒泡只监视出去的事件触发时执行