JavaScript事件笔记

Author : lovecicy

事件流 事件冒泡 事件捕获 DOM事件流 事件处理 HTML事件处理 DOM 0级事件处理 DOM 2级事件处理 IE事件处理 事件对象 DOM事件对象 IE事件对象 一、事件流 事件流描述的是从页面中接收事件的顺序 1. 事件冒泡 IE的事件叫做事件冒泡,事件从最具体的元素开始,逐级向上传播。 当你点击页面中的div时,click事件会按下列顺序传播: 1. div 2. body 3. html 4. document 2. 事件捕获 网景团队提出的另一种事件流叫事件捕获,事件流的方向恰好与事件冒泡相反,同样的,当你点击上面的div时,事件捕获的顺序是: 1. document 2. html 3. body 4. div 3. DOM事件流 DOM 2级事件规定事件流包括3个阶段:事件捕获,处于目标和事件冒泡。在事件处理中,处于目标阶段被看做事件冒泡的一部分。 IE9、Opera、Firefox、Chrome和Safari都支持DOM事件流;IE8及更早版本不支持DOM事件流,即不支持事件捕获。 二、事件处理 响应事件的函数叫做事件处理函数或事件监听器。这一部分,我们来了解下事件[Read More]

standard

IE的文档可兼容性

Author : luckyGirl

对于前端兼容IE是个蛮头痛的事情,本文将介绍2种方式来定义IE下网页呈现的方式。 一、文档兼容性 IE每个主版本都会添加一些新功能,尤其是IE8比之前的旧版本相比更接近行业标准,导致针对旧版本浏览器设计的站点可能不会按预期显示,因此引入了文档兼容性的概念,从而允许指定站点所支持的IE版本。可通过使用<meta>将X-UA-Compatible标头添加,从而实现这一点。 如: <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ > IE8支持多种文档兼容性模式,启用不同功能将影响内容的显示方式: “IE=EmulateIE8″:IE使用<!DOCTYPE>指令确定如何呈现内容,如标准模式将以IE8标准模式显示,而Quirks模式指令将以IE5模式显示 “IE=EmulateIE7″:IE使用<!DOCTYPE>指令确定如何呈现内容,如标准模式将以IE7标准模式显示,而Quirks模[Read More]

standard

IE下margin:auto失效

Author : lovecicy

最近碰到一个问题,在IE8下,margin:auto失效了。在网上搜了下,发现好多人遇到这个问题。 但是,在MSDN的文档表明,IE6及之后的浏览器都支持此样式。那到底是什么原因会失效呢。 原来出问题的是<!DOCTYPE>。当没有指定<!DOCTYPE>时, IE会以怪癖模式来显示文档,即IE5.5的模式,因此margin:auto会失效。而其他高级浏览器则不会出现问题。 但是我看了下我的文档,发现是有定义<!DOCTYPE>的。只是在php中,多个文件include以后,在一个被include的文件顶部的注释被放到了<!DOCTYPE>之前,因此引起了这个问题,在把注释去掉之后,问题就解决了。 参考:http://www.lifelaf.com/blog/?p=97

standard

IE hack

Author : lovecicy

通过4个字符,实现对IE6、7、8的css hack: body {  color: red; /* all browsers, of course */  color : green\9; /* IE8 and below */  *color : yellow; /* IE7 and below */  _color : orange; /* IE6 */ } 当然,你无法保证下一个版本的Chrome或者火狐不会将 ‘*’ 和 ‘_’ 作为新的前缀使用,所以,要视需求决定是否使用这些hack。如果仅仅是为了在IE7下修改一两个属性,不妨用下面的方法: <!–[if lte IE 7]> Make IE7 happy. <![endif]–> 参考:nettuts+

standard

IE下的select和Date

Author : lovecicy

