关于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 相关文章推荐
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
jquery实现百叶窗效果
Jan 12 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
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 Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
flash 得到自身url参数的代码
2009/11/15 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Django框架下在视图中使用模版的方法
2015/07/16 Python
python中的计时器timeit的使用方法
2017/10/20 Python
Python探索之修改Python搜索路径
2017/10/25 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
董事长岗位职责
2013/11/30 职场文书
服装促销活动方案
2014/02/23 职场文书
个人总结与自我评价
2014/09/18 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
2014年检验科工作总结
2014/11/22 职场文书
订货会主持词
2015/07/01 职场文书
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS