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. python 中logging模块

    logging的作用:python中,logging模块主要是处理日志的.所谓日志,可理解为在软件运行过程中,所记录的的一些运行情况信息,软件开发人员可以根据自己的需求添加日志,日志可以帮助软件开发人 ...

  2. mysql查询当前时间，一天内，一周，一个月内的sql语句

    查询一天:select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT * FROM 表名 WHERE TO_DAYS( NOW( ...

  3. BZOJ2321 [BeiJing2011集训] 星器

    2321: [BeiJing2011集训]星器 Time Limit: 1 Sec  Memory Limit: 128 MB Description Magic Land上的时间又过了若干世纪…… ...

  4. 企业项目构建学习（一）maven

    <mirrors> <mirror> <id>alimaven</id> <name>aliyun maven</name> & ...

  5. SQL Server 合并行

    select a.*,b.Organization_Name,c.User_Name sgry,c.renNum,d.User_Name fzr,e.pic_url from dbo.TB_ZYM_L ...

  6. IntelliJ IDEA 快捷键积累

    Windows idea 平时常用快捷键 一.视图查看 Ctrl+F12 查看file,method结构图.类继承机构图(方法,参数,返回值)                Ctrl+shift+Al ...

  7. 一段JS控制TD中图片的大小的代码

    一段JS控制TD中图片的大小的代码 <table><tr><td id="otd"><div></div><img ...

  8. 15.unbuntu下安装vmware-tools

    链接地址:https://blog.csdn.net/yuanxiang01/article/details/78787823

  9. JMeter之Ramp-up Period（in seconds）说明

    Ramp-up Period(in seconds) [1]决定多长时间启动所有线程.如果使用10个线程,ramp-up period是100秒,那么JMeter用100秒使所有10个线程启动并运行. ...

  10. springboot 前后端分离项目跨域配置

    @Configuration @EnableWebMvc public class CorsConfig implements WebMvcConfigurer { @Override public ...