js事件监听的几种方式
2016-12-13 00:00
183 查看
js作为事件驱动的语言,那对事件的监听必不可少,那么在前端浏览器中有几种事件监听的方式呢。
该方式的缺点就是和html耦合高,尽量少使用
该方式的缺点是只能绑定一个回调函数,如果想要绑定多个则无法实现,必须通过下面的注册事件监听函数的方式
可以添加任意多个监听函数,同时触发,当有耗时操作时,将耗时和非耗时操作区分开来效果比较明显
注:事件监听函数的格式
1.html内联属性
<button type="button" onclick="alert('hello'')"></button>
该方式的缺点就是和html耦合高,尽量少使用
2.dom属性绑定
<div class="title"> hello </div> var obj = document.getElementByClassName('title'); obj .onclick = function() { alert('hello'); }
该方式的缺点是只能绑定一个回调函数,如果想要绑定多个则无法实现,必须通过下面的注册事件监听函数的方式
3.使用事件监听函数
<div class="title"> hello </div> var obj = document.getElementByClassName('title'); obj .addEventListener('click', function() { alert('hello'); }, false); obj .addEventListener('click', function() { console.log('hello'); }, false);
可以添加任意多个监听函数,同时触发,当有耗时操作时,将耗时和非耗时操作区分开来效果比较明显
注:事件监听函数的格式
相关文章推荐
- jquery同一标签绑定多个事件的几种方式 && js实时监听input中值变化
- js 事件模型中不同浏览器的监听和解除监听方式参考
- iOS-监听触摸事件的几种方式
- js事件绑定的几种方式
- JS的几种事件表示方式
- 用js给div绑定事件,实现点击切换效果的几种方式总结
- js中事件绑定的几种方式
- JS与JQ绑定事件的几种方式.
- 监听事件的几种实现方式
- Node.js-事件模块(events)之监听方式
- 表单input添加js事件的几种方式
- js给html加载事件的几种常用方式
- 简单介绍JS/JQuery绑定事件的几种方式
- js事件绑定的几种方式与on()、bind()的区别
- ℃江让您从精通到入门:OnClick事件监听的几种方式
- 蛙蛙推荐:JS里声明事件处理的几种方式
- GIS-ArcGIS JS API FeatureLayer图层绑定事件的几种方式
- JS阻止事件冒泡的几种方式
- js事件绑定的几种方式
- Js绑定事件的几种方式