Javascript 我可以为 <h1> 到 <h6> 标签设置 onClick() 事件吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4295679/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I have onClick() event for <h1> to <h6> tags?
提问by Mohamed Saligh
I want to have onClick() event on <h1> to <h6>(any of heading tags) for running some javascript. Please give me some example to have onClick() event in <h1>which shows some alert() message.
我想在<h1> to <h6>（任何标题标签）上有 onClick() 事件来运行一些 javascript。请给我一些例子来<h1>显示一些 alert() 消息的onClick() 事件。
Thanks :)
谢谢 ：）
回答by Joseph Weissman
It's called the inline event registration model. And yes, you cando more or less what you're asking after.
它被称为内联事件注册模型。是的，您可以或多或少地做您想做的事情。
But please don't do this.
但请不要这样做。
It's ancient and reliable, yes. But the drawback is that it requires you to put your JS behaviors into your XHTML structure.
它古老而可靠，是的。但缺点是它需要您将您的 JS 行为放入您的 XHTML 结构中。
You are much better off using the following idiom:
使用以下习语会更好：
element.onclick = doSomething;
In jQuery, this might look something like:
在 jQuery 中，这可能类似于：
$(":header").click(function(){
alert('Handler for .click() called.')
});
Good luck!
祝你好运！
回答by Surreal Dreams
If you're willing to use jQuery, it's easy to handle.
如果你愿意使用jQuery，它很容易处理。
$('h1, h2, h3, h4, h5, h6').click(function(){
//do something on click
});
If you want a different function on each level of header, you can easily do that too:
如果您想要在每个标题级别上使用不同的功能，您也可以轻松地做到这一点：
$('h1').click(function(){
//do something on click
});
$('h2').click(function(){
//do something on click
});
//Etc.
回答by Ken Redler
If you don't want to use a library like jQuery, here's one way to handle it:
如果你不想使用像 jQuery 这样的库，这里有一种方法来处理它：
var tags = ['h1','h2','h3','h4','h5','h6'];
for( var i in tags ){
var these = document.getElementsByTagName(tags[i]);
if( these.length ){
for( var n=0,m=these.length;n<m;n++ ){
these[n].addEventListener('click',function(){
alert('hello');
},false);
}
}
}
Example: http://jsfiddle.net/redler/HvvVQ/
示例：http: //jsfiddle.net/redler/HvvVQ/
As @Shadow Wizard points out in the comments, IE uses attachEventinstead of addEventListener, so to make this work in all browsers, you'll need some code that works both ways. If you want to avoid the rabbit hole of browser differences and verbosity, the same can be accomplished in jQuery like this, for example:
正如@Shadow Wizard 在评论中指出的那样，IE 使用attachEvent代替addEventListener，因此要使其在所有浏览器中都能正常工作，您需要一些双向工作的代码。如果你想避免浏览器差异和冗长的兔子洞，同样可以在 jQuery 中完成，例如：
$('h1,h2,h3,h4,h5,h6').click( function(){
alert('hello');
});
Even more concise, thanks to @Kobi's comment, is :header:
由于@Kobi 的评论，更简洁的是:header：
$(':header').click( function(){...} );
I'd recommend going with a library of your choosing to make this sort of thing much easier.
我建议使用您选择的库来使这种事情变得更容易。
回答by bvenkatr
Code :
代码 ：
<script>
function handleOnClick() {
alert("Clicked on h1 tag");
}
</script>
<h1 onclick="handleOnClick()">
I am h1 tag
</h1>
回答by Asa Richards
Use 'function' keyword to create function() and any code of logic comes inside the script tags.
使用 'function' 关键字创建 function() 并且任何逻辑代码都包含在脚本标签中。
<html>
<head>
<title>Understanding Tags in JS </title>
</head>
<body>
<h1> Welcome to JavaScript Tutorial </h1>
<h2 id = 'h2tag' onclick = "clickedMe()"> Click me to change </h2>
<script>
function clickedMe() {
document.getElementById('h2tag').innerHTML = 'Alas ! I am clicked!'
}
</script>
</body>
</html>
