整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript 关于事件兼容写法汇总

JavaScript 关于事件兼容写法汇总

avascript添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)

添加事件

var addEvent=function( obj, type, fn ) {
    if (obj.addEventListener)
    obj.addEventListener( type, fn, false );
    else if (obj.attachEvent) {
    obj["e"+type+fn]=fn;
    obj.attachEvent( "on"+type, function() {
    obj["e"+type+fn].call(obj, window.event);
    } );
    }
};

使用方法:

window.onload=function(){
var it=document.getElementsByTagName("input")[0];
addEvent(it,'click',f1);
}

移除事件

var removeEvent=function( obj, type, fn ) {
    if (obj.removeEventListener)
    obj.removeEventListener( type, fn, false );
    else if (obj.detachEvent) {
    obj.detachEvent( "on" +type, obj["e"+type+fn] );
    obj["e"+type+fn]=null;
    }
};

阻止事件(包括冒泡和默认行为)

var stopEvent=function(e){
    e=e || window.event;
    if(e.preventDefault) {
    e.preventDefault();
    e.stopPropagation();
    }else{
    e.returnValue=false;
    e.cancelBubble=true;
    }
},

仅阻止事件冒泡

var stopPropagation=function(e) {
    e=e || window.event;
    if (!+"\v1″) {
    e.cancelBubble=true; //否则,我们得使用IE的方法来取消事件冒泡
    } else {
    e.stopPropagation(); //因此它支持W3C的stopPropation()方法
    }
}

!+"\v1″的理解:

其实就是利用各浏览器对转义字符"\v"的理解

在ie浏览器中,"\v"没有转义,得到的结果为"v"

而在其他浏览器中"\v"表示一个垂直制表符(一定程度上相当于空格)

仅阻止浏览器默认行为

var preventDefault=function(e) {
    e=e || window.event;
    if(e.preventDefault) {
    e.preventDefault();
    }else{
    e.returnValue=false;
    }
}

取得事件源对象

var getEventTarget=function(e){
    e=e || window.event;
    var target=event.srcElement ? event.srcElement : event.target;
    return target;
}

附:绑定onpropertychange事件

onpropertychange, 它在一个元素的属性发生变化的时候触发, 一般用在表单元素中捕获其value值改变, 它比onchange事件更实时捕获它的改变,

不过为微软私有事件。FF大致和它相似的有oninput事件, 不过它只针对textfield与textarea的value属性。

safari, firefox, chrome与opera都支持此事件。

多人都说HTML是一门很简单的语言,看看书,看看视频就能读懂。但是,如果你完全没有接触过,就想通过看一遍教程,背背标签,想要完全了解HTML,真的有点太天真了。

HTML中文“超文本标记语言”,英文名叫HTML没有变量,没有循环,没有函数,只是单纯的一门静态语言而已。你可以用来描述静态的东西,比如标题、段落、图片。

1)HTML通常被称为静态网页

2)HTML的一些标签代码规则将内容呈现在浏览器中所需的风格。

3)HTML可以使用记事本创建,并以.html为扩展名保存。

打开浏览器,例如打开百度的首页

这个页面非常的简洁,但是包含了很多内容,有文字、图片、动画、超链接等一系列HTML页面所能够包含的元素。什么意思,也就是说,HTML页面就是能够包含文本、图像、声音、超链接等内容的集合,然后通过浏览器对这些元素进行渲染,就呈现出多彩的页面。

打开页面的审查元素(快捷键是【F12】),就能够看到构成HTML页面的所有元素,当我们在写页面,对页面进行调试的时候,也是通过审查元素,在这个窗口里面检测问题,所以审查的方法一定要掌握。


一个HTML页面最基本框架。

优点

易于使用,松散的语法(虽然,过于灵活的将不符合标准),HTML还允许使用模板,这使设计网页变得容易、对Web设计领域的初学者来说非常有用。几乎所有浏览器都支持该功能。被广泛使用的; 建立在几乎所有网站上。与XML语法非常相似,后者已越来越多地用于数据存储。免费-无需购买任何软件,即使对于新手程序员而言,都易于学习和编码。

缺点

由于它是一种静态语言,它不能单独产生动态输出。有时,HTML文档的结构难以掌握。程序错误可能会导致高昂的代价。它只能创建静态页面和普通页面,因此如果我们需要动态页面,则HTML无效。需要编写大量代码来制作简单的网页。您必须跟上已弃用的标记,并确保不要使用它们,因为出现了另一种与HTML兼容的语言代替了标记的原始工作。因此需要学习其他语言(大多数情况下是CSS)HTML提供的安全功能受到限制。

