重学js

js的数据类型

简单数据类型

• undefined 未定义
• null

1. 表示一个空对象指针
2. 如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null，而不是其他值
3. undefined值是派生自null值的，所以undefined==null的返回结果是true

• boolean

Boolean()

1. 除0之外的所有数字，转换为布尔值都为true
2. 除空字符串之外的所有字符，转换为布尔值都为true
3. null和undefined转换为布尔型为false

• number

1. 表示整数和浮点数
2. NaN：即非数值
3. 任何涉及NaN的操作都会返回NaN
4. NaN与任何值都不相等，包括其本身
   isNaN(n),检测n是否是非数值，对接收的值，它会尝试转换为数值，再检测是否为非数值。

把非数值转换成数值

Number() 把非数值强制转换成数值，必须全部由数字组成，包含字母就会返回NaN；
parseInt() 参数必须以数字开头；
parseFloat()；如果开头有0的话，会被忽略掉

• string

变量.toString()
String() 将任何类型的值转换成字符串

复杂数据类型

• object

typeof

功能：检测变量类型
语法：

typeof 变量 或typeof(变量）

返回值

string类型，有可能是：string、number、boolean、object、undefined、function

js的操作符

算数操作符

• +加
• -减
• *乘
• /除
• %取余
• 递增 ++a、a++

++a先返回递增之后的a的值
a++先返回a的原值，再返回递增之后的值

• 递减同理

赋值操作符

• 简单赋值：=
• 符合赋值：+=、-=、*=、/=、%=

比较操作符

、<、>=、<=、、=、!=、!==

三元操作符

条件？执行代码1：执行代码2

逻辑操作符

• &&：与

1. 如果有一个操作数是null，则返回null
2. 如果有一个操作数是NaN，则返回NaN
3. 如果有一个操作数是undefined,则返回undefined
4. 如果第一个操作数隐式类型转换为true，则返回第二个操作数
5. 如果第一个操作数隐式类型转换为false,则返回第一个操作数

• ||：或

1. 如果第一个操作数隐士类型转换后为true，则返回第一个操作数；
2. 如果第一个操作数隐士类型转换后为false，则返回第二个操作数。
3. 如果两个操作数是null，则返回null
4. 如果两个操作数是NaN，则返回NaN
5. 如果两个操作数是undefined,则返回undefined

• ！：非

js的流程控制语句

if语句

if(条件){
 执行语句;
}

if(条件){
	执行的语句；
} else {
	执行的语句；
}

if(条件){
	执行的语句；
} else if(条件) {
	执行的语句；
} else {
   执行的语句；
 }

switch语句

switch(判断条件){
	case value1:
	 	执行的语句；
	 	break;
	case value2:
	 	执行的语句；
	 	break;
	default:
		执行的语句；
}

var week=new Date().getDay()
switch(week){
	case 0:
	 	console.log('今天星期日')；
	 	break;
	case 1:
	 	console.log('今天星期一')；
	 	break;
	default:
		console.log('日期有误')；
}

js的循环语句

for语句

for(语句1;语句2;语句3){
	被执行的代码块；
}
语句1：在循环开始前执行
语句2：定义运行循环的条件
语句3：在循环已被执行后执行

while语句

while(条件){
	执行的语句；
}

do{
	执行的语句；
}while(条件)

控制循环的关键语句

• break 退出整个循环
• continue 退出当前循环

js中的函数

function fnName([arg0,arg1,...]){
	执行语句；
}

return

后面不跟返回值的话，返回的是undefind

arguments

1. 类数组

js中的内置对象

Array

创建数组的两种方法

1. 使用Array构造函数

new Array()
括号中的参数

1. 预先知道数组要保存的项目数量
2. 向Array构造函数中传递数组应包含的项

2. 使用数组字面量表示法

var arr = [1,3,4,5]

array.length获取数组的长度
可以通过它移除数组末尾的值

数组的方法

• push() 向数组尾部添加值

返回值，返回新数组的长度

• unshift()向数组前面添加值

返回值，返回新数组的长度

• pop() 删除最后一个元素

返回被删除的那个元素

• shift()删除数组的第一个元素

返回被删除的那个元素

• join() 把数组中的所有元素放入一个字符串

返回值：字符串

• reverse() 用于颠倒数组中元素的顺序

返回值：新数组

• sort()用于对数组的元素进行排序

返回排序后的数组
该方法可以接收一个比较函数作为参数
该方法是将数组中的元素转换成字符串进行比较的

// 降序
arr.sort(function(a,b){return b-a;})
// 升序
arr.sort(function(a,b){return a-b;})

• concat() 用于连接两个或多个数组

返回新的数组

• slice(start,end) 从已有的数组中返回选定的元素

参数：
start(必须)规定从何处开始选取，如果负数，从数组尾部开始算起；
end(可选)规定从何处结束选取，是数组片断结束处的数组下标，不包括end索引上的元素；
返回值：数组

1. 如果没有指定end值，则截取从start到数组末尾的值
2. 如果该方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置

拷贝数组

var a=[1,2,3,4,5,6],
    b;
// 方法1 for循环
b=[];
for (var i=0;i<a.length;i++){
	b.push(a[i])
}

// 方法2
b=[].concat(a)

// 方法3
b=a.slice(0)

• splice() 删除、插入、替换数组项
  删除

arr.splice(index,count)
删除从index出开始的零个或多个元素
返回值：被删除的元素的数组
count是要删除的项目数量，如果设置为0，则不会删除项目，如果不设置，则删除从index开始的所有值。

插入

arr.splice(index,0,item1,item2…itemX)
在指定位置插入值

替换

arr.splice(index,count,item1,item2…itemX)
返回值：从原数组中删除的元素的数组

• indexOf() 从数组的指定位置开始查找指定的元素（默认从开始）

arr.indexOf(searchvalue,startIndex)
searchvalue 必须，要查找的项
startIndex 可选，起点位置的索引
返回值：number,查找的项在数组中的位置，没找到的情况下返回-1

• lastIndexOf(searchvalue,startIndex) 从数组的末尾开始向前查找

indexOf、lastIndexOf会使用全等操作符进行查找指定的元素,所以必须严格相等；
兼容性：IE9+

封装indexOf方法

function ArrayIndex(arr,value,index){
	for(var i=index;i<arr.length;i++){
		if(value===arr[i]){
			return i;
		}
		return -1;
	}
}	

String

• charCodeAt() 返回字符串指定索引位置字符的字符编码

str.charCodeAt(index)

• charAt() 返回指定位置的字符

str.charAt(index)

• indexOf() 查找指定的字符，返回字符从索引，未找到返回-1

str.indexOf(‘o’)

• lastIndexOf() 从后向前查找
• slice() 截取子字符串

str.slice(start,end)
当参数是负数的时候，就是字符串长度加上该负数；
end不包括在内

• substring() 语法与功能跟slice完全一样

区别：

1. 当参数为负数时，自动将参数转换为0
2. 传递的参数前大后小，该方法会自动将小值作为开始位置，大值作为结束位置；

-substr(start,len)

len 可选，表示截取的字符总数，省略时截取至字符串末尾
当start为负数时，会将传入的负值与字符串的长度相加
当len为负数时，返回空字符串

• split() 把一个字符串分割成字符串数组

返回值，返回分割生成的数组

• replace(regexp/substr,replacement)

在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的字符串；

• toUpperCase() 小写转换成大写
• toLowerCase() 大写转换成小写

Math

• Math.min(num1,num2,…numN) 求一组数中的最小值
• Math.max(num1,num2,…numN) 求一组数中的最大值
• Math.ceil(num) 向上取整
• Math.floor(num) 向下取整，返回num的整数部分
• Math.round(num) 四舍五入
• Math.abs(num) 返回num的绝对值
• Math.random() 生成0-1的随机数

// 生成n-m的随机整数
Math.floor((m-n+1)*Math.random()+n)

date

• new Date()

创建一个日期时间对象；
不传参的情况下，返回当前的日期时间对象

• getFullYear() 返回4位数的年份
• getMonth() 返回日期中的月份，返回值为0-11
• getDate() 返回月份中的某一天
• getDay() 返回星期，返回值为0-6
• getHours() 返回小时
• getMinutes() 返回分
• getSeconds() 返回秒
• getTime() 返回表示日期的毫秒数

js的DOM

dom的查找方法

1. document.getElementById(‘id’)
2. document.getElementByTagName(‘tag’) tag标签名称

给dom元素设置样式

1. ele.style.styleName=styleValue

操作dom元素

1. ele.innerHTML 返回ele元素开始和结束标签之间的HTML

ele.innerHTML=‘html’

2. ele.className

ele.className=‘cls’

获取dom属性

ele.getAttribute(‘attribute’)

设置dom属性

ele.setAttribute(‘attribute’,value)

js中的事件

HTML事件

语法

<tag 事件=‘执行脚本’></ tag>

功能：在html元素上绑定事件

DOM0级事件

1. 通过DOM获取HTML元素
2. （获取HTML元素）.事件=执行脚本

鼠标事件

• onload: 页面加载时触发
• onclick: 鼠标点击时触发
• onmouseover: 鼠标滑过时触发
• onmouseout: 鼠标离开时触发
• onfoucs: 获得焦点时触发
• onblur: 失去焦点时触发
• onchange: 域的内容改变时发生
• onsubmit: 表单中的确认按钮被点击时发生，该事件是添加在form表签上的，不是添加在提交按钮上的；
• onmousedown: 鼠标按钮在元素上按下时触发
• onmousemove: 在鼠标指针移动时发生
• onmouseup: 在元素上松开鼠标按钮时触发
• onresize: 当调整浏览器窗口的大小时触发
• onscroll: 拖动滚动条滚动时触发

键盘事件

• onkeydown: 在用户按下一个键盘按键时发生
• onkeypress: 在按下键盘按键时发生（只会响应字母与数字符号）
• onkeyup: 在键盘按键被松开时发生
• keyCode: 返回onkeypress、onkeydown或onkeyup事件触发的键的值的字符代码，或键的代码。

document.onkeydown=function(event){
	console.log(event.keyCode)
}

js的BOM

浏览器对象模型

BOM对象有

1. window
2. navigator
3. screen
4. history
5. location
6. document
7. event

window对象的方法

• 显示带有一段消息和一个确认按钮的警告框

window.alert(‘content’)

• 显示一个带有指定消息和ok及取消按钮的对话框

window.confirm(‘message’)

• window.prompt(“text,defaultText”)

参数说明：
text: 要在对话框中显示的纯文本（而不是HTML格式的文本）
defaultText：默认的输入文本
返回值：
如果用户单击提示框的取消按钮，则返回null；
如果用户单击确认按钮，则返回输入字段当前显示的文本

• window.open(pageURL,name,parameters)

功能：打开一个新的浏览器窗口或查找一个已命名的窗口
参数说明：
pageURL：子窗口路径
name： 子窗口句柄（name声明了新窗口的名称，方便后期通过name对子窗口进行引用）
parameters：窗口参数（各参数用逗号分隔)

