zoukankan      html  css  js  c++  java
  • javascript点击兼容所有浏览器封装

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>如何绑定事件处理函数</title>
        <style type="text/css"></style>
    </head>
    <body>
    <div style=" 100px;height: 100px; background-color: red;"></div>
    <script type="text/javascript">
        function addEvent(elem,type,handle) {
            if(elem.addEventListener){
                elem.addEventListener(type,handle,false);
            }else if(elem.attachEvent){
                elem.attachEvent('on'+type,function () {
                    handle.call(elem); //.call()方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)
                })
            }else{
                elem['on'+type] = handle;
            }
        }
        var div = document.getElementsByTagName('div')[0];
        addEvent(div,'click',function () {
            console.log('aaa')
    
        })
        addEvent(div,'click',function () {
            console.log('bbb')
    
        })
    
    </script>
    
    
    </body>
    </html>
    
    <strong>代码说明</strong>
    <div><b>1.</b>obj.addEventListener(type,fn,false)IE9以下不兼容,可以为一个事件绑定多个处理程序</div>
    <div><b>2.obj.attachEvent('on'+type,fn)</b>IE独有,一个事件同样可以绑定多个处理程序</div>
    <div><b>3.</b>ele.onxxx=function(event){}兼容性很好,但是一个元素的同一个事件上只能绑定一个处理程序;基本等同于写在HTML行间上</div>

    效果图:使用原生js,addEventListener,给每个li元素绑定一个click事件,输出他们的顺序?

    1.obj.addEventListener(type,fn,false);

     div.addEventListener(事件类型,处理函数,false);

    如:div.addEventListener('click',function(){},false)

  • 相关阅读:
    hihoCoder #1077 RMQ问题再临-线段树
    ms sql 获取字符串首字母
    如何设置gen_server在退出时执行相关操作
    C++拾遗
    [置顶] Linux下文件和目录权限说明
    Android百度地图之显示地图
    USACO March. 2012
    JNI之HelloWorld
    复习C语言系列二:动态调用函数指针数组
    HDU2527:Safe Or Unsafe(哈弗曼树)
  • 原文地址:https://www.cnblogs.com/huanghuali/p/8576680.html
Copyright © 2011-2022 走看看