关于JavaScript 的事件综合分析第1/2页
更新时间：2010年08月10日 00:48:48 作者：
js下比较常用的方法，事件函数代码。
A 事件流（event flow ）
事件模型分为两种：冒泡型事件、捕获型事件。
冒泡型（dubbed bubbling ）事件：指事件按照从最精确的对象到最不精确的对象的顺序逐一触发。
捕获型（event capturing ）事件：它与冒泡型事件相反，指事件按照从最不精确的对象到最精确的对象的顺序逐一触发。
捕获型事件也被称作自顶向下（DOM层次）的事件模型。
由于IE 浏览器不支持捕获型事件，因此并没有被广泛应用。
B 事件监听
i > 通用监听方法
示例一：
<p onclick="alert('点击了');">Click Me</p>
示例二：
<html>
<head>
<title> demo </title>
<meta name="Author" content="xugang" />
<script type="text/javascript">
// 在onload 事件中添加所有标签的事件
window.onload = function(){
// 找到对象
var o_p = document.getElementById("myp");
// 添加对象的onclick 事件
o_p.onclick = function(){
alert("我被点击了");
}
}
</script>
</head>
<body>
<p id="myp">Click Me</p>
</body>
</html>
此代码实现了结构与行为的分离。
给浏览器添加监听方法，分为两种：IE 中的监听方法、标准DOM 的监听方法。
ii > IE 中的监听方法
在IE 浏览器中，每个元素都有两个方法来处理事件的监听。分别是：attachEvent( ) 和 detachEvent( ) 。
附加事件方法：[object].attachEvent(“事件名”，方法名);
分离事件方法：[object].detachEvent(“事件名”，方法名);
如：o_p.detachEvent("onclick",click_A);
示例：
<html>
<head>
<title> demo </title>
<meta name="Author" content="xugang" />
<script type="text/javascript">
<!--
function click_A(){
alert("click_A");
//删除监听函数
o_p.detachEvent("onclick",click_B);
}
function click_B(){
alert("click_B, 我只调用一次。");
}
var o_p;
window.onload = function(){
o_p = document.getElementById("myP");
// 添加监听函数 click_A
o_p.attachEvent("onclick",click_A);
// 添加监听函数 click_B
o_p.attachEvent("onclick",click_B);
}
//-->
</script>
</head>
<body>
<p id="myP">Click Me</p>
</body>
</html>
注意：
● 使用这种方式可以为同一元素添加多个监听函数；
● 在IE 浏览器中，函数的执行顺序与函数的添加顺序相反；
● 在IE 浏览器中，虽然函数有先后执行顺序，但都会同时调用；
iii > 标准DOM 的监听方法
在使用标准DOM 的浏览器中，每个元素也有两个方法来处理事件的监听。分别是：addEventListener( ) 和 removeEventListener( ) 。
添加事件监听方法：[object].addEventListener(“事件名”，方法名，事件模型 );
移除事件监听方法：[object].removeEventListener(“事件名”，方法名，事件模型 );
注意：
这里的“事件名”不能带 on ，如：click（如果是onclick 则错误！）
“事件模型”为boolean 类型，通常设置为 false ，即“冒泡型”事件。（如果是true 则为“捕获型”事件）
示例：
<html>
<head>
<title> demo </title>
<meta name="Author" content="xugang" />
<script type="text/javascript">
<!--
function click_A(){
alert("click_A");
//删除监听函数
o_p.removeEventListener("click",click_B,false);
}
function click_B(){
alert("被click_A删除, 一次都不能调用。");
}
var o_p;
window.onload = function(){
o_p = document.getElementById("myP");
// 添加监听函数 click_A
o_p.addEventListener("click",click_A,false);
// 添加监听函数 click_B
o_p.addEventListener("click",click_B,false);
}
//-->
</script>
</head>
<body>
<p id="myP">Click Me</p>
</body>
</html>
在Firefox 下运行通过，在IE 下报错。
注意：
● 使用这种方式同样可以为同一元素添加多个监听函数；
● 在Firefox 浏览器中，函数的执行顺序与函数的添加顺序一致（Firefox 与IE 正好相反）；
● 在Firefox 浏览器中，这种方式添加的函数是执行外一个再执行另一个（逐个执行）；
事件模型分为两种：冒泡型事件、捕获型事件。
冒泡型（dubbed bubbling ）事件：指事件按照从最精确的对象到最不精确的对象的顺序逐一触发。
捕获型（event capturing ）事件：它与冒泡型事件相反，指事件按照从最不精确的对象到最精确的对象的顺序逐一触发。
捕获型事件也被称作自顶向下（DOM层次）的事件模型。
由于IE 浏览器不支持捕获型事件，因此并没有被广泛应用。
B 事件监听
i > 通用监听方法
示例一：
复制代码 代码如下:
<p onclick="alert('点击了');">Click Me</p>
示例二：
复制代码 代码如下:
<html>
<head>
<title> demo </title>
<meta name="Author" content="xugang" />
<script type="text/javascript">
// 在onload 事件中添加所有标签的事件
window.onload = function(){
// 找到对象
var o_p = document.getElementById("myp");
// 添加对象的onclick 事件
o_p.onclick = function(){
alert("我被点击了");
}
}
</script>
</head>
<body>
<p id="myp">Click Me</p>
</body>
</html>
此代码实现了结构与行为的分离。
给浏览器添加监听方法，分为两种：IE 中的监听方法、标准DOM 的监听方法。
ii > IE 中的监听方法
在IE 浏览器中，每个元素都有两个方法来处理事件的监听。分别是：attachEvent( ) 和 detachEvent( ) 。
附加事件方法：[object].attachEvent(“事件名”，方法名);
分离事件方法：[object].detachEvent(“事件名”，方法名);
如：o_p.detachEvent("onclick",click_A);
示例：
复制代码 代码如下:
<html>
<head>
<title> demo </title>
<meta name="Author" content="xugang" />
<script type="text/javascript">
<!--
function click_A(){
alert("click_A");
//删除监听函数
o_p.detachEvent("onclick",click_B);
}
function click_B(){
alert("click_B, 我只调用一次。");
}
var o_p;
window.onload = function(){
o_p = document.getElementById("myP");
// 添加监听函数 click_A
o_p.attachEvent("onclick",click_A);
// 添加监听函数 click_B
o_p.attachEvent("onclick",click_B);
}
//-->
</script>
</head>
<body>
<p id="myP">Click Me</p>
</body>
</html>
注意：
● 使用这种方式可以为同一元素添加多个监听函数；
● 在IE 浏览器中，函数的执行顺序与函数的添加顺序相反；
● 在IE 浏览器中，虽然函数有先后执行顺序，但都会同时调用；
iii > 标准DOM 的监听方法
在使用标准DOM 的浏览器中，每个元素也有两个方法来处理事件的监听。分别是：addEventListener( ) 和 removeEventListener( ) 。
添加事件监听方法：[object].addEventListener(“事件名”，方法名，事件模型 );
移除事件监听方法：[object].removeEventListener(“事件名”，方法名，事件模型 );
注意：
这里的“事件名”不能带 on ，如：click（如果是onclick 则错误！）
“事件模型”为boolean 类型，通常设置为 false ，即“冒泡型”事件。（如果是true 则为“捕获型”事件）
示例：
复制代码 代码如下:
<html>
<head>
<title> demo </title>
<meta name="Author" content="xugang" />
<script type="text/javascript">
<!--
function click_A(){
alert("click_A");
//删除监听函数
o_p.removeEventListener("click",click_B,false);
}
function click_B(){
alert("被click_A删除, 一次都不能调用。");
}
var o_p;
window.onload = function(){
o_p = document.getElementById("myP");
// 添加监听函数 click_A
o_p.addEventListener("click",click_A,false);
// 添加监听函数 click_B
o_p.addEventListener("click",click_B,false);
}
//-->
</script>
</head>
<body>
<p id="myP">Click Me</p>
</body>
</html>
在Firefox 下运行通过，在IE 下报错。
注意：
● 使用这种方式同样可以为同一元素添加多个监听函数；
● 在Firefox 浏览器中，函数的执行顺序与函数的添加顺序一致（Firefox 与IE 正好相反）；
● 在Firefox 浏览器中，这种方式添加的函数是执行外一个再执行另一个（逐个执行）；
相关文章
这篇文章主要介绍了微信小程序实现用户登录模块服务器搭建，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了js中的内部属性与delete操作符的相关资料,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了理解JavaScript设计模式中的单例模式，单例模式即Singleton Pattern是最简单的设计模式之一，下文更多相关介绍感兴趣的小伙伴可以参考一下2022-04-04
这篇文章主要介绍了预防网页挂马的方法总结的相关资料,这里详细整理了具体方法，和如何实现，需要的朋友可以参考下2016-11-11
这篇文章主要介绍了JavaScript微信定位功能实现方法,将定位到的经纬度转换为百度地图对应的经纬度，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
近期项目需要实现将 html 页面转换成 pdf 报告的需求,经过一番调研以及结合过往经验,发现了三种技术方案,下面我们就来看看它们的具体实现步骤吧2024-02-02
javascript中的作用域(scope)和上下文(context)是这门语言的独到之处，这部分归功于他们带来的灵活性。本文给大家介绍JavaScript中的作用域和上下文，感兴趣的朋友一起学习2016-03-03
JavaScript页面模板库handlebars的简单用法
本文主要是给大家分享的一个javascript页面模板库Handlebars的简单用法，可以帮助大家轻松的构建语义化模板，非常的实用，推荐给大家。2015-03-03
本文给大家分享一段js代码实现自动切换图片的代码，代码非常简单，应用领域非常广泛，感兴趣的朋友一起看看吧2016-10-10
这篇文章主要介绍了用svg制作富有动态的tooltip的代码以及制作过程，十分的细致全面，有需要的小伙伴可以参考下。2015-07-07
最新评论