【JS事件】
【定义】
JavaScript中的事件是由用户的某些操作而引起在JavaScript脚本中自动执行下一步操作的过程。例如:打开新
网页,会加载;点击鼠标,会提示跳转等等。
JavaScript中的事件是在用户和浏览器之间进行信息交互的一个过程。
JavaScript中的事件在一定程度上为服务端减轻了工作量。
【事件绑定】
事件绑定就是将客户端特定的事件A和反馈事件B联系起来。当A 发生,则B发生。A不发生,B不加载(减轻工作
量)。
事件绑定的3种形式
JavaScript 有三种事件模型:内联模型、脚本模型和DOM2 模型。
内联模型:事件处理函数直接写在HTML标签里。违反了HTML和JavaScript代码层次分离原则;
脚本模型:事件处理函数写在JavaScript 脚本中,利用匿名函数触发客户端发生操作后对应的事件。
DOM2模型:事件处理函数写在JavaScript脚本中,添加【添加事件】方法和【删除事件】方法,将它们和事件处
理函数还有匿名函数结合在一起。
【事件处理函数】
JavaScript 可以处理的事件类型为:鼠标事件、键盘事件、HTML事件。
【W3C和IE的事件切换及兼容】
【W3C和IE 的区别】
区别 | 方法 | 方法参数 |
| This关键字 | 重复 |
W3C | addEventListener()和 removeEventListener() | 事件名+函数+冒泡或捕获的布尔值(true 表示捕获,false 表示冒泡)。 | 支持冒泡和捕获 | This 指向DOM对象 | 可以屏蔽相同函数 |
IE | attachEvent()和 detachEvent() | 事件名+函数 | 只支持冒泡 | This 指向window | 不能屏蔽相同函数 |
【事件切换器Demo】
Demo效果: 在页面添加一个红色方块,点击它会变蓝色,两色循环显示。其实就是两个事件切换的问题。
在支持W3C的浏览器中的代码:
<span style="font-family:SimSun;font-size:18px;">
<!DOCTYPE html>
<html>
<body>
//引入css 样式文件
<style type="text/css">
.red{
width:100px;
height:100px;
background:red;
}
.blue{
width:100px;
height:100px;
background:blue;
}
</style>
//body 显示div 文本内容
<div id="box" class="red">给你点颜色看看!</div>
//插入JavaScript代码
<script>
//当发生load 事件是为添加事件,并用匿名函数,设置布尔值为false。
window.addEventListener('load',function(){
var box =document.getElementById('box');
box.addEventListener('click',toBlue,false);
},false);
function toRed(){
//this 获取box 的对象,更改class 的属性值。
this.className='red';
this.removeEventListener('click',toRed,false);
this.addEventListener('click',toBlue,false);
}
function toBlue(){
this.className='blue';
this.removeEventListener('click',toBlue,false);
this.addEventListener('click',toRed,false);
}
</script>
</body>
</html></span>
在IE核心浏览器中代码:
<span style="font-family:SimSun;font-size:18px;">IE代码
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
.red{
width:100px;
height:100px;
background:red;
}
.blue{
width:100px;
height:100px;
background:blue;
}
</style>
<div id="box" class="red">给你点颜色看看!</div>
<script>
window.attachEvent('onload',function(){
var box=document.getElementById('box');
box.attachEvent('onclick',toBlue);
});
function toRed(){
var that=window.event.srcElement;
that.className='red';
that.detachEvent('onclick',toRed);
that.attachEvent('onclick',toBlue);
}
function toBlue(){
var that=window.event.srcElement;
that.className='blue';
that.detachEvent('onclick',toBlue);
that.attachEvent('onclick',toRed);
}
</script>
</body>
</html>
</span>
可以看出两者在代码方法的使用和范围都有所差距。两者获取对象的方法也不同。也就是说同样的代码在W3C 和
非W3C的浏览器中实现的功能是不同。那么如何实现两个浏览器的兼容呢?
为了让 IE 和 W3C 可以兼容这个事件切换器,我们可封装成如下方式:
//添加事件兼容
function addEvent(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn);
} else if (obj.attachEvent) {
obj.attachEvent('on' + type, fn);
}
}
//移除事件兼容
function removeEvent(obj, type, fn) {
if (obj.removeEventListener) {
obj.removeEventListener(type, fn);
} else if (obj.detachEvent) {
obj.detachEvent('on' + type, fn);
}
}
//得到事件目标
function getTarget(evt) {
if (evt.target) {
return evt.target;
} else if (window.event.srcElement) {
return window.event.srcElement;
}
}
实现例子中的Demo:
<span style="font-family:SimSun;font-size:18px;"><!DOCTYPE html>
<html>
<body>
<style type="text/css">
.red{
width:100px;
height:100px;
background:red;
}
.blue{
width:100px;
height:100px;
background:blue;
}
</style>
<div id="box" class="red">给你点颜色看看!</div>
<script>
//事件切换兼容
function addEvent(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn);
} else if (obj.attachEvent) {
obj.attachEvent('on' + type, fn);
}
}
function removeEvent(obj, type, fn) {
if (obj.removeEventListener) {
obj.removeEventListener(type, fn);
} else if (obj.detachEvent) {
obj.detachEvent('on' + type, fn);
}
}
function getTarget(evt) {
if (evt.target) {
return evt.target;
} else if (window.event.srcElement) {
return window.event.srcElement;
}
}
addEvent(window,'load',function(){
var box=document.getElementById('box');
addEvent(box,'click',toBlue);
});
function toRed(evt){
var that=getTarget(evt);
that.className='red';
removeEvent(that,'click',toRed);
addEvent(that,'click',toBlue);
}
function toBlue(evt){
var that=getTarget(evt);
that.className='blue';
removeEvent(that,'click',toBlue);
addEvent(that,'click',toRed);
}
</script>
</body>
</html>
</span>
【总结】