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. nodejs（log4js）服务中应用splunk进行Log存储、搜索、分析、监控、警告

    标题党,等博主这个月的知识库上传之后再来更新博文

  2. linux问题集

    Too many authentication failures for root (code 2) 原因:服务器可能由于装了一下安全软件导致有时用ssh远程工具登陆不了,提示太多认证失败for ro ...

  3. 使用SQL SERVER PIVOT实现行列转置

    一般我们在使用SQL语句实现行列转置时候,最常用的方法无外乎就是 case语句来实现,但是如果需要需要转置的列太多,那么case起来语句就无限庞大,十分不方便,sql server中的PIVOT就可以 ...

  4. 制作本地yum源

    镜像源是centos当中下载相关软件的地址,我们可以通过制作我们自己的镜像源指定我们去哪里下载impala的rpm包,这里我们使用httpd这个软件来作为服务端,启动httpd的服务来作为我们镜像源的 ...

  5. ROS学习手记 9 -- 阶段性复习

    ROS 阶段性总结 1. 基本概念 ROS 是建立在Linux特别是Ubuntu系统上的一套软件系统,它具有操作系统的特征 ,负责管理各个模块的协同运行.设计初衷主要是面向机器人软硬件开发的特点:多 ...

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

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

  7. 中国大学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 ...

  8. python内置函数使用

    print(abs(1)) #绝对值,正数就是自己 ",''])) #计算可迭代对象中是否为真,其中一个为假,就显示为假 print(all('')) # If the iterable i ...

  9. react-native react-navigation StackNavigator android导航栏 标题下居中

    navigationOptions:({ navigation }) => ({ , textAlign:'center' }}) 如上设置即可,如果有返回箭头,那么右边也要加一个 占位的或者设 ...

  10. delphi面向对象 继承窗体

    delphi继承form TFrmBase = class(TForm) procedure FormShow(Sender: TObject); end; procedure TFrmBase.Fo ...