JS实例-事件对象2

鼠标滚轮滚动：

鼠标滚轮事件：
在页面滚动鼠标滚轮弹出1：
onmousewheel -> 当滚动鼠标的滚轮的时候
兼容：Chrome ,IE系

DOMMouseScroll DOM事件
必须通过事件绑定去添加
兼容：FF

处理兼容：
判断浏览器类型
UA

  if (window.navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
        // FF
        obj.addEventListener('DOMMouseScroll', wheel, false);
    } else {
        
        addEvent(obj,'mousewheel',wheel);
    }

滚轴滚动的方向 ？
获取更加详细的信息 -> oEvent

onmousewheel :
oEvent.wheelDelta
上 120 正数
下 -120 负数

DOMMouseScroll :
oEvent.detail
上 -3 负数
下 3 正数

阻止默认行为：
return false;
在 事件绑定addEventListener中return false失效了！~

用：oEvent.preventDefault();
兼容：高级浏览器
*** 用之前先判断

实时统计输入的文字：
onkeydown :
当按下键盘的时候文字的内容还没有到文本框中
onkeyup :
当抬起键盘的时候

oninput: 实时统计输入的文字
兼容：高级浏览器

onpropertychange
兼容：IE10-

兼容性：
a). 判断浏览器的类型
b). 事件的兼容性不需要处理，直接使用(事件连等)
IE9有问题：
变态方法：开定时器

---

window.onload 当页面加载完成的时候
页面加载完成
html css js 图片 flash..

domReady: DOM整个结构加载完成

DOMContentLoaded
DOM事件：必须通过事件绑定来添加
兼容：高级浏览器

onreadystatechange 监控资源加载的情况
document.readyState 资源的实时情况
complete: 完成

不属于domReady,只是模拟

兼容性：
obj.addEventListener

function domReady(fn) {
    if (document.addEventListener) {
        // 高级
        document.addEventListener('DOMContentLoaded',function(){
            fn && fn();
        },false);
    } else {
        // 低级 模拟domReady
        document.onreadystatechange = function() {
            if (document.readyState == 'complete') {
                fn && fn();
            }
        };
    }
}

事件委托：
子元素身上的事件可以给父级添加

委托：将事情给别人做

事件源：
更加详细的信息 -> oEvent

oEvent.target
兼容：高级浏览器
低级：undefined

oEvent.srcElement
兼容：Chrome,IE系
FF： undefined

兼容版：
var oSrc = oEvent.srcElement || oEvent.target;

变签名：tagName
返回的是大写的标签名

事件委托好处：
a).提高性能
b).可以给未来的元素添加事件