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()的更多相关文章

  1. js addEventListener事件多次绑定问题

    如果为了避免 js addEventListener事件多次绑定问题,可以使用.onclick直接绑定,后一次click绑定会覆盖调前一次.

  2. js,addEventListener参数传递

    解决方法 因为i相对匿名函数是外面的变量,就把循环绑定的时候,将i的值传入到匿名函数内,就可以了.因此需要在匿名函数(事件函数)外包裹一个匿名函数, 并立即执行. var elems = docume ...

  3. js addEventListener attachEvent

    attachEvent方法,为某一事件附加其它的处理事件.(不支持Mozilla系列) addEventListener方法 用于 Mozilla系列 举例: document.getElementB ...

  4. 一道JS addEventListener面试题

    在园里看到一道面试题,<div id="test">Click Here</div> var node=document.getElementById('t ...

  5. js addEventListener调用传参函数

    先看这段代码 function abc(key){ console.log(key); } for(let i=0;i<oInput.length;i++){ oInput[i].addEven ...

  6. js addeventlistener 刮刮贴

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  7. addEventListener attachEvent和解决IE 6 7 8 this指向错误

    [JS] addEventListener attachEvent和解决IE 6 7 8 this指向错误   电梯直达 1#    php 发表于 2014/4/13 01:17 | 只看该作者  ...

  8. chrome-extension & inject.js

    chrome-extension & inject.js chrome-extension://gppongmhjkpfnbhagpmjfkannfbllamg/js/inject.js in ...

  9. 当前端也拥有 Server 的能力

    今天看了不少文章,比较感兴趣的是 Cache API.它是浏览器 Request/Response 的缓存管理工具,其使用风格和运用场景让我瞬间联想到了 ServiceWorker 和 Fetch A ...

  10. Web Worker javascript多线程编程（一）

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

随机推荐

  1. 普通rgb转换为16进制

    http://www.zhangxinxu.com/study/201003/color-exchange-test.html

  2. python ftp文件夹文件递归上传推送

  3. Linux系统Oracle启动、关闭

    Linux系统启动Oracle命令 su - oracle sqlplus /nolog conn / as sysdba startup exit lsnrctl start exit Linux系 ...

  4. Objective-C中Block的常见用法

    typedef int(^AddValue)(int,int); int main(int argc, const char * argv[]) { @autoreleasepool { //1:NS ...

  5. 中国大学mooc直播回放看这里哦http://www.icourse163.org/forum/1001974001/topic-1003372881.htm?sortType=1&pageIndex=1

    中国大学mooc直播回放看这里哦http://www.icourse163.org/forum/1001974001/topic-1003372881.htm?sortType=1&pageI ...

  6. [记录] CSS 多行文本超出部分省略

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览 <p style="width: 30 ...

  7. 静态方法@staticmethod

    staticmethod 返回函数的静态方法.该方法不强制要求传递参数,名义上在类里面归类管理,但是不能使用类的变量和实例的变量是类的工具包 如下声明一个静态方法: class Room: t = 1 ...

  8. day44-pymysql模块的使用

    pymysql模块的使用 本节重点: pymysql的下载和使用 execute()之sql注入 增.删.改:conn.commit() 查:fetchone.fetchmany.fetchall 一 ...

  9. js乱码问题解决

    乱码有可能出现在下面两种情况 1.高级浏览器直接访问js路径 2.jsp引用js 针对上述两种情况的解决方式: 1.查看设置浏览器的字符集 2.查看web服务器的字符集,比如Tomcat 配置UTF- ...

  10. 我要重新开始学习C++了！

    C++实在是博大精深!之前总不想读厚厚的C++ Primer. 然而,现在的水平真的只是初学者!只是因为写的代码太简单,所以没有用到一些特性.可以说还是门外汉! 写笔记!