js的基础知识与应用（六）

键盘的事件

onkeydown       当键盘按下时触发
onkeyup         当键盘抬起时触发
如何知道按下的是哪个按键？
每个按键都有编码。
oEvent.keyCode      获取键盘编码
a   65
b   66
c   67
1   49
2   50
回删      8
回车      13
shift       16
ctrl        17
alt         18
空格      32
del         46

←   37
↑   38
→   39
↓   40

js不能使用组合按键的编码。
oEvent.ctrlKey      当ctrl按下时是true
oEvent.shiftKey     当shift按下时是true
oEvent.altKey       当alt按下时是true

右键菜单事件:
oncontextmenu  (鼠标右键事件)
浏览器自带的一些功能是默认事件
阻止默认事件: return false;   
        只能输入数字的 输入框有问题 输入法的问题
注意：输入法的问题
输入框中只能输入字母:
复制文字:
另存为:

拖拽:

onmosuedown  当鼠标按下的时候
        存储一段小距离
onmousemove  当鼠标移动的时候
        改变 left top
onmouseup      当鼠标抬起的时候
        干掉 mousemove mouseup
拖拽快的时候出事了
            事件加给document
在拖拽的例子中ie8-下return false;不好使。

事件捕获 (没有官方的叫法。)

obj.setCapture();   
把所有的浏览器默认的事件都给抓住了。只能执行我当前这个元素的事件。
释放捕获
obj.releaseCapture();

事件绑定

作用：给同一个元素加同一个事件加多次。
    obj.addEventListener(sEv,fn,false);
    兼容：IE9+，chrome，firefox
    obj.attachEvent('on'+sEv,fn);
    兼容：IE10-
事件流: 浏览器中事件的走向。
    false 冒泡阶段  从下往上找相同事件
    true 捕获阶段 从上往下找相同事件
    只有addEventListener第三个参数为true时才会触发捕获
事件绑定兼容写法。
if(obj.addEventListener){
    obj.addEventListener(sEv,fn,false);
}else{
    obj.attachEvent('on'+sEv,fn);
}

解除事件绑定

obj.removeEventListener(sEv,fn,false);
    兼容：IE9+，chrome，firefox
obj.detachEvent('on'+sEv,fn);
    兼容：IE10-
解除事件绑定兼容写法。
if(obj.removeEventListener){
    obj.removeEventListener(sEv,fn,false);
}else{
    obj.detachEvent('on'+sEv,fn);
}
解除事件绑定，解除不了匿名函数
因为两个函数不想等
因为函数的真正写法是
new Function();
往后只要加事件就加上事件绑定

***** this的错误用法:

1.定时器中不能使用this
2.事件中套了一层函数
3.行间事件套了一层
4.attachEvent中不能使用this

DOM事件:

1.以DOM开头
2.只能使用事件绑定
window.onload               页面加载完毕
        加载：css，html，js，图片等
domReady                       DOM结构加载完毕以后
        doucment
        DOMContentLoaded   dom结构加载完毕以后  
                必须绑定添加
                只兼容高级浏览器（IE9，10，chrome，ff）
        IE下想兼容模拟一个：
        document.onreadystatechange     监控资源加载情况
            document.readyState         资源此时情况
            document.readyState=='complete' dom资源加载完毕
        (这个是模拟加载)

事件委托:子元素的事件可以委托给父级(父级只是相对的)

            委托：那事情交给别人
1.提高性能
2.给未来元素加事件

事件源:

oEvent.srcElement   兼容ie，chrome
oEvent.target       兼容高版本浏览器
兼容写法: var target=oEvent.srcElement||oEvent.target;
        target.tagName==Li   tagName 判断点击的元素是大写

移入移出事件的bug

onmouseover  
onmouseout    bug  移到子元素身上，也算移出了 

onmouseenter：    进入了
            解决onmosueover的bug
onmouseleave ： 离开了
            解决onmouseout的bug
            在IE10下:
            alert在里面移出2回  
                因为BOM浏览器对象模型的原因
            用console.log()1回