Javascript进阶教程2
November/19th 2010

请使用非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相关的

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



7605 read 15 comment(s)
#1
宇博   2010年11月20号 12:29       回复
一直觉得JavaScript非常弱类型,非常随意。每次写C#就很郁闷怎么不能和JavaScript一样偷懒,哈。
#2
longbill   2010年11月20号 12:41       回复
@宇博 其实你可以用jscript ,一样的.net
#3
smallwolf   2010年11月20号 18:02       回复
现在发现了解原生的Javascript确实很重要。创建XMLHttp请求的时候,IE和标准浏览器中完全不同,用jQuery或者是Prototype的时候,我根本不知道有这种区别,后来自己写的时候才发现的
= =#
#4
  2010年11月20号 23:38       回复
Hi,我是小繁,我有联系你的手机,但是好像没有人接,烦请给我一个回复吗。
#5
longbill   2010年11月21号 00:06       回复
@繁 不好意思哈,我手机今天放在公司充电锁里面了。我明天给你回电话。
#6
longbill   2010年11月21号 00:08       回复
@smallwolf 所以必须要熟悉原生JS。 我觉得很重要。
#7
liuyunclouder   2010年11月22号 13:54       回复
有个地方貌似有点问题:
“事件冒泡是可以用event.preventDefault()(w3c)和return false;(IE)等方式取消的。”
W3C的preventDefault()是用来组织浏览器的默认行为,比如A标签的链接到相应的URL,组织冒泡的应该是stopPropagation(w3c),另外IE下应该是cancelBubble(IE), return false是包含了阻止冒泡和阻止默认行为。
个人见解。。。话说前几天我在部门里也做了一次JS分享嘿嘿,紧张死了。。。
#8
longbill   2010年11月22号 13:57       回复
@liuyunclouder 恩,太粗心了。。 你百度过了没? 
#9
liuyunclouder   2010年11月22号 23:55       回复
@longbill 估计挂了,现在都没来通知...求淘宝内推啊,上次帮我发给王大神了么
#10
longbill   2010年11月22号 23:56       回复
@liuyunclouder 不是让你自己去发吗? 
#11
liuyunclouder   2010年11月23号 00:01       回复
@longbill ........地址发我一下
#12
kookxiang   2010年11月27号 23:02       回复
好详细,不过……
还是别考虑ie好
#13
小吃培训   2010年11月28号 17:00       回复
代码 问题始终在困扰我  
#14
lxw   2010年12月21号 17:04       回复
地址发我一下
#15
戒烟的好处   2011年01月15号 05:39       回复
是要好好学习一下了啊 
添加新的评论
称呼:*
邮件:*
网站:
内容:

Copyright © Longbill 2008-2024 , Designed by EndTo , Powered by EndCMS