js事件绑定/监听
事件绑定/监听的方法
1.直接绑定
顾名思义,直接在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等事件
var ul = document.getElementById('ul')
console.log(ul)
ul.onclick = function() {
console.log('click 事件绑定成功')
}
这种方法最简单,也是DOM level0最早支持的一种方法。但是这个方法存在一个很大的问题。那就是如果一个元素绑定事件时,有可能覆盖掉前面已经绑定好的事件!尤其是存在多个js文件时。为了解决这个问题,level2新增了事件监听
2.事件监听
事件监听实现的功能和直接绑定差不多,但是新增了一个特点。那就是无论监听次,都不会覆盖掉前面的监听事件。本质原因是监听事件每次都会生产一个全新的匿名函数,和前面的函数完全不同,自然不会覆盖。
var ul = document.getElementById('ul')
ul.addEventListener('click', function() {
console.log('事件绑定成功1')
})
ul.addEventListener('click', function() {
console.log('事件绑定成功2')
})
js事件绑定/监听的更多相关文章
- JS 事件绑定,监听,委托(代理)
我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等.这些名词是什么意思呢,有什么作用呢? 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元 ...
- JS 事件绑定、事件监听、事件委托详细介绍
原:http://www.jb51.net/article/93752.htm 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代 ...
- js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写
js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...
- uniapp仿h5+fire自定义事件触发监听
仿h5+fire自定义事件触发监听 uni-app调用 event.js 源码记录(点击查看) 1.js下载地址 [event.js](https://ext.dcloud.net.cn/plugin ...
- 最优-scroll事件的监听实现
1. 背景和目标 前端在监听scroll这类高频率触发事件时,常常需要一个监听函数来实现监听和回调处理.传统写法上利用setInterval或setTimeout来实现. 为了减小 CPU 开支,往往 ...
- MVC框架入门准备(三)事件类 - 事件的监听和触发
在mvc框架中可以看到事件类,实现事件的监听和触发. 举例: <?php /** * 事件类 */ class Event { // 事件绑定记录 private static $events; ...
- PIE SDK矢量数据编辑事件的监听
1.功能简介 通过IEditEvents接口,开发者可以监听到Editor对象的相关的事件,并且做出反应.包括Editor中开始编辑.结束编辑等操作,下面对矢量数据的编辑事件的监听功能进行介绍. 2. ...
- PIE SDK元素事件的监听
1功能简介 元素在操作的过程中,如添加,删除,选中等操作都需要有事件的监听,PIE SDK支持对元素操作事件的监听,下面对元素事件的监听进行介绍. 2功能实现说明 2.1.1 实现思路及原理说明 第一 ...
- Android开发之PullToRefresh的Click点击事件的监听实现长按删除Item
本文为原创博客.出自http://blog.csdn.net/minimicall 到今天为止,搜芽的卖家版本号应该来说已经基本完毕.攻坚克难的一路过来.速度也控制的比較好. 项目过程进度 从任务分配 ...
随机推荐
- HDU 2462 The Luckiest number
The Luckiest number Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Ori ...
- xtu read problem training 2 B - In 7-bit
In 7-bit Time Limit: 2000ms Memory Limit: 65536KB This problem will be judged on ZJU. Original ID: 3 ...
- Cloud BOS平台-自定义用户联系对象
适用业务场景:新增用户时,联系对象类型默认为:职员.客户.供应商.客户需要增加一类"承运商",类型选择"承运商"时,联系对象只显示相应的承运商."承运 ...
- [NOIP2001] 普及组
装箱问题 裸01背包,速刷过 #include<cstdio> #include<iostream> #include<cmath> using namespace ...
- 51nod1184 第N个质数
如题.$n \leq 1e9$. 方法零:二分,然后洲阁筛.要魔改一下的洲阁筛.跑得慢.卡卡能过.没意思. //#include<iostream> #include<cstring ...
- Shell脚本的编写,sed的使用以及一些正则表达式
Shell脚本的简单编写以及sed的使用 标签(空格分隔): 博客文章 前一阵子为了批量修改Web审计规则,故编写了一个Shell脚本,顺便使用了下sed,顺便把正则表达式也重新学习一遍,感觉还是需要 ...
- win10 笔记本猎豹WiFi无法打开
网卡驱动太新了,先把网卡驱动卸载,重新安装一个就可以,用驱动精灵,17.15.0.5版本就可以
- Spring中基于AOP的@AspectJ
以下内容引用自http://wiki.jikexueyuan.com/project/spring/aop-with-spring-framenwork/aspectj-based-aop-with- ...
- 如何在不允许联网的环境下使用Maven开发
前言:Maven的运行机理是:Maven核心组件先去本地的.m2目录下的库中去寻找依赖或者插件,如果本地库里没有,如果配置了私服则上私服去下载依赖或者插件,如果私服上没有,则上中央服务等Maven服务 ...
- OpenGL蓝宝书第七章:立体天空和纹理折射、双纹理(下)
对照了蓝宝书,才知道红宝书的长处. reflect函数的原理在红宝书中有说明,仅仅有对照了红宝书,才知道红宝书的定位:高级工具书. 蓝宝书作为入门级书籍,以较快的速度让读者敲到代码去思考,总遗留了须要 ...