window.open("newwindow.html","newwindow","width=400,height=400")
// 窗口参数：
// width 窗口宽度  height 窗口高度
// toolbar 是否显示浏览器的工具栏
// left 窗口x轴坐标  top 窗口Y轴坐标
// menubar 是否显示菜单栏
// scrollbars 是否显示滚动条
// location 是否显示地址字段
// status 是否添加状态栏

• window.close() 关闭浏览器窗口

window对象的方法–定时器

js是单线程语言，单线程就是所执行的代码必须按照顺序

• 超时调用
  setTimeout(code,millisec)
  等待millisec时间后执行code

• clearTimeout(timer) 取消等待时间事件

• 间歇调用
  setInterval(code,millisec) 每隔指定的时间执行一次代码

• 清除定时器clearInterval(timer)

location对象

location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能，它既是window对象的属性，也是document对象的属性。

• location.href

功能：返回当前加载页面的完整URL
说明：location.href与window.location.href等价
不但可以获取也可以设置

• location.hash

功能：返回URL中的hash(#号后跟零或多个字符），如果不包含则返回空字符串。
不但可以获取也可以设置
location.hash=’#top’ 返回顶部

• location.host

功能：返回服务器名称和端口号

• location.hostname

返回不带端口号的服务器名称

• location.pathname

返回URL中的目录和（或）文件名

• location.port

返回URL中指定的端口号，如果没有，返回空字符串

• location.protocol

返回页面使用的协议

• location.search

返回URL的查询字符串，这个字符串以问号开头。

使用location对象改变浏览器的位置

1. location.href属性
2. location对象其他属性也可以改变URL:

location.hash
location.search

3. location.replace(url) 重新定向URL，不会在历史记录中生成新记录。
4. location.reload() 重新加载当前显示的页面

有可能从缓存中加载
location.reload(true)从服务器重新加载

History历史对象

1. history.back()

功能：回到历史记录的上一步
说明：相当于使用了history.go(-1)

2. history.forward()

功能：回到历史记录的下一步
说明：相当于使用了history.go(1)

3. history.go(n)

Screen对象及其常用属性

包含有关客户端显示屏幕的信息

1. 页面宽：screen.availWidth

window.innerWidth窗口文档显示的宽度
availWidth获取屏幕的宽度

2. 页面高：screen.availHeight

window.innerHeight窗口文档显示的高度
availHeight获取到的是除了任务栏之外的内容，获取屏幕的宽度

Navigator对象

浏览器信息

1. navigator.userAgent: 用来识别浏览器名称、版本、引擎以及操作系统等信息的内容；

DOM操作

元素节点

1. ele.nodeType返回节点类型

if(ele.nodeType==1){
	console.log("该元素是元素节点")
}

2. 节点.nodeName 返回节点的名称
3. 节点.nodeValue 返回节点的值
4. ele.attributes 获取属性节点，返回类数组

var attrNode=ele.attributes[0];
console.log(attrNode.nodeName+attrNode.nodeValue)

5. ele.childNodes 获取子节点，返回类数组，同样可以用nodeName、nodeValue分别获取节点名字和值

浏览器渲染引擎的渲染流程

渲染：浏览器把请求到的html显示出来的过程
步骤：

1. 解析HTML以构建DOM树（构建DOM节点）
2. 构建渲染树（解析样式信息）
3. 布局渲染树（布局DOM节点）
4. 绘制渲染树（绘制DOM节点）

创建节点

1. document.write()

如果在元素加载完成后执行该语句，它就会清空原先的所有页面元素

2. create系列方法

1. document.createElement() 参数标签名,可以创建h5的新元素标签，来做兼容；
2. document.createTextNode() 创建新的文本节点，参数是要插入的节点的文本；
3. document.createDocumentFragment() 创建文本片段
4. document.createComment() 传入注释文本就可以创建注释节点

var ul=document.getElementById('myList');
var li=document.createElement('li');
var txt=document.createTextNode('文本')
li.appendChild(txt);
ul.appendChild(li);


// createDocumentFragment
var fragment=document.createDocumentFragment();
var ul=document.getElementById('myList');
var li=null;
for(var i=0;i<3;i++){
	li=document.createElement('li');
	var txt=document.createTextNode('文本'+''+(i+1))
	li.appendChild(txt);
	fragment.appendChild(li);
}
ul.appendChild(fragment)

h5标签做兼容

(function(){
	// ie浏览器判断
	if(!
		/*@cc_on!@*/
	0) return;
	var e="abbr,article,aside,audio,canvas,datalist,details,dialog,
	eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,scetion,time,video".split(',');
	var i=e.length;
	while(i--){
		document.createElement(e[i]);
	}
})

高效创建节点的方法

1. innerHTML
2. outerHTML
3. innerText
4. outerText

var conent=document.getElementById('content');
var str="<p>This is a <strong>paragraph</strong></p>"
content.innerHTML=str;

查找节点

下面的方法都包含空的文本节点：

• firstChild 获得第一个子元素
• childNodes 获得子元素列表
• parentNodes 获得父节点
• previousSibling 获得上一个兄弟节点
• nextSibling 获得下一个兄弟节点
• ownerDocument 任何节点都可以通过它来获取document节点
• hasChildNodes() 判断某个节点是否有子节点

var oHtml=document.documentElement;
// var oHead=oHtml.firstChild;
// var oHead=oHtml.childNodes[0];
var oHead=oHtml.childNodes.item(0);

以下API会忽略掉非元素节点：

• firstElementChild 第一个子节点
• lastElementChild 最后一个子节点
• nextElementSibling 下一个兄弟节点
• previousElementSibling 获得上一个兄弟节点
• children 获得子节点类数组
• childElementCount 返回当前节点的所有子节点个数，直接子节点的个数

NodeList对象：

• 是一种类数组对象，用于保存一组有序的节点
• 可以通过方括号来访问NodeList的值，有item方法和length属性
• 它并不是Array的实例，没有数组对象的方法

类数组对象HTMLCollection：

通过使用以下方法得到元素类数组

• ele.getElementsByTagName()
• document.scripts
• document.links
• document.images
• document.forms
• tr.cells
• select.options
• …

类数组对象NamedNodeMap：

• ele.attributes

节点查找的各种方法：

• document.getElementById()
• document.getElementsByName()
• ele.getElementsByTagName()
• ele.getElementsByClassName()
• ele.querySelector()
• ele.querySelectorAll()

操作节点的方法：

• appendChild()
• insertBefore(要添加的新节点，要被前面插入节点的子节点)
• replaceChild(要插入的节点，被替换的节点) 返回值为被替换掉的节点；
• cloneNode()

cloneNode(true) 深度复制，把子节点也会拷贝下来

• normailze() 合并相邻的Text节点
• splitText() 按照指定的位置把文本节点分割成两个节点

删除节点的方法：

• removeChild(要删除的子节点) 删除某个节点下面的子节点
• removeNode()

IE的私有实现
将目标节点从文档中删除，返回目标节点
参数是布尔值，默认值是false
removeNode(true) 将子节点也删除

• innerHTMl
• deleteContents()
• textContent

DOM属性

属性分两种

1. Property 固有属性

固有属性可以通过ele.属性名来操作

2. Attribute 自定义属性

1. 访问自定义属性的值
   ele.attributes.getNamedItem(自定义属性的名字).nodeValue
   ele.attributes[自定义属性的名字].nodeValue
2. 创建属性
   var attr=document.createAttribute(自定义属性的名字);
   attr.value=属性的值;
   ele.attributes.setNamedItem(attr)
3. 移除指定的属性
   ele.attributes.removeNamedItem(属性名称)；

两种属性的通用操作方法

• ele.getAttribute(属性名);
• ele.setAttribute(属性名,属性值)；修改和创建属性
• ele.removeAttribute(属性名)

js事件

事件绑定的三种方式

第一种：直接在html中定义元素的事件相关属性
缺点：违反了‘内容与行为相分离’的原则，应尽可能少用。

<button onclick='fn'>按钮</button>
function fn(){
	aleart('1')
}

第二种：DOM0级事件，在js中为元素的事件相关属性赋值.
缺点：元素只能绑定一个监听函数

var btn=document.getElementByTagName('button')[0];
btn.onclick=function(){
	aleart('1')
}

第三种：DOM2级事件，高级事件处理方式，一个事件可以绑定多个监听函数

优点：

1. 支持同一个dom元素注册多个同种事件；
2. 新增了捕获和冒泡的概念；

缺点：有浏览器兼容性问题。

三个参数：监听的事件类型、监听的事件执行函数、处理事件冒泡的值，默认为false

btn.addEventListener('click',function(){
	alert('事件1')
},false);
btn.addEventListener('click',function(){
	alert('事件2')
},false);
// ie浏览器监听绑定事件,事件类型必须加‘on'
// this指向window
btn.attachEvent('onclick',function(){
	alert('事件1')
}); 
btn.attachEvent('onclick',function(){
	alert('事件2')
}); 

移除事件：removeEventListener()

语法：

ele.removeEventListener(event,function,useCapture)
功能：移除addEventListener()方法添加的事件句柄。
参数：

1. event：必须。字符串，要移除的事件名称。
2. function: 必须。指定要移除的函数。
3. useCapture：可选。布尔值，指定移除事件句柄的阶段。

IE移除事件：detachEvent()

为了保证移除事件成功，必须与addEventListener()方法中的参数一致

var demo1=function () {
	alert('事件2')
}
btn.addEventListener('click',demo1,false);
btn.removeEventListener('click',demo1,false);


// ie浏览器
btn.attachEvent('onclick',demo1); 
btn.detachEvent('onclick',demo1)

事件浏览器兼容性处理

var EventUtil = {
	addHandler: function(ele,type,handler){
		// 绑定事件
		if(ele.addEventListener){
			ele.addEventListener(type,handler);
		} else if(ele.attachEvent){
			ele.attachEvent('on'+type,handler);
		}else{
			ele['on'+type]=null;
		}
	},
	removeHandler:function(ele,type,handler){
		// 移除事件
		if(ele.removeEventListener){
			ele.removeEventListener(type,handler);
		} else if(ele.detachEvent){
			ele.detachEvent('on'+type,handler);
		}else{
			ele['on'+type]=null;
		}
	}
}

事件周期

IE只支持事件冒泡，没有事件捕获

1. 第一阶段：事件捕获，事件将对象沿DOM树向下传播
2. 第二阶段：目标触发，运行事件监听函数
3. 第三阶段：事件冒泡，事件沿DOM树向上传播

事件冒泡与捕获

<div id='parent'>
	<div id='child'>点击儿子</div>
</div>

var parent=document.getElementById('parent');
var child=document.getElementById('child');

parent.addEventListener('click',function(){
	aleart('父级事件')
},false)

child.addEventListener('click',function(){
	aleart('子级事件')
},false)

/*
	点击子元素也会触发父元素上的事件
	事件冒泡：直系亲属树结构中，点击某个元素，由于冒泡作用，亲属树上的元素凡是添加的事件的，都会被触发。
*/


// 事件捕获 点击儿子先触发父亲的事件，再触发儿子事件
parent.addEventListener('click',function(){
	aleart('父级事件')
},true)

child.addEventListener('click',function(){
	aleart('子级事件')
},true)

事件委托（原理就是事件冒泡)

<ul>
	<li id='one'>item1</li>
	<li id='two'>item2</li>
	<li id='three'>item3</li>
	<li id='four'>item4</li>
</ul>

var oUl=document.getElemetsByTagName('ul')[0]
oUl.addEventListener('click',function(event){
	alert(event.target.id)
},false)

event对象常用属性和方法

• event.type 事件类型

<button id='btn'>点击我</button>
var oBtn=document.getElementById('btn')
var eventFun=function(event){
	// 事件类型
	var t = event.type;
}
oBtn.addEventListener('click',eventFun,false)
oBtn.addEventListener('mouseout',eventFun,false)

• event.target 点击谁谁就是target,事件源
• event.currentTarget 事件绑定在谁身上就指向谁

<ul>
	<li id='one'>item1</li>
	<li id='two'>item2</li>
	<li id='three'>item3</li>
	<li id='four'>item4</li>
</ul>

var oUl=document.getElemetsByTagName('ul')[0]
oUl.addEventListener('click',function(event){
	//点击儿子，事件在父级上面
	console.log(event.target)
	console.log(event.currentTarget)
},false)

• event.preventDefault 阻止默认行为

<a href='www.baidu.com' >跳转到百度的链接</a>
var oA=document.getElementByTagName('a')
oA.addEventListener('click',function(event){
	//阻止a的默认行为：向百度跳转
	event.preventDefault();
},false)

• event.stopPropagation() 阻止事件冒泡或捕获

<ul>
	<li id='one'>item1</li>
	<li id='two'>item2</li>
	<li id='three'>item3</li>
	<li id='four'>item4</li>
</ul>

var oUl=document.getElemetsByTagName('ul')[0]
var oli=document.getElemetsById('one')
oUl.addEventListener('click',function(event){
	aleart('父级')
},false)
oli.addEventListener('click',function(event){
	aleart('子级');
	event.stopPropagation();
},false)

• event.clientY 指浏览器顶部底边到鼠标点击位置的距离（它不计算滚动距离）；
• event.pageY 指浏览器顶部底边到鼠标点击位置的距离（它计算滚动距离）；
• event.screenY 指屏幕顶边到鼠标点击位置的距离；

IE8及以下event对象常用属性和方法

• event.type 事件类型

<button id='btn'>点击我</button>
var oBtn=document.getElementById('btn')
var eventFun=function(event){
	// 事件类型
	var t = event.type;
}
oBtn.attachEvent('click',eventFun,false)
oBtn.attachEvent('mouseout',eventFun,false)

• event.returnValue=false； 阻止默认行为

<a href='www.baidu.com' >跳转到百度的链接</a>
var oA=document.getElementByTagName('a')
oA.attachEvent('click',function(event){
	//阻止a的默认行为：向百度跳转
	event.returnValue=false;
},false)

