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);
}