【JavaScript.05】JS事件晓知识，切换功能好兼容

来源：互联网发布：stc单片机pwm 编辑：程序博客网时间：2024/05/03 02:08

【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对象

可以屏蔽相同函数

attachEvent()和 detachEvent()

事件名+函数

只支持冒泡

This 指向window

不能屏蔽相同函数

【事件切换器Demo】

为了区别不同浏览器中的实现方法不同，选取W3C支持浏览器和IE浏览器进行对比。同样一个Demo，支持W3C的

浏览器和IE就不同。

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>

【总结】

事件就是你点击登录了，页面会自动弹出“欢迎登录”；你点击退出了，页面自动弹出“下次再来”；

事件的切换很重要，具体怎么重要也说不出个一二三，猜想等到做项目时才能体会吧。

事件不同浏览器兼容的问题很好，不过听说已经有更好的办法了。

继续学习，才能有新的收获。

0 0

【JavaScript.05】JS事件晓知识， 切换功能好兼容