Question

我有以下代码

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
    <title>
        HelloWorld JQuery   
    </title>
</head>
<body>
<p>
    Lets play around with JQuery
</p>
</body>

<script >

    function changeColorOnClick()
    {
        console.log("changed color");
    }
    var pTag=$('p');
    pTag.on('click',changeColorOnClick);
</script>
</html>

事件监听器工作正常，但是当我在浏览器中检查元素时，p标记没有关联的onClick属性，为什么会这样？是否通过脚本绑定侦听器或在html元素标记本身中提及处理程序方法是不是一样？

Answer 1

通过document.getElementById('myElement').onclick或$('#myElement').on(...)将事件处理程序附加到元素时，它不会设置或更改元素的onClick属性。它只是附加内部处理程序。

要更改元素的onClick属性，必须使用$(elem).attr('onClick','click_handler_func');。然后，此属性将显示在DOM检查器中。

Answer 2

我看到了一些错误。

最好在document.ready call中绑定该函数;然后，只有在DOM完全准备好后它才会被绑定
绑定时使用闭包。

这应该这样做：

function changeColorOnClick()
{
    console.log("changed color");
}

$(document).ready(function(){
    var pTag=$('p');
    pTag.on('click',function(){changeColorOnClick();});
});

通过Jquery添加onClick listerner和通过html onclick属性之间的区别

2 个答案: