鼠标滚轮滚动:
鼠标滚轮事件:
在页面滚动鼠标滚轮弹出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();
兼容:高级浏览器
*** 用之前先判断
<b>实时统计输入的文字:</b>
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();
}
};
}
}
<b>事件委托:</b>
子元素身上的事件可以给父级添加
委托:将事情给别人做
事件源:
更加详细的信息 -> oEvent
oEvent.target
兼容:高级浏览器
低级:undefined
oEvent.srcElement
兼容:Chrome,IE系
FF: undefined
兼容版:
var oSrc = oEvent.srcElement || oEvent.target;
变签名:tagName
返回的是大写的标签名
事件委托好处:
a).提高性能
b).可以给未来的元素添加事件
网友评论