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

最新推荐文章于 2024-04-21 22:42:05 发布

一支支穿云箭

最新推荐文章于 2024-04-21 22:42:05 发布

阅读量1.1k

点赞数

分类专栏： JavaScript JavaScript从零开始文章标签： JavaScript事件分类切换兼容

本文链接：https://blog.csdn.net/mengdonghui123456/article/details/50407733

版权

JavaScript 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

JavaScript从零开始

11 篇文章 3 订阅

订阅专栏

【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】

为了区别不同浏览器中的实现方法不同，选取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

收藏

觉得还不错? 一键收藏
25
评论
【JavaScript.05】JS事件晓知识，切换功能好兼容

【JS事件】【定义】JavaScript中的事件是由用户的某些操作而引起在JavaScript脚本中自动执行下一步操作的过程。例如：打开新网页，会加载；点击鼠标，会提示跳转等等。JavaScript中的事件是在用户和浏览器之间进行信息交互的一个过程。JavaScript中的事件在一定程度上为服务端减轻了工作量。【事件绑定】事件绑定就是将客户端特定的事件A和反
复制链接

扫一扫