Question

我想在<h1> to <h6>（任何标题标签）上运行onClick（）事件来运行一些javascript。请给我一些示例，让<h1>中的onClick（）事件显示一些alert（）消息。

谢谢：）

Answer 1

它被称为内联事件注册模型。是的，你可以或多或少地做你所要求的事情。

但请不要这样做。

古老而可靠，是的。但缺点是它需要您将JS行为放入XHTML结构中。

使用以下习语会好得多：

element.onclick = doSomething;

在jQuery中，这可能类似于：

  $(":header").click(function(){
     alert('Handler for .click() called.')
   });

祝你好运！

Answer 2

如果你愿意使用jQuery，它很容易处理。

$('h1, h2, h3, h4, h5, h6').click(function(){
    //do something on click
});

如果您想在每个标题级别上使用不同的功能，您也可以轻松地执行此操作：

$('h1').click(function(){
    //do something on click
});

$('h2').click(function(){
    //do something on click
});

//Etc.

Answer 3

如果您不想使用像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);
        }  
    }
}

示例：http://jsfiddle.net/redler/HvvVQ/

正如@Shadow向导在评论中指出的那样，IE使用attachEvent代替addEventListener，因此要在所有浏览器中使用，您需要一些可以双向工作的代码。如果你想避免浏览器差异和冗长的漏洞，可以在jQuery中完成同样的事情，例如：

$('h1,h2,h3,h4,h5,h6').click( function(){
  alert('hello');
});

由于@Kobi的评论，更简洁，是:header：

$(':header').click( function(){...} );

我建议你选择一个你选择的图书馆来使这类事情变得更容易。

Answer 4

代码：

<script>
    function handleOnClick() {
    alert("Clicked on h1 tag");
  }
</script>

<h1 onclick="handleOnClick()">
  I am h1 tag
</h1>

Answer 5

使用'function'关键字创建function（），任何逻辑代码都在script标签内。

<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>

我可以将<h1>的onClick（）事件发送到</h1> <h6>标签吗？</h6>

5 个答案: