JavaScript绑定事件的方法[3种]
在JavaScript中,有三种常用的绑定事件的方法:
- 在DOM元素中直接绑定;
- 在JavaScript代码中绑定;
- 绑定事件监听函数。
一. 在DOM元素中直接绑定
这里的DOM元素,可以理解为HTML标签。JavaScript支持在标签中直接绑定事件,语法为:
onXXX="JavaScript Code"
其中:
- onXXX 为事件名称。例如,鼠标单击事件 onclick ,鼠标双击事件 ondouble,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等。
- JavaScript Code 为处理事件的JavaScript代码,一般是函数。
例如,单击一个按钮,弹出警告框的代码有如下两种写法。
1. 原生函数
<input onclick="alert('谢谢支持')" type="button" value="点击我,弹出警告框" />
实例演示:
2. 自定义函数
<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种]相关推荐
- jQuery绑定事件的方法四种方法
jq给元素绑定事件的方法有4种, 1.bind() 2.live() 3.live() 4.on() //on常用 一:bind(type,[data],function(eventObjec ...
- 为元素绑定多个相同事件 绑定事件的另一种方式 复习 介绍 元素的事件绑定
为元素绑定多个相同事件 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
- vue中 点击事件的写法_vue实现绑定事件的方法实例代码详解
一.前言 vuejs中的事件绑定,使用来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法. 二.事件绑定方式 1. 直接在标签中写js方法 执行方法的第 ...
- Javascript 绑定事件和 this理解
为什么80%的码农都做不了架构师?>>> 常见绑定事件和几个常见的 this 方式1 :this 代表 object window <div style="wi ...
- jQuery给动态添加的元素绑定事件的方法
jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...
- easyui-menu 解决disableItem不能禁用绑定事件的方法
版本:1.4. menu的disableItem方法不能禁用使用onClick方式绑定的事件. 解决思路如下: 重写disableItem方法和enableItem方法. /*** menu方法扩展* ...
- es6 模板字符串中绑定事件的方法
step1: 模板字符传中写法 renderDom() {return `<div data-action="goDetail" data-url="${item. ...
- java c 事件对比_javacsript绑定事件的三种方式与各自特点
javacsript绑定事件的三种方式与各自特点 javacsript绑定事件的三种方式与各自特点 点击打开链接 javacsript绑定事件的三种方式与各自特点 feipeng8848 2017-0 ...
- jQuery中绑定事件的几种方法
以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){}); (2)target.bind("click",functi ...
最新文章
- mbr备份以及破坏后如何恢复
- C++接收字符串数组_C++模拟面试:从数组“紧凑”操作说开来
- php和python区别-什么是Python和php?Python与PHP有什么区别
- ceph对象存储折腾记
- 利物浦大学图书馆官网西交利物浦大学图书馆官网
- javascript函数执行前期变量环境初始化过程
- 软件行业渠道的价值在哪里?
- Ubuntu安装gcc-7.3.0
- 桌面软件开发框架大赏
- 项目六 AR与减速机应用
- Linux命令中CVf参数代表什么,Linux tar 命令使用参数详解
- mt管理器错误信息java_DEX编辑
- 听说今年金三银四变成金一银二了。。
- 前端工作总结187-json校验工具
- 计算机应用基础任务教化2010,【计算机应用论文】茶文化下的计算机应用基础课程改革(共5535字)...
- 花卉拍摄技巧 8 — 荷莲
- 两种方法实现轮播图效果
- 军用式计算机标准总线,计算机总线技术在军用航空地面检测设备中的应用分析.pdf...
- 零基础小白怎么自学UI设计?自学UI设计有什么方法?
- catia如何画花键_CATIA花键绘制万向节的装配及螺纹绘制
热门文章
- 【数字信号处理】傅里叶变换性质 ( 序列傅里叶变换共轭对称性质示例 | 证明 原序列实部 x_R(n) 的 傅里叶变换 是 原序列傅里叶变换 的 共轭对称序列 )
- 【Android 逆向】函数拦截实例 ( ③ 刷新 CPU 高速缓存 | ④ 处理拦截函数 | ⑤ 返回特定结果 )
- 【计算机网络】网络安全 : 入侵检测系统 ( 基于特征的入侵检测系统 | 基于异常的入侵检测系统 )
- 【计算理论】上下文无关语法 ( 语法组成 | 规则 | 语法 | 语法示例 | 约定的简写形式 | 语法分析树 )
- websocket趣说_转
- 运用BT在centos下搭建一个博客论坛
- 计算机网络第七次笔记
- 英语学习APP的案例分析
- es6-let 和 const
- 设置JAVA环境变量