【前端学习笔记】深入学习Javascript:EVENT总结

焦点事件———————————————————————————————–

焦点 : 使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户的输入。
我们可以通过一些方式给元素设置焦点
1.点击
2.tab
3.js

不是所有元素都能够接收焦点的.能够响应用户操作的元素才有焦点

onfocus : 当元素获取到焦点的时候触发

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

obj.focus() 给指定的元素设置焦点
obj.blur() 取消指定元素的焦点
obj.select() 选择指定元素里面的文本内容 ,该元素必须是可交互性的元素

event对象————————————————————————————-

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

事件对象必须在一个事件调用的函数里面使用才有内容
事件函数：事件调用的函数，一个函数是不是事件函数，不在定义的决定，而是取决于这个调用的时候

兼容
ie/chrome : event是一个内置全局对象
标准下 : 事件对象是通过事件函数的第一个参数传入

ev = ev||event;

如果一个函数是被事件调用的那么，这个函数定义的第一个参数就是事件对象

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

事件冒泡机制——————————————————————————–

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

oDiv1.onclick = fn1;  //给**加事件，给元素加事件处理函数
    规范叫法是，事件函数绑定


    oDiv1.onclick = fn1;//告诉div1，如果他接收到了一个点击事件，那么他就去执行fn1

    oDiv2.onclick = fn1;

    oDiv3.onclick = fn1;

假设oDiv3包含oDiv2包含oDiv1时，oDiv3的事件会触发oDiv2的事件，oDiv2的事件会触发oDiv1的事件，这就是事件的冒泡。借助事件冒泡机制，我们可以通过只给父级元素的事件绑定函数，来给其子级处理事件，这样的好处之一是可以免去给每个子级事件绑定相同函数的繁琐。

当要避免自己事件触发父级事件，可以使用ev.cancelBubble=true;来阻止冒泡

阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;

事件绑定函数的两种方法————————————————————————

给一个对象绑定一个事件处理函数的第一种形式
obj.onclick = fn;

给一个对象的同一个事件绑定多个不同的函数
给一个元素绑定事件函数的第二种形式

ie：obj.attachEvent(事件名称，事件函数);
    1.没有捕获
    2.事件名称有on
    3.事件函数执行的顺序：标准ie->正序   非标准ie->倒序
    4.this指向window
标准：obj.addEventListener(事件名称，事件函数，是否捕获);
是否捕获 : 默认是false    false:冒泡 true：捕获
    1.有捕获
    2.事件名称没有on
    3.事件执行的顺序是正序
    4.this触发该事件的对象

如果给Obj分两次添加事件，那么以顺序最后的那个ev.cancelBubble的值为基准。

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

document.attachEvent('onclick', function() {
    fn1.call(document);//让fn1里的this指向document
    });

事件绑定函数的封装

function bind(obj, evname, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(evname, fn, false);
        } else {
            obj.attachEvent('on' + evname, function() {
                fn.call(obj);
            });
        }
    }

事件捕获机制————————————————————————————–
设 div3包div2包div1 则当点击div1时，div3先触发事件，然后是div2->div1。到达div1后，从div1发出出去的事件，顺序是div1->div2->div3。

addEventListener的捕获值参数

false:
告诉div1，如果有一个出去的事件触发了你，你就去执行fn1这个函数
oDiv1.addEventListener('click', fn1, false);

true:
告诉div1，如果有一个进去的事件触发了你，你就去执行fn1这个函数
oDiv1.addEventListener('click', fn1, true);

事件的触发顺序是从外到内，再从内到外。

设置ture和false的区别就是：
true:告知元素,由外向内的事件发生了，你该去做什么
false:由内向外的事件发生了，你该去做什么

例子(oDiv1 > oDiv2 > oDiv3)：

oDiv1.addEventListener('click', function() {
            alert(1);
         }, false);
         oDiv1.addEventListener('click', function() {
            alert(3);
         }, true);
         oDiv3.addEventListener('click', function() {
            alert(2);
         }, false);

     该事件流：
     外->内：oDiv1( alert(3) ) ->  oDiv2  ->  oDiv3
     内->外: oDiv3( alert(2) ) ->  oDiv2  ->  oDiv1( alert(1) )

     所以例子的弹出顺序是 3-2-1

取消事件绑定函数——————————————————————————–

第一种事件绑定形式的取消

function fn1() {
        alert(1);
    }
    function fn2() {
        alert(2);
    }

    document.onclick = fn1;
    document.onclick = null;    //取消

第二种事件绑定形式的取消

ie : obj.detachEvent(事件名称，事件函数);
标准 : obj.removeEventListener(事件名称，事件函数，是否捕获);

document.attachEvent('onclick', fn1);
    document.attachEvent('onclick', fn2);
    document.detachEvent('onclick', fn1);

    document.addEventListener('click', fn1, false);//1
    document.addEventListener('click', fn1, true);//2
    document.addEventListener('click', fn2, false);//3

    document.removeEventListener('click', fn1, false);//只会移除事件绑定1

键盘事件—————————————————————————————–

onkeydown : 当键盘按键按下的时候触发
onkeyup : 当键盘按键抬起的时候触发

event.keyCode : 数字类型 键盘按键的值 键值
ctrlKey,shiftKey,altKey 布尔值
当一个事件发生的时候，如果ctrl || shift || alt 是按下的状态，返回true，否则返回false

不是所有元素都能够接收键盘事件，能够响应用户输入的元素，能够接收焦点的元素就能够接收键盘事件

onkeydown : 如果按下不抬起，那么会连续触发

事件默认行为————————————————————————————-

事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情
怎么阻止？
当前这个行为是什么事件触发的，然后在这个事件的处理函数最后使用return false;

例如：

document.onkeydown = function() {

            return false;

        }

        //oncontextmenu : 右键菜单事件，当右键菜单（环境菜单）显示出来的时候触发

        document.oncontextmenu = function() {

            //alert(1)

            return false;

        }

滚轮事件—————————————————————————————

ie/chrome : onmousewheel
    滚动参数：event.wheelDelta
        上：120
        下：-120

firefox : DOMMouseScroll 必须用addEventListener
    滚动参数event.detail
        上：-3
        下：3
所以用滚动参数判断鼠标滚轮正在上滚还是下滚

if (ev.wheelDelta) {
    b = ev.wheelDelta > 0 ? true : false;
} else {
    b = ev.detail < 0 ? true : false;
}

这样就可以统一不同浏览器下 上：b=true 下：b=false

处理和浏览器默认滚轮事件的冲突：

if (ev.preventDefault) {
    ev.preventDefault();
}else{
    return false;
}

return false阻止的是  obj.on事件名称=fn 所触发的默认行为
addEventListener绑定的事件需要通过event下面的preventDefault();
而ie下的attachEvent();也使用return false来阻止