JavaScript绑定事件的方法[3种]
在JavaScript中,有三种常用的绑定事件的方法:
- 在DOM元素中直接绑定;
- 在JavaScript代码中绑定;
- 绑定事件监听函数。
一. 在DOM元素中直接绑定
这里的DOM元素,可以理解为HTML标签。JavaScript支持在标签中直接绑定事件,语法为:
onXXX="JavaScript Code"
其中:
- onXXX 为事件名称。例如,鼠标单击事件 onclick ,鼠标双击事件 ondouble,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等。
- JavaScript Code 为处理事件的JavaScript代码,一般是函数。
例如,单击一个按钮,弹出警告框的代码有如下两种写法。
<input onclick="alert('谢谢支持')" type="button" value="点击我,弹出警告框" />
<input onclick="myAlert()" type="button" value="点击我,弹出警告框" />
<script type="text/javascript">
function myAlert(){
alert("谢谢支持");
}
</script>
二. 在JavaScript代码中绑定
在JavaScript代码中(即<script>标签内)绑定事件可以使JavaScript代码与HTML标签分离,文档结构清晰,便于管理和开发。 在JavaScript代码中绑定事件的语法为:
elementObject.onXXX=function(){
// 事件处理代码
}
其中:
- elementObject 为DOM对象,即DOM元素。
- onXXX 为事件名称。
- 例如,为 id="demo" 的按钮绑定一个事件,显示它的 type 属性:
<input id="demo" type="button" value="点击我,显示 type 属性" />
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素,这里是<div>标签
}
</script>
三. 绑定事件监听函数
绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。 addEventListener()函数语法:
elementObject.addEventListener(eventName,handle,useCapture);
参数 | 说明 |
---|---|
elementObject | DOM对象(即DOM元素)。 |
eventName | 事件名称。注意,这里的事件名称没有“ on ”,如鼠标单击事件 click ,鼠标双击事件 doubleclick ,鼠标移入事件 mouseover,鼠标移出事件 mouseout 等。 |
handle | 事件句柄函数,即用来处理事件的函数。 |
useCapture | Boolean类型,是否使用捕获,一般用false 。这里涉及到JavaScript事件流的概念,后续章节将会详细讲解。 |
attachEvent()函数语法:
elementObject.attachEvent(eventName,handle);
参数 | 说明 |
---|---|
elementObject | DOM对象(即DOM元素)。 |
eventName | 事件名称。注意,与addEventListener()不同,这里的事件名称有“ on ”,如鼠标单击事件 onclick ,鼠标双击事件 ondoubleclick ,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等。 |
handle | 事件句柄函数,即用来处理事件的函数。 |
注意:事件句柄函数是指“ 函数名 ”,不能带小括号。 addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持
的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数;但是,IE8.0及其以下版本不支持该方法,它使用
attachEvent()来绑定事件监听函数。所以,这种绑定事件的方法必须要处理浏览器兼容问题。 下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持:
function addEvent(obj,type,handle){
try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
obj.addEventListener(type,handle,false);
}catch(e){
try{ // IE8.0及其以下版本
obj.attachEvent('on' + type,handle);
}catch(e){ // 早期浏览器
obj['on' + type] = handle;
}
}
} 这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句,避免浏览器出现错误提示。
例如,为一个 id="demo" 的按钮绑定事件,鼠标单击时弹出警告框
addEvent(document.getElementById("demo"),"click",myAlert);
function myAlert(){
alert("又是一个警告框");
}
JavaScript绑定事件的方法[3种]的更多相关文章
- JavaScript中,有三种常用的绑定事件的方法
要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的 ...
- jquery 绑定事件的方法
jQuery中提供了四种绑定事件的方法,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off: 一.on()方法(首选方法) ...
- [转]javascript指定事件处理程序包括三种方式:
javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn" ...
- javascript绑定事件addEventListener与attachEvent
1.eleObj.addEventListener(eventName,handle,useCapture); eleObj:DOM元素: eventName:事件名称.注意,这里的事件名称没有“ o ...
- Javascript绑定事件的两种方式的区别
命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...
- Android studio button 按钮 四种绑定事件的方法
package com.geli_2.sujie.sujiegeili2testbutton; import android.os.Bundle; import android.support.v7. ...
- jQuery给动态添加的元素绑定事件的方法
我们在开发过程会遇到无法给动态元素添加绑定事件,解决方案如下: 例如 <div id="testdiv"> <ul></ul> </d ...
- Jquery 页面元素动态添加后绑定事件丢失方法,非 live
代码1: 以此方法绑定的input框事件,在通过add按钮后用jquery绑定的事件 alert就会丢失 <input type="button" value="A ...
- 动态添加的html元素绑定事件的方法
避免先写了DOM操作,但是元素是动态加载的,所以点击不生效,比较好的方法有两个: 1.动态添加的时候加行内事件,比如onclick="funcName()" 在js中写好方法名对应 ...
随机推荐
- 【JQuery学习笔记】一、基础篇
Lesson2 Ready 和onload类似,但onload只能注册一次,后注册的取代现注册的,而Ready可以多次注册都会执行 onload是所有院所创建完毕.图片.Css等都加载完毕后才触发,而 ...
- RBAC角色权限控制
RBAC角色权限控制 1. user (用户表) * 用户的基本信息(mid:用户信息id 如图) 2. node (节点表) * 页面(模块\控制器\方法) 3. role_node(角色.节点 ...
- 数据库触发器new old
数据库触发器new old: "NEW . column_name"或者"OLD . column_name".这样在技术上处理(NEW | OLD . col ...
- webApi项目中的问题
1.场景:客户端调用API获取所有品牌列表,使用redis存储,第一次是获取全部,之后会增量获取,通过lasttime参数 出现的问题:redis连接超时,网络流量太大 原因:这个借口没做本地缓存,每 ...
- 关于 typings install 的使用
typings 用来管理.d.ts的文件,这种文件是js的一种接口描述,原因是有很多js库并没有typescript的版本. 微软给出一种描述文件,让IDE识别各种js库的代码提示以及类型检查等. 写 ...
- Thinkphp 空操作、空控制器、命名空间
1.空操作 空操作是指系统在找不到请求的操作方法的时候,会定位到空操作(_empty)方法来执行,利用这个机制,我们可以实现错误页面和一些URL的优化. http://网址/index.php/Hom ...
- [算法导论]贪心算法(greedy algorithm)
转载请注明出处:http://www.cnblogs.com/StartoverX/p/4611544.html 贪心算法在每一步都做出当时看起来最佳的选择.也就是说,它总是做出局部最优的选择,寄希望 ...
- Deep Residual Learning for Image Recognition(MSRA-深度残差学习)
转自:http://blog.csdn.net/solomonlangrui/article/details/52455638 ABSTRACT: 神经网络的训练因其层次加深而 ...
- 公司内部SQUID代理HTTPS访问资料网站
同事安装SQUID,我按如下方法加密: 参考URL: http://www.tuicool.com/articles/iYv2YfU 众所周知,在国内访问国外互联网经常无法访问,比如要找资料googl ...
- 模糊集合和隶属度函数--AForge.NET框架的使用(一)
原文:模糊集合和隶属度函数--AForge.NET框架的使用(一) 什么是AForge.NET? AForge.NET是一个为开发人员和研究人员开发的框架,它可以用于计算机视觉,遗传算法,图像处理,神 ...