关于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之简单的表单验证实例
Jul 07 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 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数据库连接类~~做成一个分页类!
2006/11/25 PHP
PHP URL路由类实例
2013/11/12 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
深入理解Python 代码优化详解
2014/10/27 Python
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
Python 从相对路径下import的方法
2018/12/04 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
致裁判员加油稿
2014/02/08 职场文书
军训感想500字
2014/02/20 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
详解pytorch创建tensor函数
2022/03/22 Python