zoukankan      html  css  js  c++  java
  • JS----addEventListener()

    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("我们在一起");
    }
  • 相关阅读:
    excel成绩统计公式
    freebsd Cacti
    图片处理程序
    php 图片水印+文字水印函数,但是不能设置透明
    PHP计算两个时间之差的函数(年,月,周,日,小时,分钟,秒数)
    php图片水印(可以设置透明度)
    使用函数递归实现基于PHP和MySQL的动态树型菜单[转]
    PHP实现MYSQL备份
    FreeBSD备忘录转载
    超级简单但超级实用的 PHP 的 mysql 类
  • 原文地址:https://www.cnblogs.com/liaohongwei/p/9718146.html
Copyright © 2011-2022 走看看