js中Event-事件详解

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

2.onfocus : 当元素获取到焦点的时候触发
HTML代码：
<input type="text" id="text1" value="请输入内容" />
<input type="button" value="全选" id="btn" />
JS代码：
var oText = document.getElementById('text1');
oText.onfocus = function() {
        
        if ( this.value == '请输入内容' ) {
            this.value = '';
        }
        
}

3.onblur : 当元素失去焦点的时候触发
oText.onblur = function() {
        
        if ( this.value == '' ) {
            this.value = '请输入内容';
        }
        
}

4.js方式实现焦点
①obj.focus() 给指定的元素设置焦点
②obj.blur() 取消指定元素的焦点
③obj.select() 选择指定元素里面的文本内容

oText.focus();//网页一出现对象焦点就已经出来了，很好的用户体验。
    
    var oBtn = document.getElementById('btn');
    
    oBtn.onclick = function() {
        
        oText.select();//可输入焦点对象里面的文本内容实现全选复制操作。
        
}

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

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

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

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

Event对象下的获取鼠标位置:clientX[Y] : 当一个事件发生的时候，鼠标到页面可视区的距离

兼容写法：Event对象的兼容：ev = ev || window.event

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

7.阻止事件冒泡
事件冒泡是有缺点的，因为他会触发父级的相同事件函数，但为什么不取消呢，肯定是有他的道理的。但我们也有阻止冒泡的一些方法。阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;
比如:
oBtn.onclick = function(ev) {
        var ev = ev || event;
        
        ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡
}

8.事件绑定的第二种形式
①给一个对象绑定一个事件处理函数的第一种形式
//obj.onclick = fn;
function fn1() {
    alert(this);
}
function fn2() {
    alert(2);
}

//document.onclick = fn1;
//document.onclick = fn2;    //会覆盖前面绑定fn1
②给一个元素绑定事件函数的第二种形式
ie：obj.attachEvent(事件名称，事件函数);
    1.没有捕获
    2.事件名称有on
    3.事件函数执行的顺序：标准ie-》正序   非标准ie-》倒序
    4.this指向window
/*document.attachEvent('onclick', function() {
    fn1.call(document);
});
document.attachEvent('onclick', fn2);*/
标准：obj.addEventListener(事件名称，事件函数，是否捕获);
    1.有捕获
    2.事件名称没有on
    3.事件执行的顺序是正序
    4.this触发该事件的对象
注意:是否捕获 : 默认是false    false:冒泡 true：捕获
/*document.addEventListener('click', fn1, false);
document.addEventListener('click', fn2, false);*/

兼容写法的封装函数:
function bind(obj, evname, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evname, fn, false);
    } else {
        obj.attachEvent('on' + evname, function() {
            fn.call(obj);//为了获取当前的对象。
        });
    }
}

测试上述的封装函数:
bind(document, 'click', fn1);
bind(document, 'click', fn2);

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

10.事件的捕获
事件 == 力(作用力与反作用力)true-->作用力(进来的力)false-->反作用力(出去的力)

11.事件函数的取消
①第一种事件绑定形式的取消
function fn1() {
    alert(1);
}
function fn2() {
    alert(2);
}

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

②第二种事件绑定形式的取消
ie : obj.detachEvent(事件名称，事件函数);
标准 : obj.removeEventListener(事件名称，事件函数，是否捕获);
document.detachEvent('onclick', fn1)
document.removeEventListener('click', fn1, false);

12.键盘的事件
onkeydown : 当键盘按键按下的时候触发
onkeyup : 当键盘按键抬起的时候触发

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

13.事件默认行为
事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情
怎么阻止？
当前这个行为是什么事件触发的，然后在这个事件的处理函数中使用return false;
document.onkeydown = function() {
    
    return false;
    
}

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

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

14.自定义右键菜单(WebQQ里面会用到右键菜单的开发，请注意。)
window.onload = function() {
    
    var oDiv = document.getElementById('div1');
    //oDiv是不能获得响应事件的，只能通过document来获取这个响应事件
    document.oncontextmenu = function(ev) {
        var ev = ev || event;
        
        oDiv.style.display = 'block';
        
        oDiv.style.left = ev.clientX + 'px';
        oDiv.style.top = ev.clientY + 'px';
        
        return false;
        
    }
    
    document.onclick = function() {
        oDiv.style.display = 'none';
    }
    
}

下一节陈明吕老师将带大家一起来了解一下事件的深入应用，我会做一些小案例来跟大家一起分享。