在了解这么多之后,一定想要自己写个HTML页面试试手,那么HTML页面怎么写呢,用什么工具来写呢?在电脑上建立一个hello.txt的文件,将下面的代码粘贴复制进去保存 。

然后将后缀名修改为.html,用浏览器在页面上看到hello world字样的输出,这就是第一个HTML页面

今天我们就先分享到这里啦,赶快去练练手吧~(私信我有免费IT课程可以领取哟)

什么会有浏览器兼容问题

浏览器兼容性问题,是指因为不同的浏览器标准不同对同一段代码的解析有差异或者是统一浏览器由于版本的不同,导致支持的特性不一样,造成页面显示效果不一致。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的页面,都应该是统一的效果,所以需要一些方法让他的页面显示效果一致。

部分兼容问题解决方案

问题一:不同浏览器的标签默认的内外边距不同

//解决方案: 
 *{margin:0;padding:0;}

问题二:图片默认有间距

解决方案:使用float属性为img布局(问题一中提到的通配符不起作用)

问题三:li之间有间距

解决方法:li设置vertical-align:middle

问题四:标签最低高度设置min-height不兼容

解决方案:设置一个标签的最小高度200px

p{min-height:200px; 
 height:auto !important; 
 height:200px; 
 overflow:visible;
} 

问题五:ie各个版本的hack

//类内部hack:
.header {_width:100px;} /* IE6专用*/
.header {*+width:100px;} /* IE7专用*/
.header {*width:100px;} /* IE6、IE7共用*/
.header {width:100px\0;} /* IE8、IE9共用*/
.header {width:100px\9;} /* IE6、IE7、IE8、IE9共用*/
.header {width:330px\9\0;} /* IE9专用*/

//选择器Hack:
*html .header{} /*IE6*/ 
*+html .header{} /*IE7*/ 

问题六:常见属性的兼容情况

  • inline-block: >=ie8min-width/min-height: >=ie8:before,:after: >=ie8div:hover: >=ie7inline-block: >=ie8background-size: >=ie9圆角: >=ie9阴影: >=ie9动画/渐变: >=ie10

问题七:clear float

.clearfix:after{
 content: '';
 display: block;
 clear: both;
}
.clearfix{
 *zoom: 1; /* 仅对ie67有效 */
} 

可能用到的技巧和工具

  • 条件注释

条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。

 <!--[if IE 6]>
 <p>You are using Internet Explorer 6.</p>
 <![endif]-->
 <!--[if !IE]><!-->
 <script>alert(1);</script>
 <!--<![endif]-->
 <!--[if IE 8]>
 <link href="ie8only.css" rel="stylesheet">
 <![endif]--> 
  • IE Hack

IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): <!--[if IE]>IE浏览器显示的内容 <![endif]-->,针对IE6及以下版本:<!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

  • js 能力检测

能力检测的目标不是识别特定的浏览器,而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何,只需确定浏览器是否支持特定的能力,就可以给出相关的方案。

 //特性检测
if (object.propertyInQuestion) {
 //使用object.propertyInQuestion
 }
  • html5shiv.js

浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题。

<!–[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> 
<[endif]–>
  • Respond.js

Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询兼容响应式布局

  • css reset

css reset重置样式,清除浏览器默认样式,并配置适合设计的基础样式(强调文本是否大多是粗体、主文字色,主链接色,主字体等)。reset 的目的,是将所有的浏览器的自带样式重置掉,这样更易于保持各浏览器渲染的一致性。例如 yui3 reset 中的一段:

ol, ul {list-style: none}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal}
  • normalize

Normalize.css 是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准;是在现代浏览器环境下对于CSS reset的替代。 它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的样式。 这是一个现代的,HTML5-ready 的 CSS 重置样式集。bootstrap就使用了它,github的地址为:https://github.com/necolas/normalize.css/, Normalize.css做了以下几件事:

  • 保护有用的浏览器默认样式而不是完全去掉它们一般化的样式:为大部分HTML元素提供修复浏览器自身的bug并保证各浏览器的一致性优化CSS可用性:用一些小技巧解释代码:用注释和详细的文档来Modernizr

Modernizr