js 增加鼠标点击监听事件，为什么点击了无效也不报错？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #cs2{
            height: 800px;
            width: 500px;
            background-image: url("./psd001.png");
            text-align: center;
            display: none;
        }

        #cs1{
            height: 350px;
            width: 200px;
        }
    </style>
</head>
<body>

<div id='cs1'>
    <img src="vv.png">
</div>


<div id='cs2'>
    123
</div>


<script>
    /*
    function show()
    {
        console.log('鼠标点解了')
    }
    */


    function show(n)
    {
        console.log('鼠标经过了')
        document.getElementById(n).style.display="block";
    }


    function hide(n)
    {
        document.getElementById(n).style.display="none";
    }

    //document.getElementById('cs1').onmouseover = show('cs2');

    //document.getElementById('cs1').onmouseout=hide('cs2');

    var cs1 = document.getElementById('cs1');
    if(cs1.attachEvent){
        cs1.attachEvent('onclick',function () {//添加一个单击事件（单击时触发function函数）
            show('cs2')
        });
    }else if(cs1.addEventListener) {
        cs1.addEventListener('onclick',function () {//添加一个单击事件（单击时触发function函数）
            show('cs2')
        });
    }




</script>



</body>
</html>

javascript ecmascript-6

阅读 5.2k

3 个回答

阡陌夕殇

cs1.attachEvent('onclick',function(){});
//是 click 不是 onclick
cs1.addEventListener('click',function(){});

痛并快乐着

741217

发布于
2017-12-05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #cs2{
            height: 800px;
            width: 500px;
            background-image: url("./psd001.png");
            text-align: center;
            display: none;
        }

        #cs1{
            height: 350px;
            width: 200px;
        }
    </style>
</head>
<body>

<div id='cs1'>
    <img src="vv.png">
</div>


<div id='cs2'>
    123
</div>


<script>
    /*
    function show()
    {
        console.log('鼠标点解了')
    }
    */


    function show(n)
    {
        console.log('鼠标经过了')
        document.getElementById(n).style.display="block";
    }


    function hide(n)
    {
        document.getElementById(n).style.display="none";
    }

    //document.getElementById('cs1').onmouseover = show('cs2');

    //document.getElementById('cs1').onmouseout=hide('cs2');

    var cs1 = document.getElementById('cs1');
    if(cs1.attachEvent){
        cs1.attachEvent('onclick',function () {//添加一个单击事件（单击时触发function函数）
            show('cs2')
        });
    }else if(cs1.addEventListener) {
        cs1.addEventListener('click',function () {//添加一个单击事件（单击时触发function函数）
            show('cs2')
        });
    }




</script>



</body>
</html>