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. MongoDB Shell 常用操作命令

    MonoDB   shell命令操作语法和JavaScript很类似,其实控制台底层的查询语句都是用javascript脚本完成操作的. Ø 数据库 1.Help查看命令提示 help db.help ...

  2. tornado-版本迁移工具alembic

    pip install pymysql pip install sqlalchemy pip install alembic 1.connect db_config.py #coding=utf-8 ...

  3. oracle 服务名 数据库名 实例名

    服务名 show parameter service_name 实例名 show parameter instance 数据库名 show parameter db conn username/pas ...

  4. 使用wifi ssh: connect to host hadoop000 port 22: No route to host

    使用的wifi,在wifi下IP会自动分配. 先尝试能否ping通,如果都无法ping通那先把IP配置那些先搞定ping通之后遇到此问题再来尝试解决. 查看  /etc/hosts 中配置的 IP  ...

  5. 写了一个bug----使用已经被删除的内存

    #include <iostream> #include <stdio.h> #include <memory.h> using namespace std; ; ...

  6. 代码： html 页面小效果 （集合，待补充）

    标签切换(下部内容区跟着切换): 2016-6-2 <script type="text/javascript" src="http://cdn.bootcss.c ...

  7. 《汇编语言 基于x86处理器》第十章 - 运行一个 16位实地址汇编程序

    ▶ 书上第 10 章,主要讲了宏,引用了一个 16 位实地址的程序,从代码开始到运行 ● 代码 ; main.asm INCLUDE Macros.inc IF IsDefined( RealMode ...

  8. PropertiesUtils

    package com.icil.elsa.subscribe.milestone.common.utils; import java.io.BufferedInputStream; import j ...

  9. Word，excel开发指南

    New Document dfsdfds &dsfds &sdf; dsf dsf dsfds fsdfdsfdsf dsfs dsfds dsf dsfd sfds   sdf fd ...

  10. 机器学习进阶-图像形态学操作-梯度运算 cv2.GRADIENT(梯度运算-膨胀图像-腐蚀后的图像)

    1.op = cv2.GRADIENT 用于梯度运算-膨胀图像-腐蚀后的图像 梯度运算:表示的是将膨胀以后的图像 - 腐蚀后的图像,获得了最终的边缘轮廓 代码: 第一步:读取pie图片 第二步:进行腐 ...