关于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 相关文章推荐
用JQuery 实现的自定义对话框
Mar 24 Javascript
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
基于jquery tab切换(防止页面刷新)
May 23 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
json的使用小结
Jun 08 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 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
第二节--PHP5 的对象模型
2006/11/16 PHP
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
Python程序设计入门(1)基本语法简介
2014/06/13 Python
Python全局变量操作详解
2015/04/14 Python
Python模块WSGI使用详解
2018/02/02 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
python简单的三元一次方程求解实例
2020/04/02 Python
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
一些PHP的面试题
2015/05/06 面试题
法雷奥SQA(electric)面试问题
2016/01/23 面试题
介绍下static、final、abstract区别
2015/01/30 面试题
《我为你骄傲》教学反思
2014/02/20 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
党员公开承诺书内容
2014/05/20 职场文书
规范化管理年活动总结
2014/08/29 职场文书
龙门石窟导游词
2015/02/02 职场文书
城南旧事观后感
2015/06/11 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
导游词之河北野三坡
2019/12/11 职场文书