JavaScript–事件模型
1. 事件流（event flow ）
2.
事件模型分为两种：冒泡型事件、捕获型事件。
1.冒泡型（dubbed bubbling ）事件：指事件按照从最精确的对象到最不精确的对象的顺序逐一触发。
2.捕获型（event capturing ）事件：它与冒泡型事件相反，指事件按照从最不精确的对象到最精确的对象的顺序逐一触发。
DOM模型和事件处理—事件处理
常用的事件方式
常规的事件处理方法无法批量的为节点添加事件，所以一般都是通过如下方式进行事件操作
<input type="button" value='click' id='btn'/>
//另外一种创建事件的方式，基本上都是使用这种方法
var btn = document.getElementById('btn');
btn.onclick = function(event){
//会自动传入一个event的事件参数对象
console.log(event.type);
console.log(this.value);
}
//script 目前必须在input之后，否则无法找到节点
//btn.onclick 当btn这个按钮被点执行相应的操作
使用这钟方式可能带来的问题如下所示
/*
些时会报错，btn is null
因为js 是解释执行的，执行到这个位置时并没有html中的标签存在
所以id为btn的节点也就不存在了！
*/
event参数和window.wvent
对于以上事件的处理方式而言，会默认传递一个event的参数来获取一些事件信息，但是对于ie和firefox的获取
方式不一致，ie使用window.event,firefox使用event获取，所拟需要使用如下方法解决
function show(event){
`//特别注意：对于IE而言，不会自动传递event这个参数进去，IE需要通过window.event来获取事件`
//但是FF却不支持window.event，所以通常使用如下方式解决
event = event || window.event;
console.log(event.type);
console.log(this.innerHTML);
}
window.onload事件
以上问题解决方案有两种
在body中加入onload =X 来解决
function loadSuccess(){
/*
些时会报错，btn is null
因为js 是解释执行的，执行到这个位置时并没有html中的标签存在
所以id为btn的节点也就不存在了！
解决方案有两种
1、直接在body中有一个事件，叫做onload,目前这些代码在loadSuccess方法中
此时，就表示要把所有的元素都load成功之后才执行
2、使用window.load = x来设置执行的事件（建议使用的方法）
/
var btn = document.getElementById('btn');
btn.onclick = function(event){
//会自动传入一个event的事件参数对象
console.log(event.type);
console.log(this.value);
}
}
<body onload='loadSuccess()'></body>
使用window.onload事件解决
**
//当窗口加载完成之后执行loadSuccess,注意loadSuccess不加括号
window.onload = loadSuccess;
批量添加事件
window.onload = ready;
function ready(){
var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
lis[i].onclick = show;
}
}
function show(event){
//特别注意：对于IE而言，不会自动传递event这个参数进去，IE需要通过window.event来获取事件
//但是FF却不支持window.event，所以通常使用如下方式解决
event = event || window.event;
console.log(event.type);
console.log(this.innerHTML);
}
181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
