我有以下代码
<!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元素标记本身中提到处理程序方法，都是一样的吗？
通过document.getElementById('myElement').onclick或$('#myElement').on(...)将事件处理程序附加到元素时，它不会设置或更改元素的onClick属性。它只是附加内部处理程序。
要更改元素的onClick属性，必须使用$(elem).attr('onClick','click_handler_func');。然后这个属性将显示在DOM检查器中。
我看到了一些错误。
- 最好将函数绑定到document.ready调用中；那么只有在DOM完全准备好之后，它才会被绑定
- 绑定时使用封口
这应该可以做到：
function changeColorOnClick()
{
console.log("changed color");
}
$(document).ready(function(){
var pTag=$('p');
pTag.on('click',function(){changeColorOnClick();});
});