JS----addEventListener()
addEventListener() 用于向指定元素添加事件。
可以向一个元素添加多次事件或者多次不同事件,后面的事件是不会覆盖前面的。
语法:
element.addEventListener(event,fn,useCaption );
参数说明:tr件,比如 click mouseenter mouseleave
fn 回调函数
useCaption 用于描述是冒泡还是捕获。默认值是false,即冒泡传递。
当值为true,就是捕获传递。
示例代码:
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>addEventListener</title>
<script type="text/javascript" src="js/jquery-3.0.0.js"></script>
<style type="text/css">
#content {
width: 100px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 50px
}
</style>
</head> <body>
<div id="content">点击</div>
<script type="text/javascript">
//addEventListener 用于向指定元素添加事件句柄
//可以向一个元素添加多次点击事件,后一个点击事件不会覆盖前一个点击事件 var content = document.getElementById("content");
content.addEventListener("click", function () {
alert("支持此方法1");
console.log("11");
}, false)
content.addEventListener("click", function () {
alert("支持此方法2");
console.log("22");
add();
}, false)
content.addEventListener("mouseenter", add, false);
function add() {
console.log("我和你");
}
content.removeEventListener("mouseenter", add, false);
var content = document.getElementById("content");
if (content.addEventListener) {
content.addEventListener(event, add);
} else if (content.attchEvent) {
content.attchEvent(event, add);
} 123456 function add() {
console.log("我们在一起");
}
</script>
</body> </html>
注意:
- removeEventListener() 不能移除匿名函数,像上面add()这种是可以的。
- IE8及更早版本和Opear 7.0及更早版本不支持addEventListener()和removeEventListener(),对于这类浏览器我们可以使用detachEvent()来移除事件。
element.detachEvent(event,fn);
- 1
跨浏览器解决方案:
var content = document.getElementById("content");
if(content.addEventListener){
content.addEventListener(event,add);
}else if(content.attchEvent){
content.attchEvent(event,add);
}
function add(){
console.log("我们在一起");
}
JS----addEventListener()的更多相关文章
- js addEventListener事件多次绑定问题
如果为了避免 js addEventListener事件多次绑定问题,可以使用.onclick直接绑定,后一次click绑定会覆盖调前一次.
- js,addEventListener参数传递
解决方法 因为i相对匿名函数是外面的变量,就把循环绑定的时候,将i的值传入到匿名函数内,就可以了.因此需要在匿名函数(事件函数)外包裹一个匿名函数, 并立即执行. var elems = docume ...
- js addEventListener attachEvent
attachEvent方法,为某一事件附加其它的处理事件.(不支持Mozilla系列) addEventListener方法 用于 Mozilla系列 举例: document.getElementB ...
- 一道JS addEventListener面试题
在园里看到一道面试题,<div id="test">Click Here</div> var node=document.getElementById('t ...
- js addEventListener调用传参函数
先看这段代码 function abc(key){ console.log(key); } for(let i=0;i<oInput.length;i++){ oInput[i].addEven ...
- js addeventlistener 刮刮贴
<!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...
- addEventListener attachEvent和解决IE 6 7 8 this指向错误
[JS] addEventListener attachEvent和解决IE 6 7 8 this指向错误 电梯直达 1# php 发表于 2014/4/13 01:17 | 只看该作者 ...
- chrome-extension & inject.js
chrome-extension & inject.js chrome-extension://gppongmhjkpfnbhagpmjfkannfbllamg/js/inject.js in ...
- 当前端也拥有 Server 的能力
今天看了不少文章,比较感兴趣的是 Cache API.它是浏览器 Request/Response 的缓存管理工具,其使用风格和运用场景让我瞬间联想到了 ServiceWorker 和 Fetch A ...
- Web Worker javascript多线程编程(一)
什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...
随机推荐
- 变量,if.elif .else判断
一,计算机的了解 基本组成:主板+cpu+内存 cpu: 主频, 核数(16) 内存:大小(8G, 16G, 32G) 型号: DDR3, DDR4, DDR5, 主频(海盗船,玩家国度) ...
- CentOS网络设置 couldn't resolve host 'mirrorlist.centos.org问题解决
在VBox上安装完CentOS6.5之后,首次使用时yum命令安装软件时,经常遇到"couldn't resolve host 'mirrorlist.centos.org"这个问 ...
- access oarcle
1 默认值2 自动增加字段3 now() time() date() 更改sysdate4 datediff5 保留字 date 名字段6isnull(rowname)要改成rowname = nul ...
- 重识linux-linux系统服务相关
重识linux-linux系统服务相关 1 tcp wrappers 特殊功能 应用级防火墙 2 系统开启的服务查看 top,ps 命令 3 查看系统启动的服务 1) 找到目前系统开启的网络服务 n ...
- sqlserver数据库授权操作
https://www.jb51.net/article/126432.htm 系统需求简介 最近一直在做高校云平台这个项目,我们小组做的是其中的一个子系统是成绩管理系统,不同于之前的开发方式,本次我 ...
- mysql高级聚合
GROUP_CONCAT() 函数的值等于属于一个组的指定列的所有值,以逗号隔开,并且以字符串表示 mysql> select sex,group_concat(level) from role ...
- java json字符串与对象转换
下载引入包gson-2.0.jar 1.字符转数据 final Map map = new HashMap();map.put("contents", "[{\&q ...
- leetcode984
public class Solution { private string M1(int A, int B) { StringBuilder sb = new StringBuilder(); ; ...
- 字符串流stringReader
String info ="good good study day day up";StringReader stringReader = new StringReader(inf ...
- centos如何安装jdk8
首先下载jdk1.8 去官网下载jdk:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151. ...