事件捕获冒泡绑定赋值委托兼容滚轮
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件捕获冒泡绑定赋值委托兼容滚轮相关的知识，希望对你有一定的参考价值。
clientX/Y 可视区的鼠标坐标 全兼容
offsetX/Y 鼠标坐标到物体边框的距离 IE+Chrome
pageX/Y 页面 高级 浏览器
screenX/Y 屏幕 全兼容(没用)
var e = evt || window.event;
evt作为参数兼容高级浏览器,window.event兼容低版本IE;(此处注意属性和变量eg:window.a和a,亲着是undefined,后者是is no difined)
添加事件的方法:
1 赋值的方法 ---document.onclick = function(){}; --->缺点:会覆盖;
取消事件的方法 document.onclick = null;
2 事件绑定------addEventListener(evname,fn,false)/attachEvent(‘on‘+evname,fn);
兼容高级浏览器(false代表冒泡,true代表捕获) 兼容低版本IE(IE事件流只有冒泡)
取消绑定的方法 removeEventListener(evname,fn,false)/detachEvent(‘on‘+evname,fn);
DOM事件必须用时间绑定添加;
注意事件绑定的函数,不能作为匿名函数,而是用函数名来取消绑定
3 事件委托 利用事件冒泡,给父级加事件--->优点:1简化重复的函数代码2给未来的元素加事件
给父级添加事件委托,this变为父级,要通过var oSrc=oEvent.srcElement||oEvent.target;来获取事件源,IE和Chrome兼容srcElement , Firefox Chrome兼容target;Chrome都行
setCapture(),将所有的事件归集捕获给obj
releaseCapture()
取消事件冒泡的方法:
evt.stopPropagation();//非IE
window.event.cancelBubble = true;//IE中
兼容写法: window.event ? window.event.cancelBubble = true : evt.stopPropagation();
取消默认事件的方法:
evt.preventDefault(); 非IE
window.event.returnValue = false;/return false IE
return false阻止默认事件，遇到addEventListener会失效
*用preventDefault解决
ready事件
高级浏览器:
document.addEventListener(‘DOMContentLoaded‘, function (){
alert(‘ready‘);
}, false);
低版本IE:(有interactive 和complete)
document.attachEvent(‘onreadystatechange‘, function (){
if(document.readyState==‘complete‘){
alert(‘ready‘);
}
ready 的兼容写法:
function addReady(fn){
if(document.addEventListener){
document.addEventListener(‘DOMContentLoaded‘, fn, false);
}else{
document.attachEvent(‘onreadystatechange‘, function (){
if(document.readyState==‘complete‘){
fn();
}
});
}
}
滚轮事件:
wheelDelta IE、Chrome
上 正
下 负
detail Firefox
上 负
下 正
//IE、Chrome
/*oDiv.onmousewheel=function (){
alert(‘a‘);
};*/
//FireFox——DOMMouseScroll
oDiv.addEventListener(‘DOMMouseScroll‘, function (){
alert(‘a‘);
}, false); DOM事件必须用事件绑定
滚轮的兼容写法1
function wheel(ev){
var oEvent=ev||event;
var down;
if(oEvent.wheelDelta){
if(oEvent.wheelDelta<0){
down=true;
}else{
down=false;
}
}else{
if(oEvent.detail<0){
down=false;
}else{
down=true;
}
}
if(down){
alert(‘向下‘);
}else{
alert(‘向上‘);
}
}
if(window.navigator.userAgent.indexOf(‘Firefox‘)!=-1){
oDiv.addEventListener(‘DOMMouseScroll‘, wheel, false);
}else{
oDiv.onmousewheel=wheel;
}
}
//wheelDelta IE、Chrome
//上 正
//下 负
//detail Firefox
//上 负
//下 正
滚轮写法2 和3
function wheel(ev){
var oEvent=ev||event;
var down;
//down=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
down=(oEvent.wheelDelta||-oEvent.detail)<0;
if(down){
alert(‘向下‘);
}else{
alert(‘向上‘);
}
}
if(window.navigator.userAgent.indexOf(‘Firefox‘)!=-1){
oDiv.addEventListener(‘DOMMouseScroll‘, wheel, false);
}else{
oDiv.onmousewheel=wheel;
}
关于相等的问题 -->只有字符串是静态的,不可变的;
//alert(12==12);
//alert(‘abc‘==‘abc‘);
//alert([1,2,3]==[1,2,3]);
//alert(new Array(1,2,3)==new Array(1,2,3));
//[1,2,3] => new Array(1,2,3)
//alert(12==12);
//alert(‘abc‘==‘abc‘);
alert({a: 12, b: 5}=={a: 12, b: 5});
//{a: 12, b: 5} => new Object()
//alert(12==12);
//alert(‘abc‘==‘abc‘);
/*var arr=[1,2,3];
arr[1]=4;
alert(arr);*/
var str=‘abc‘;
str[1]=‘d‘;
alert(str);
只有字符串是静态的,不可变的;
//alert(function (){alert(‘abc‘)}==function (){alert(‘abc‘)});
alert(new Function("alert(‘abc‘)")==new Function("alert(‘abc‘)"));
/*var show=function (){
alert(‘abc‘);
};*/
//var show=new Function("alert(‘abc‘);");
//show();
以上是关于事件捕获冒泡绑定赋值委托兼容滚轮的主要内容，如果未能解决你的问题，请参考以下文章