我可以使用onClick()事件吗? to tags?

问题描述 投票:6回答:5

我想在<h1> to <h6>(任何标题标签)上运行onClick()事件来运行一些javascript。请给我一些示例,在<h1>中显示onClick()事件,该事件显示一些alert()消息。

谢谢 :)

javascript html onclick
5个回答
9
投票

它被称为内联事件注册模型。是的,你可以做更多或更少的事情。

但请不要这样做。

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

你最好使用以下习语:

element.onclick = doSomething;

在jQuery中,这可能看起来像:

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

祝好运!


9
投票

如果你愿意使用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.

1
投票

如果你不想使用像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(){...} );

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


0
投票

代码:

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

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

0
投票

使用'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>
© www.soinside.com 2019 - 2024. All rights reserved.