关于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和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 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
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
webpack引入eslint配置详解
2018/01/22 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
python模拟Django框架实例
2016/05/17 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
python分析作业提交情况
2017/11/22 Python
python 整数越界问题详解
2019/06/27 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
装修致歉信
2014/01/15 职场文书
劳动模范事迹材料
2014/01/19 职场文书
七一建党节演讲稿
2014/09/11 职场文书
爱心募捐通知范文
2015/04/27 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
离职告别感言
2015/08/04 职场文书
节水宣传标语口号
2015/12/26 职场文书
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android