关于JavaScript中事件绑定的方法总结
最近收集了一些关于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中事件绑定的方法总结全部内容了，希望大家多多支持脚本之家~
相关文章
前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置的功能,为了方便下次找起来方便一些自己在这里记录一下,这篇文章主要给大家介绍了关于JS获取经纬度并根据经纬度得到城市信息的相关资料,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了详解基于Wepy开发小程序插件(推荐)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-08-08
“撩过”c++的对象，“拿捏”了python的对象，那么今天我们看看javascript中的对象到底是什么，看能不能一次性拿下，不行的话就多来几次，想做“海王”就多物色几门语言的对象，多new几个，最终你会发现都差不多2022-03-03
深浅拷贝知识在我们的日常开发中还算是用的比较多,下面这篇文章主要给大家介绍了关于javaScript深拷贝和浅拷贝的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
最近要做一个大屏幕展示上下滚动的列表，而IE自带的Marquee，无法满足需要，随自己写了一个滚动机制，代码在附件中2009-12-12
这篇文章主要介绍了javascript中加号(+)操作符的一些神奇作用,真的很神奇,例如加号可以转换数据类型，可以把日期转成整数等,需要的朋友可以参考下2014-06-06
webpack proxy,即webpack提供的代理服务,基本行为就是接收客户端发送的请求后转发给其他服务器,本文给大家介绍了webpack proxy如何解决跨域问题,感兴趣的朋友跟随小编一起看看吧2023-10-10
这篇文章主要介绍了JS模拟按钮点击功能的方法,结合实例形式分析了JavaScript模拟点击按钮事件的实现技巧,并附带了JavaScript模拟点击链接的实现方法,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了百度地图API之百度地图退拽标记点获取经纬度的实现代码,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了JS实现横向跑马灯效果代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-04-04
最新评论