鍍金池/ 問答/HTML/ js 增加鼠標(biāo)點擊監(jiān)聽事件，為什么點擊了無效也不報錯？

js 增加鼠標(biāo)點擊監(jiān)聽事件，為什么點擊了無效也不報錯？

<!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('鼠標(biāo)點解了')
    }
    */


    function show(n)
    {
        console.log('鼠標(biāo)經(jīng)過了')
        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 () {//添加一個單擊事件（單擊時觸發(fā)function函數(shù)）
            show('cs2')
        });
    }else if(cs1.addEventListener) {
        cs1.addEventListener('onclick',function () {//添加一個單擊事件（單擊時觸發(fā)function函數(shù)）
            show('cs2')
        });
    }




</script>



</body>
</html>
回答
編輯回答
歆久

click和onclick是兩種用法，onclick是在html代碼中聲明對此html代碼綁定一個點擊事件，但是在js里面是需要使用click來聲明點擊事件

例如
html: <input type='test' onclick="function();">
js: cs1.attachEvent('onclick',function());

2018年7月14日 21:13
編輯回答
北城荒
<!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('鼠標(biāo)點解了')
    }
    */


    function show(n)
    {
        console.log('鼠標(biāo)經(jīng)過了')
        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 () {//添加一個單擊事件（單擊時觸發(fā)function函數(shù)）
            show('cs2')
        });
    }else if(cs1.addEventListener) {
        cs1.addEventListener('click',function () {//添加一個單擊事件（單擊時觸發(fā)function函數(shù)）
            show('cs2')
        });
    }




</script>



</body>
</html>
2017年12月5日 20:23
編輯回答
伐木累
cs1.attachEvent('onclick',function(){});
//是 click 不是 onclick
cs1.addEventListener('click',function(){});
2018年4月16日 18:24