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. linux学习思维导图（转）

    转自:https://blog.csdn.net/m1585761297/article/details/80017111 先附上一张学习路径的导图 导图一 导图二(一套) 1.Linux目录结构 2 ...

  2. 01-spark基础

    1.定义 Spark是一个由scala语言编写的实时计算系统 Spark支持的API包括Scala.Python.Java .R 2.功能 Spark Core: 将分布式数据抽象为弹性分布式数据集( ...

  3. java根据GPS(经纬度)获取地理位置

    package cn.antiy.weiqing.utils; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONAr ...

  4. jQuery插件——下拉选择框

    其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...

  5. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  6. atom编辑器适用

    因为要在多平台下适用node,同事推荐atom.所以下载了进行试用. 1.下载 https://atom.io/

  7. c#生成cad缩略图或者图片

    struct BITMAPFILEHEADER{public short bfType;public int bfSize;public short bfReserved1;public short ...

  8. ROS学习手记 - 6 使用ROS中的工具:rqt_console & roslaunch & rosed

    http://wiki.ros.org/ROS/Tutorials/UsingRqtconsoleRoslaunch Using rqt_console and roslaunch This tuto ...

  9. 【Excel】绘图案例_常见复合图：簇状图+堆积图+折线图

    前言 最近有朋友让我帮忙用excel画图,老实说我很讨厌用excel画图,点来点去,复杂一些还不能复用,非常繁琐.当然,入门也很简单.需求时不同城市.不同产品的2016和2017销量及环比数据,这应该 ...

  10. java 创建简单工厂模式

    1.抽象类 package com.zpark.service; /** * 定义一个环境接口,所有省治理环境的方式都实现这个接口,并重写治理环境的方法 * @author tong * */ pub ...