我可以使用onClick（）事件嗎？ <h1> 至 <h6> 標簽？

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>

我可以使用onClick（）事件嗎？ <h1> 至 <h6> 標簽？

問題描述

5 個解決方案

解決方案1
9 已采納 2010-11-28 06:27:28

解決方案2
9 2010-11-28 06:56:01

解決方案3
1 2010-11-28 06:56:52

解決方案4
0 2017-09-22 12:32:01

解決方案5
0 2017-12-15 06:47:08

我可以使用onClick（）事件嗎？ <h1> 至 <h6> 標簽？

問題描述

5 個解決方案

解決方案1 9 已采納 2010-11-28 06:27:28

解決方案2 9 2010-11-28 06:56:01

解決方案3 1 2010-11-28 06:56:52

解決方案4 0 2017-09-22 12:32:01

解決方案5 0 2017-12-15 06:47:08

解決方案1
9 已采納 2010-11-28 06:27:28

解決方案2
9 2010-11-28 06:56:01

解決方案3
1 2010-11-28 06:56:52

解決方案4
0 2017-09-22 12:32:01

解決方案5
0 2017-12-15 06:47:08