• event.cancelBubble=true 取消事件的冒泡

<ul>
	<li id='one'>item1</li>
	<li id='two'>item2</li>
	<li id='three'>item3</li>
	<li id='four'>item4</li>
</ul>

var oUl=document.getElemetsByTagName('ul')[0]
var oli=document.getElemetsById('one')
oUl.attachEvent('click',function(event){
	aleart('父级')
},false)
oli.attachEvent('click',function(event){
	aleart('子级');
	event.cancelBubble=true;
},false)

• event.srcElement 同target

event对象跨浏览器兼容写法

var EventUtil = {
	addHandler: function(ele,type,handler){
		// 绑定事件
		if(ele.addEventListener){
			ele.addEventListener(type,handler);
		} else if(ele.attachEvent){
			ele.attachEvent('on'+type,handler);
		}else{
			ele['on'+type]=null;
		}
	},
	removeHandler:function(ele,type,handler){
		// 移除事件
		if(ele.removeEventListener){
			ele.removeEventListener(type,handler);
		} else if(ele.detachEvent){
			ele.detachEvent('on'+type,handler);
		}else{
			ele['on'+type]=null;
		}
	},
	getTarget:function(event){
		return event.target || event.srcElement;
	},
	preventDefault:function(event){
		if(event.preventDefault){
			event.preventDefault();
		}else{
			event.returnValue=false;
		}
	},
	stopPropagation:function(event){
		if(event.stopPropagation){
			event.stopPropagation();
		}else{
			event.cancelBubble=true;
		}
	}
}

图片预加载

var image=new Image();
EventUtil.addHandler(image,'load',function(){
	alert('image loaded!');
})
image.src='smile.gif';