雨夜带刀's Blog

事件触发器

事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQuery的ajax框架的一些自定义事件就必须由事件触发器来实现。当然,在一些特殊情况下,用事件触发器来触发事件比用户的实际操作来触发事件更方便。

对于实现事件触发器,浏览器都有原生的方法来支持,但是在兼容性上又有很大的出入,这种兼容性的问题完全在意料之中,IE有自己的方法,其他标准浏览器也有一套方法,不说谁的方法好与不好,对于WEB开发者来说搞出几套方法就是对开发人员的一种折磨。IE支持fireEvent方法来实现事件触发,标准浏览器支持dispatchEvent来实现事件触发,两面派的IE9是两者都支持。下面是出自prototype.js的源码(其实我是从司徒正美的博客复制过来的):

var fireEvent = function fireEvent(element,event){
	if (document.createEventObject){
		// IE浏览器支持fireEvent方法
		var evt = document.createEventObject();
		return element.fireEvent('on'+event,evt)
	}
	else{
		// 其他标准浏览器使用dispatchEvent方法
		var evt = document.createEvent( 'HTMLEvents' );
		// initEvent接受3个参数:
		// 事件类型,是否冒泡,是否阻止浏览器的默认行为
		evt.initEvent(event, true, true);  
		return !element.dispatchEvent(evt);
	}
};

CSS颜色值转换

CSS的颜色值有3种表示方式,为十六进制、RGB、颜色名称,用代码表示分别为:

color : #345456;
color : rgb(255,152,10);
color : red;

平时在编写CSS代码时,在设置颜色值时使用的最多的方式是十六进制。如果要对颜色值进行计算,就必须将十六进制的颜色值转换成RGB模式。那么如何进行转换呢?

别急,先来看看十六进制的颜色值和RGB颜色值之间的对应关系。比如上面的十六进制的颜色值:#345456,其中的前2位“34”对应R,中间2位“54”对应G,最后2位“56”对应B,有了这个对应关系那么剩下的就是进制转换的事了。

getStyle的优化

<p>之前我写过一篇关于<a href="http://stylechen.com/getstyle.html">获取元素计算的样式</a>的文章,后来在使用发现中还有一些没想到的兼容问题,今天我对原来的代码进行了优化,并对一些常见的兼容问题进行了处理。</p>
<p>在javascript中“-”(中划线或连字符)代表的是减号,而在CSS中,许多样式属性都有这个符号,如:padding-left、font-size等,所以在javascript中如果出现如下的代码就一个错误:</p>
<pre class="brush: c-sharp">
elem.style.margin-left = '20px';
</pre>
<p>正确的写法应该是:</p>
<pre class="brush: c-sharp">
elem.style.marginLeft = '20px';
</pre>
<p>这里需要把CSS的中划线去掉并把原来紧跟在中划线后的字母大写,俗称“驼峰式”写法,不管是使用javascript设置或是获取元素的CSS样式都应该是驼峰式的写法。但是不少对CSS熟悉而又对javascript不太熟悉的新手朋友总是会犯这种低级错误,使用replace的高级用法可以很简单的将CSS属性中的中划线替换成驼峰式的写法。</p>
<pre class="brush: c-sharp">
var newProp = prop.replace( /\-(\w)/g, function( $, $1 ){
return $1.toUpperCase();
});
</pre>

replace的妙用

最近在看司徒正美的ajax框架代码的时候发现一段有意思的代码:

"get post".replace( dom.rword, function(method){
	dom[ method ] = function( url, data, callback, type ) {
		if ( dom.isFunction(data) ) {
			type = type || callback;
			callback = data;
			data = undefined;
		}
		return dom.ajax({
			type: method,
			url: url,
			data: data,
			success: callback,
			dataType: type
		});
	};
});

javascript弹出层组件easyDialog v2.0

easyDialog在经过一段时间的使用后,对使用中碰到的一些问题进行了总结,最近花了点时间对原来的代码进行了重构和优化,并加入了一些新功能。原来的版本只是为了实现简单的弹出层的基本功能,从项目的角度来说就是如何能快速的完成项目,而这个版本不仅仅是实现基本的功能,更多的考虑了弹出层如何更好更轻松的应用于项目中。

easyDialog v2.0新增的功能:

1. 增加了默认的弹出层内容模板,如果只是一些简单的应用,自己可以不去写弹出层内容的结构,而只需传几个简单的参数即可,原来的使用方法:

easyDialog.open({
  container : 'demoBox'
});

使用默认的内容模板,那么container参数可以这么用:

easyDialog.open({
  container : {
    header : '弹出层标题',
    content : '欢迎使用easyDialog : )',
	yesFn : btnFn,
    noFn : true
  }
});
头像

雨夜带刀

主要折腾前端
现居北京

第 12 页,共 18 页« 最新...1011121314...最旧 »