关于JavaScript中事件绑定的方法总结


Posted in Javascript onOctober 26, 2016

最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看。

JavaScript中绑定事件的方法主要有三种:

1 在DOM元素中直接绑定

2 JavaScript代码中直接绑定

3 绑定事件监听函数

一、在DOM元素中直接绑定

也就是直接在html标签中通过 onXXX=“” 来绑定。举个例子:

<input type="button" value="点我呦" onclick="alert("hello world!")"/>
<!--或者-->
<input type="button" value="点我呦" onclick="testAlert()">
<script type="text/javascript">
  function testAlert(){
   alert("hello world!");
  }
</script>

二、JavaScript代码中直接绑定

在JavaScript中通过查找DOM对象,对其绑定,elementObject.onclick=function(){} 的格式,举例如下:

<input type="button" value="点我呦" id="demo">
<script type="text/javascript">

  document.getElementById("demo").onclick=function testAlert(){
   alert("hello world!");
  }
</script>

三、绑定事件监听函数

这里需要了解addEventListener()和attachEvent()的函数语法。

1 elementObject.addEventListener(eventName,handle,useCapture) (支持主流浏览器、以及IE9.0及以上)

eventName:要绑定的事件名称。注意写法,比如点击事件,写成click,而不是onclick.

handle: 处理事件的函数名。但是写法上没有小括号。

useCapture:Boolean类型,是否使用捕获,一般用false,具体涉及到的会在后边总结。

2 elementObject.attachEvent(eventName,handle);(仅支持IE8及以下)

从网上找到了一个兼容的好办法,相比较if。。else语句,这个方法用的是try..catch错误处理语句,可以避免浏览器出现错误提示。

function addEvent(obj,type,handle){
  try{
   obj.addEventListener(type,handle,false);
  }catch(e){
   try{
    obj.attachEvent('on'+type,handle);
   }
   catch(e){
    obj['on' + type]=handle;//早期浏览器
   }
  }
}

四、说说JQuery中绑定事件的几种方法。

主要有on()、bind()、live()、delegate()等几种,相对应的解绑就是off()、unbind()、live()、undelegate();

1 on()、bind()、live()、delegate()中除了bind(),其他的都可以给后来追加的元素对象添加绑定事件。

2 这几种方法中各自有对应支持的JQuery版本。

3 在给动态添加的页面元素绑定事件时,通常用on()方法。

以上就是小编为大家带来的关于JavaScript中事件绑定的方法总结全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
学习面向对象之面向对象的术语
Nov 30 Javascript
解析javascript系统错误:-1072896658的解决办法
Jul 08 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
Vue实现圆环进度条的示例
Feb 06 Vue.js
WEB 前端开发中防治重复提交的实现方法
Oct 26 #Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 #Javascript
简单的js计算器实现
Oct 26 #Javascript
利用python分析access日志的方法
Oct 26 #Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 #Javascript
关于Jquery中的事件绑定总结
Oct 26 #Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 #Javascript
You might like
PHP+ajax 无刷新删除数据
2010/02/20 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
python的turtle库使用详解
2019/05/10 Python
python中web框架的自定义创建
2019/09/08 Python
Python实现图片识别加翻译功能
2019/12/26 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
德国网上宠物店:Zoobio
2018/05/23 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
演讲比赛获奖感言
2014/02/02 职场文书
感恩寄语大全
2014/04/11 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
会议通知格式范文
2015/04/15 职场文书
初中政教处工作总结
2015/08/12 职场文书
实习报告范文
2019/07/30 职场文书
导游词之青城山景区
2019/09/27 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis