刘春龙的博客

请使用非IE浏览器访问!

优米网内部JS教程。

上期讲了JS里面变量、函数、变量作用域等。 这次讲一下浏览器环境下的一些实用的知识

Event 事件

如何绑定事件

可以在HTML源代码中用DOM元素的属性直接声明。例如：

<input type="text" size="30" id="email" onchange="checkEmail()" >

也可以在JS里绑定，例如：

document.getElementById('email').onchange=function()
{
	checkEmail();
}

有什么区别呢？

先说一下JS里可以用new Function("inner code")来创建一个函数。即可以把字符串形式的源代码转换成可执行的code。 写到HTML源代码上的事件代码可以理解成事件属性的值被new Function()了。 所以onchange="return true;" 就相当于 dom.onchange=function(){ return true; }。

值得注意的是dom.onxxxx=function 的绑定方式是粗暴式的，后绑定的函数会覆盖掉前面绑定的函数。如果需要同一个事件绑定多个函数， 可以使用dom.addEventListener(w3c)和dom.attachEvent(IE)。(又是讨厌的IE与众不同!)

事件冒泡

DOM树的某个节点触发了一个事件，事件会沿着枝叶向根节点冒泡，会触发沿途的所有节点的对应事件！所以有以下效果：

事件冒泡大部分情况下不会带来太多的困扰。 但是下面的实例就会有很奇怪的表现： 我本来是想实现鼠标移入蓝色div里面触发一个事件，移出的时候触发另一个事件。但是由于事件冒泡，造成鼠标在蓝色div内部的各个元素上移入移出也触发了外层div（蓝色div）的事件。

解决这个问题的方法有很多，其中最方便的是jQuery封装实现的 mouseenter和mouseleave事件。另外也可以参考我写的实现函数，在这里。

另外，事件冒泡是可以用event.preventDefault()(w3c)和return false;(IE)等方式取消的。参考评论7楼。

正则表达式

什么是正则表达式? 有什么用?

JS里的正则

Javascript里的正则表达式是一个类似字符串的对象。可以直接写入code，例如: /^123$/.test('123');。 这点跟php有很大不同，php里的正则不是一个对象，而是作为字符串传入函数内部使用的，例如 preg_match("/^123/","123");

如果正则表达式需要用变量来构建，那么可以使用new RegExp()来实现。比如:var reg = new RegExp("123"+somestring+"abc","ig");如果somestring="ABC"，那么刚刚的代码相当于var reg = /123ABCabc/ig;

正则对象可以传入大部分字符串操作函数中。例如："abcde".replace(/(a|c)/ig,'$'); "a1b2c3".split(/[\d]/);等

函数执行时的上下文环境

变量作用域

参考上次的presentation

事件函数的上下文

上面提到的在dom元素上绑定的事件函数被执行的时候，上下文环境为对应的DOM元素。即this变量指向对应的dom。参考上次的presentation。

setTimeout和setInterval

用setTimeout和setInterval指定触发的函数执行时候的上下文环境为window。

另外，利用setTimeout(function,0);可以将函数压入执行队列的底部，最后执行。例如：

var a = 1;
setTimeout(function()
{
	alert(a);
},0);
a = 2;

以上代码会提示2，而不是1.

call和apply

通过函数的call和apply方法可以指定函数执行时候的上下文环境。

兼容各种浏览器

Javascript语言本身

Javascript语言方面绝大部分浏览器差异不大，唯独IE在遇到以下情况时候会报“缺少标识符、字符串或数字”的错误：

var obj = 
{
	name: 'Longbill',
	mobile: '1234567',
}

最后多写一个逗号的情况在实际使用中经常遇到，一定要小心。

与DOM相关的

xmlhttp(AJAX)对象的不同实现

event对象问题: IE的DOM事件执行的时候，event对象为全局变量，而 w3c 浏览器需要传入函数内部。一般可以这样来兼容：

o.onclick=function(evt)
{
	if (!evt) evt = window.event;
	...
}

其实Javascript的兼容问题可以很简单的靠jQuery等第三方底层库实现。 但是我个人还是推荐先了解原生JS的东西，在此基础上再接触jQuery，这样才会理解jQuery的伟大，而不会觉得一切都是理所当然的。

与CSS相关的

可以参考这篇文章。基本可以应付绝大部分兼容性问题。

7584 read 15 comment(s)