好久没发文章了,发一篇学习笔记吧。 一、select的问题 首先说个select的问题,如果要获取当前选中的select的option的index,可以用这个方法,对各个浏览器都有效: document.getElementById(‘select id’).selectedIndex 如果用jQuery,则是: $(‘#select id’).prop(‘selectedIndex’) 但是如果要获取当前选中的option的value,情况就就不一样了。如果在option里给每个option都设置了value值,那么在所有浏览器中,都可以这么拿: document.getElementById(‘select id’).value/$(‘#select id’).val() 而如果没有为option设置value值,则我们可能希望拿到当前选中的option的text,这时候用上面的方法,FF和chrome可以正常work,在IE下,jQuery的方式可以拿到value,通过原生的js就会拿到空字符串。 这时候针对IE,需要用下面这种方法: var select = document.[Read More]

standard

IE, FireFox, Chrome浏览器支持CSS实现Alpha半透明的方法

Author : lovecicy

在网站中, 使用半透明效果的场景很多,但是各个浏览器对于标准的支持又不一样,在网上搜索了一下,总结了下各个浏览器的实现方法。 使用下面的CSS代码,基本可以覆盖主流的浏览器: -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=30)”; /*IE8*/ filter:alpha(opacity=30); /*IE5、IE5.5、IE6、IE7*/ opacity: 0.3; /*Opera9.0+、Firefox1.5+、Safari、Chrome、IE9+*/ 现代浏览器都支持opacity属性,主要针对IE8及之前的IE浏览器。

standard

IE BUG相关文章集合

Author : lovecicy

虽然IE6是前端人员的噩梦,但是在中国,还是很多前端必须面对的一道坎,最近从小道消息看到说IE6在中国的市场份额已经跌到20%了,不知道是不是真事,希望IE6能加速在中国的下滑吧。 不止IE6,即使IE7 ,IE8都有很多不符合规范的地方和Bug,在这里转了一篇前端观察的关于IE Bug的集合,希望可以帮助遇到IE Bug的同学。 Haslayout IE Haslayout 详解 haslayout “HasLayout” Overview 你了解IE的haslayout(拥有布局)吗? 详说 IE hasLayout   Block formatting contexts Block formatting Block Formatting Contexts(块级格式化上下文) 详说 Block Formatting Contexts (块级格式化上下文)   IE bug The CSS Box Model css盒子模型(box model) margin加倍bug 3px bug 文字溢出bug(注释bug) IE下图片空隙BUG CSS背景图片重复加载BU[Read More]

standard

IE haslayout详解

Author : luckyGirl

要掌握好浏览器的兼容问题,IE无疑占据重要地位,虽然现在做的项目无需兼容IE6,但是IE6还是占据一定市场,做好IE6的兼容还是很有必要滴,在集合IE bug之前,首先了解一下IE的haslayout属性,许多IE的布局问题都是来源于它。   IE/Win的显示与其他浏览器不同的原因之一是,显示引擎使用一个称为布局(layout)的内部概念。 什么是layout? “Layout”是一个 Internet Explorer for Windows的私有概念,它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。 IE 显示引擎利用布局概念减少它的处理开销。在理想悄况下,所有元素都控制自己的尺寸和定位。但是,这会在IE中导致很大的性能问题。因此,IE/Win 开发团队决定只将布局应用于实际需要它的那些元素,这样就可以充分地减少性能开销。   拥有layout的定义 一个元素”得到 layout”,或者说一个元素”拥有 l[Read More]

standard

IE下js数组sort不可靠

Author : lovecicy

不知道有多少人用过javascript array的sort函数, 最近使用发现了IE下使用sort并不可靠,时常会爆出Number expected的错误,而且貌似没有固定的规律。 先来看看sort的用法: var arr = [ {“name”:”adf”,”id”:”123″}, {“name”:”bcs”,”id”:”234″}, {“name”:”zddf”,”id”:”345″}, {“name”:”dfsda”,”id”:”456″}, {“name”:”dfasdf”,”id”:”567″} ] v[Read More]

standard

清理浮动的几种方法以及对应规范说明

Author : lovecicy

原文:http://w3help.org/zh-cn/casestudies/001 作者:钱宝坤   前言 浮动 Floats 是 CSS 中的一种布局方式。它的渲染位置在行框与包含块之间,这样就可以使行框内文字与浮动元素不重叠并且环绕它显示。在布局过程中也经常会使用它来达到左右并排布局的效果。但是,由于浮动特性,容器如果没有明确设定高度,会依照普通流内元素高度设置,这样就会导致脱离普通流的浮动元素溢出容器,影响其后元素布局。 我们将现有已知的清楚浮动元素方法罗列下: 采用一个HTML标签,以及css的clear属性,来手工清理浮动; 采用伪类:after,动态建立一个块元素,设定 clear 属性,清理之前的浮动元素; 采用CSS overflow 非 visible 值(overflow:auto/overflow:hidden)设定使父容器包含浮动元素; 采用display:table/display:table-cell 等table系列属性将父元素变成 table 形式自动包含浮动元素; 使用 TABLE 以及 TD 标签作为浮动元素容器; 采用 float:le[Read More]

standard