Могу ли я иметь событие onClick () для тегов <h1> до <h6>? - PullRequest
Новая
       5

Могу ли я иметь событие onClick () для тегов <h1> до <h6>?

6 голосов
/ 28 ноября 2010

Я хочу иметь событие onClick () для <h1> to <h6> (любой из тегов заголовка) для запуска некоторого JavaScript.Пожалуйста, приведите пример использования события onClick () в <h1>, которое отображает некоторое сообщение alert ().

Спасибо:)

Ответы [ 5 ]

9 голосов
/ 28 ноября 2010

Если вы хотите использовать 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.
9 голосов
/ 28 ноября 2010

Это называется встроенной моделью регистрации событий. И да, вы можете делать более или менее то, что вы просите после.

Но, пожалуйста, не делайте этого.

Это древний и надежный, да. Но недостатком является то, что вам требуется поместить поведение JS в структуру XHTML.

Вам гораздо лучше использовать следующую идиому: 

element.onclick = doSomething;

В jQuery это может выглядеть примерно так: 

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

Удачи!

1 голос
/ 28 ноября 2010

Если вы не хотите использовать такую ​​библиотеку, как 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 Wizard вкомментарии, IE использует attachEvent вместо addEventListener, поэтому, чтобы это работало во всех браузерах, вам понадобится код, который работает в обоих направлениях.Если вы хотите избежать кроличьей дыры в различиях и многословии браузера, то же самое можно сделать в jQuery, например: 

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

Еще более кратко, благодаря комментарию @ Kobi, это :header: 

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

Я бы порекомендовал вам воспользоваться библиотекой по вашему выбору, чтобы сделать подобные вещи намного проще.

0 голосов
/ 15 декабря 2017

Используйте ключевое слово '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>
0 голосов
/ 22 сентября 2017

Код: 

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

<h1 onclick="handleOnClick()">
  I am h1 tag
</h1>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...