javascript事件兼容处理以及时间冒牌、捕获
2017-12-18 16:08
399 查看
/cancelBubble阻止事件冒泡
function cancelBubble(ev){
var ev=ev||window.event;
if(ev.stopPropagation){
ev.stopPropagation();
}else{
ev.cancelBubble=true;
}
}
//获取样式
function getStyle(obj,attr){
if(getComputedStyle){
getComputedStyle(obj)[attr];
}else{
obj.currentStyle[attr];
}
}
//getClassName 通过类名获取元素
function getClassName(oclass,oparent){
var oparent=oparent||document;
var arr=[];
var element=oparent.getElementsByTagName('*');
var reg= new RegExp('\\b'+oClass+'\\b');
for(var i=0;i<element.length;i++){
if(reg.test(element.className)){
arr.push(element);
}
}
return arr;
}
//oEvent获取事件对象
function oEvent(ev){
var ev=ev||window.event;
return ev;
}
//addEvent事件绑定
function addEvent(obj,event,fn,bool){
if(obj.addEventListener){
obj.addEventListener(event,fn,bool);
}else{
obj.attachEvent('on'+event,function(){
fn.call(obj);
});
}
}
// removeEvent移除事件
function removeEvent(obj,event,fu,bool){
if(obj.removeEventListener){
obj.removeEventListener(event,fu,bool);
}else{
obj.detachEvent('on'+event,function(){
fu.call(obj);
});
}
}
//getStyle获取非行内样式
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}
//getScrollTop滚动条
//获取滚动条的TOP
function getScrollTop(){
var top=document.documentElement.scrollTop||document.body.scrollTop;
return top;
}
//stopDefault阻止默认时间
function stopDefault(ev){
var ev=ev||window.event;
if(ev.preventDefault){
ev.preventDefault();
}else{
ev.returnValue=false;
}
}javascript中的默认行为是指javascript中事件本身具有的属性,如<a>标签可以跳转,文本框 可输入文字、字母、图片等,右键浏览器会出现菜单等行为便被称为浏览器的默认行为。
阻止默认行为(兼容)阻止右键菜单
事件监听器(兼容)n target.addEventListener("click", fun, false); --标准浏览器n target.attachEvent("onclick",fun); --IE浏览器(执行顺序按照绑定的反序)n removeEventListene()/detachEvent() 移除事件绑定的参数和添加事件绑定是一致的。事件流描述的是从页面中接收事件的顺序。n 可以绑定多个函数在一个对象上。n 执行顺序按照绑定的顺序来(IE反向)。n 第三个参数是否使用捕捉(反向冒泡),默认false,为冒泡。
事件捕获n 从父元素向子元素,直至触发事件元素
function cancelBubble(ev){
var ev=ev||window.event;
if(ev.stopPropagation){
ev.stopPropagation();
}else{
ev.cancelBubble=true;
}
}
//获取样式
function getStyle(obj,attr){
if(getComputedStyle){
getComputedStyle(obj)[attr];
}else{
obj.currentStyle[attr];
}
}
//getClassName 通过类名获取元素
function getClassName(oclass,oparent){
var oparent=oparent||document;
var arr=[];
var element=oparent.getElementsByTagName('*');
var reg= new RegExp('\\b'+oClass+'\\b');
for(var i=0;i<element.length;i++){
if(reg.test(element.className)){
arr.push(element);
}
}
return arr;
}
//oEvent获取事件对象
function oEvent(ev){
var ev=ev||window.event;
return ev;
}
//addEvent事件绑定
function addEvent(obj,event,fn,bool){
if(obj.addEventListener){
obj.addEventListener(event,fn,bool);
}else{
obj.attachEvent('on'+event,function(){
fn.call(obj);
});
}
}
// removeEvent移除事件
function removeEvent(obj,event,fu,bool){
if(obj.removeEventListener){
obj.removeEventListener(event,fu,bool);
}else{
obj.detachEvent('on'+event,function(){
fu.call(obj);
});
}
}
//getStyle获取非行内样式
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}
//getScrollTop滚动条
//获取滚动条的TOP
function getScrollTop(){
var top=document.documentElement.scrollTop||document.body.scrollTop;
return top;
}
//stopDefault阻止默认时间
function stopDefault(ev){
var ev=ev||window.event;
if(ev.preventDefault){
ev.preventDefault();
}else{
ev.returnValue=false;
}
}javascript中的默认行为是指javascript中事件本身具有的属性,如<a>标签可以跳转,文本框 可输入文字、字母、图片等,右键浏览器会出现菜单等行为便被称为浏览器的默认行为。
阻止默认行为(兼容)阻止右键菜单
document.oncontextmenu = function(){alert("右键被按下");return false;} |
ev.preventDefault(); //非IEev.returnValue = false; //IE |
事件监听器(兼容)n target.addEventListener("click", fun, false); --标准浏览器n target.attachEvent("onclick",fun); --IE浏览器(执行顺序按照绑定的反序)n removeEventListene()/detachEvent() 移除事件绑定的参数和添加事件绑定是一致的。事件流描述的是从页面中接收事件的顺序。n 可以绑定多个函数在一个对象上。n 执行顺序按照绑定的顺序来(IE反向)。n 第三个参数是否使用捕捉(反向冒泡),默认false,为冒泡。
事件捕获n 从父元素向子元素,直至触发事件元素
相关文章推荐
- JavaScript XML 兼容处理,序列化和反序列化以及回调事件
- javascript浏览器兼容教程之事件处理
- JavaScript跨浏览器处理事件以及相关对象
- JavaScript中事件捕获和事件冒泡以及如何阻止冒泡事件和默认事件
- javascript处理事件的一些兼容写法
- Javascript中事件捕获、事件冒泡以及事件委托机制
- JavaScript对象内联函数的使用,对象内部方法和属性的使用,以及事件冒泡的处理方式
- 【转载】JavaScript处理事件的一些兼容写法
- 具有跨浏览器兼容的事件处理javascript脚本
- 常见的原生javascript事件处理与浏览器兼容问题(下)
- JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE
- SilverLight学习笔记--Silverligh之在Javascript中捕获和处理Silverlight控件事件
- javascript处理事件的一些兼容写法
- javascript事件处理机制---事件监听、捕获和冒泡
- JS事件绑定、冒泡/捕获、常见的兼容处理、委托、阻止默认行为和冒泡
- javascript时间冒泡和事件捕获
- JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE
- javascript兼容IE火狐addEvent方法,以及页面一加载事件
- JavaScript 遗漏知识再整理;错误处理,类型转换以及获取当前时间、年份、月份、日期;
- JS时间处理,获取天时分秒。以及浏览器出现的不兼容问题