提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

javascript点击兼容所有浏览器封装

JavaScript封装浏览器 所有 点击 兼容
2023-09-14 08:58:23 时间 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>如何绑定事件处理函数</title>
    <style type="text/css"></style>
</head>
<body>
<div style="width: 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)

相关文章