javascript之事件监听

简介:

addEventListener是一个监听事件并处理相应的函数。

  不啰嗦,直接上代码,如:

  js部分 

  <script>
window.onload = function(){
var input = document.getElementsByTagName("input")[0];
if(input.addEventListener){
// 兼容主流浏览器,IE8及以下不支持
input.addEventListener("click",function(){
alert("按钮被点击了!")
},false) // 指定事件是否在捕获或冒泡阶段执行,false表示冒泡,true表示捕获,默认为冒泡
}else if(input.attachEvent){
// 兼容IE8及以下
input.attachEvent("onclick",function(){
alert("按钮被点击了!")
})
}
}
</script>

  body部分:

  <body>
<input type="button" value="按钮" />
</body>

 

  注意

  addEventListener()方法,有3个参数。第一个参数是说明监听的事件类型(如:click,注不要前缀on),第二个参数是事件执行的函数或方法,第三个参数则指定事件是否在捕获或冒泡阶段执行,false表示冒泡,true表示捕获,默认为冒泡。该方对于IE8及以下浏览器不支持

  

  attachEvent()方法,有2个参数。第一个参数是说明监听的事件类型(如:onclick,注要前缀on),第二个参数是事件执行的函数或方法。支持IE8及以下版本浏览器



本文转自 sshpp 51CTO博客,原文链接:http://blog.51cto.com/12902932/1949366,如需转载请自行联系原作者
相关文章
|
6月前
|
JavaScript 前端开发 UED
实现JavaScript中的事件监听功能
实现JavaScript中的事件监听功能
|
29天前
|
JavaScript 前端开发
JavaScript 中的自定义事件
【10月更文挑战第1天】
27 1
|
28天前
|
JavaScript 前端开发
JavaScript事件监听
JavaScript事件监听
13 0
|
5月前
|
JavaScript 前端开发 API
JavaScript基础-事件监听与处理
【6月更文挑战第11天】本文介绍了JavaScript事件驱动编程的核心,包括事件流(捕获、目标、冒泡阶段)和监听方法(DOM Level 0、addEventListener/removeEventListener)。讨论了常见问题和易错点,如内存泄漏、事件委托和阻止默认行为的混淆,并提供了解决策略。通过代码示例展示了事件绑定、事件委托和阻止默认行为的用法,强调理解事件处理机制对于编写高效交互式Web应用的重要性。
193 6
|
6月前
|
JavaScript 前端开发
Javascript的一些监听事件
Javascript的一些监听事件
42 2
|
6月前
|
JavaScript 前端开发
JavaScript中绑定事件的方法
JavaScript中绑定事件的方法
|
JavaScript 前端开发 C++
JavaScript 添加事件绑定的三种方法
JavaScript 添加事件绑定的三种方法
478 0
|
JavaScript 前端开发 程序员
JavaScript 自定义事件如此简单
本文详细介绍 JS 自定义事件概念和实现方式,并结合两个实际场景进行代码演示。
377 0
|
Web App开发 JavaScript 前端开发
JavaScript中事件处理
不需要使用window.addEventListener或document.all来进行检测浏览器,应该使用能力检测;
|
JavaScript 前端开发
JavaScript自定义事件
标题JavaScript自定义事件 最近遇到一个基于jQuery项目,项目中的功能节点页面都是通过iframe实现,但是各个iframe之间有时需要相互通信,互相相应一些事件,为了更愉快的编码所以想到了自定义事件,还别说用起来竟然有点像vue的组件通信 top.
862 0