`

JS事件模型

 
阅读更多

一.事件冒泡与事件捕获
事件捕获:由外向内寻找事件源的过程。
事件冒泡:事件从事件源由内向外传播的过程。

二.指派事件监听者
1.在JavaScript中指定事件处理程序,动态指派
<p id="inner">点击</p>
<script type="text/javascript">

function tt(){
alert(this.id);
}
var inner=document.getElementById("inner");
inner.onclick=tt;
</script>

2.在XHTML标记的事件处理属性中指定,静态指派
<p id="inner" onclick="tt()">点击</p>
效果同如下JavaScript执行
var inner=document.getElementById("inner");
inner.onclick=function(){
tt();
};
两种方式的不同点如下图

所以动态指派返回inner,静态指派返回undefined
注意:事件处理程序的返回值可以影响事件的默认行为,默认行为是事件发生,返回一个false值可以取消事件的默认行为。
所以在静态指派时,添加<p id="inner" onclick="return tt()">点击</p>,才能返回正确的boolean值给onclick。

注意:== 内容相等 === 类型,内容都相等

3.现代事件处理程序指派方法
if(obj.attachEvent){
//ie式
obj.attachEvent("onclick",tt)
obj.detachEvent("onclick",tt)
}
else{
//dom式,第三个参数标识处理程序是用在捕获阶段(true),还是用在冒泡阶段(false)
obj.addEventListener("click",tt,false);
obj.removeEventListener("click",tt,false);
}

三.事件对象
if(window.event){
var event=window.event;//ie式
}
else{
var event=arguments[0];//dom式
}

注意:获取键盘键值和获取键盘输入值
keydown关注键值 keypress关注输入值


keyCode charCode
IE keydown 键值 不支持

keypress 输入值 不支持
FF keydown 键值 0

keypress 0 输入值
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics