1. 事件处理
1.1. 绑定事件方式
1)行内绑定
语法: //最常用的使用方式
<元素 事件=”事件处理程序”>
2)动态绑定
//结构+样式+行为分离的页面(html+css+js事件)
语法:
对象.事件=事件处理程序
行内绑定和动态绑定的重要区别:
以上程序是不可用的,点击div时,执行test函数,这时,test中的this表示window对象
因为:
我们定义test函数,实际上相应于在window对象下定义了test属性
test(); —> 相当于 window.test();
所以test函数在执行时,里面的this指向window
“谁”调用了函数,this指向“谁”
<html>
<head>
<script>
window.onload=function(){
document.getElementById('btnok').onclick=function(){
alert('hello');
};
//2、动态绑定
document.getElementById('div1').onclick=test;
};
</script>
</head>
<body>
<input type='button' id='btnok' value='确定'>
<script>
function test(){
this.style.color='red';
}
</script>
<div id='div1'>javascript</div>
</body>
</html>
以上程序是可用的,对象.onclick 在执行test函数时,test函数指向div1元素
1.2 事件监听
我们能不能为一个dom对象的同一个事件指定多个事件处理程序?
例1:通过这题,我们发现,如果为一个对象的同一个事件指定多个事件处理程序,那么,后面指定的程序会覆盖前面的。
<body>
<script>
function fn1(){
alert('first');
}
function fn2(){
alert('second');
}
window.onload=function(){
document.getElementById('div1').onclick=fn1;
document.getElementById('div1').onclick=fn2;
};
</script>
<div id='div1'>test</div>
</body>
如果我们想为一个对象的某个事件指定多个事件处理,可以考虑使用事件监听。
事件监听语法:
IE:
attachEvent(type,callback)
type:事件名 如:onclick、onsubmit、onchange等
callback:事件处理程序
基于W3C模型:
addEventListener(type,callback,capture)
Type:事件名 ,没有“on”前缀 如:click、submit、change
Callback:事件处理程序
Capture:事件模型 (可选参数) (冒泡模型、捕捉模型) true:捕捉模型
false:冒泡模型 (默认值)
代码示例:
<body>
<script>
function fn1(){
alert('first');
}
function fn2(){
alert('second');
}
window.onload=function(){
document.getElementById('div1').attachEvent('onclick',fn1);
document.getElementById('div1').attachEvent('onclick',fn2);
};
</script>
<div id='div1'>test</div>
</body>
W3c:
<body>
<script>
function fn1(){
alert('first');
}
function fn2(){
alert('second');
}
window.onload=function(){
document.getElementById('div1').addEventListener('click',fn1);
document.getElementById('div1').addEventListener('click',fn2);
};
</script>
<div id='div1'>test</div>
</body>
总结:
IE和W3C事件监听的不同:
- 监听方法不同:IE attachEvent 、W3C addEventListener
- 监听参数不同:IE 没有模型参数、W3C有模型参数
- 触发顺序:IE 8及以下的浏览器触发时是先绑定、后触发 W3C浏览器是先绑定、先触发
- 事件名称不同:IE事件需要”on”前缀,W3C不需要’on’前缀
解决事件监听的兼容性问题:
2. 事件流
2.1 事件模型
事件模型(事件的触发顺序)分为两种:Body嵌套div1,div1嵌套div2,div2嵌套div3
1)冒泡模型
2)捕捉模型
目前,IE只支持冒泡模型
冒泡模型
事件冒泡是指事件响应时会上水冒一样上升至最*元素
<div>
<div>
<div>click</div>
</div>
<div>
<style>
#div1{width:400px;height:400px;background:red}
#div2{width:300px;height:300px;background:green}
#div3{width:200px;height:200px;background:blue}
</style>
</head>
<body>
<script language='javascript' src='public.js'></script>
<script>
window.onload=function(){
document.getElementById('div1').onclick=function(){
alert('div1');
};
document.getElementById('div2').onclick=function(event){
alert('div2');
stopBubble(event);
};
document.getElementById('div3').onclick=function(){
alert('div3');
};
};
</script>
<div id='div1'>
<div id='div2'>
<div id='div3'>
</div>
</div>
</div>
</body>
大多数情况下,程序需要对事件冒泡进行取消?
取消事件冒泡
IE:
window.event.cancelBubble=true;
W3C:
function(event){
event.stopPropagation();
}
解决兼容性问题: public.js
3. 事件对象
1)什么是事件对象
事件对象就是事件发生时系统自动产生的对象,这个对象包含了这个事件发生时所有的信息
如:鼠标移动,那么,鼠标所在的横、纵坐标就保存到了这个事件对象中
2)如何获得事件对象
IE9及以上版本、W3C:
- function(event){}
IE8及以下:
- window.event
默认行为
有些html元素,有自己的行为,如,提交按钮、超链接
有些时候,我们需要对默认行为进行取消,如表单按钮点击时,用户资料添写不完整,我们这时需要将按钮的默认行为取消。
代码示例:
解决兼容性:
-4. 事件类型
Web 浏览器中可能发生的事件有很多类型,常用的事件流
- onLoad :页面加载完毕后 一般用于body元素
- onUnload :页面关闭后 一般用于body元素
- onBlur :失去焦点
- onFocus :获得焦点
- onClick :点击
- onMouseOver :当鼠标经过时
- onMouseOut :当鼠标离开时
- onMouseDown :当鼠标按下时
- onMouseUp :当鼠标抬起时
- onMouseMove :当鼠标移动时
- onChange :当内容改变时
- onSelect :当内容被选中时
- onkeypress :当键盘点击时
- onkeydown :当键盘按下时
- onkeyup :当键盘抬起时
- 触发顺序:onkeydown、onkeypress、onkeyup
- Onkeypress事件无法捕获功能键
- onSubmit :当表单提交时
- onReset :当表单重置时
- 事件委托(事件代理)
对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡,只指定一个事
件处理程序,就可以管理某一类型的所有事件。例如,click 事件会一直冒泡到document 层次。也就
是说,我们可以为整个页面指定一个onclick 事件处理程序,而不必给每个可单击的元素分别添加事
件处理程序。以下面的HTML 代码为例。
<ul id="myLinks">
<li id="goSomewhere">Go somewhere</li>
<li id="doSomething">Do something</li>
<li id="sayHi">Say hi</li>
</ul>
其中包含3 个被单击后会执行操作的列表项。按照传统的做法,需要像下面这样为它们添加3 个事
件处理程序。
var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething");
var item3 = document.getElementById("sayHi");
EventUtil.addHandler(item1, "click", function(event){
location.href = "http://www.wrox.com";
});
EventUtil.addHandler(item2, "click", function(event){
document.title = "I changed the document's title";
});
EventUtil.addHandler(item3, "click", function(event){
alert("hi");
});
如果在一个复杂的Web 应用程序中,对所有可单击的元素都采用这种方式,那么结果就会有数不清的代码用于添加事件处理程序。此时,可以利用事件委托技术解决这个问题。使用事件委托,只需在DOM 树中尽量最高的层次上添加一个事件处理程序,如下面的例子所示。
var list = document.getElementById("myLinks");
EventUtil.addHandler(list, "click", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target.id){
case "doSomething":
document.title = "I changed the document's title";
break;
case "goSomewhere":
location.href = "http://www.wrox.com";
break;
case "sayHi":
alert("hi");
break;
}
});
如果可行的话,也可以考虑为document 对象添加一个事件处理程序,用以处理页面上发生的某种特定类型的事件。
版权声明:本文为小平果原创文章,转载请注明:http://blog.csdn.net/i10630226