Home > スポンサー広告 > User JavaScriptの練習 - clickイベント

スポンサーサイト

スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/40-92030dee
Listed below are links to weblogs that reference
スポンサーサイト from Karafuto Blog

Home > スポンサー広告 > User JavaScriptの練習 - clickイベント

Home > user javascript > User JavaScriptの練習 - clickイベント

User JavaScriptの練習 - clickイベント

user javascript

Opera User JavaScriptを分からん人間が練習してます。

クリックが行われたら、ダイアログを表示する

// ==UserScript==
// @include *
// @exclude 
// ==/UserScript==

document.addEventListener('click', function() {
    alert('click!');
    event.stopPropagation();
    event.preventDefault();
}, false);

addEventListener()でクリックされたら関数を実行する。

event.stopPropagation()はイベント伝播の中止。event.preventDefault()は要素のデフォルトの動作を妨げる。


リンクがクリックされたら、ダイアログを表示

リンクをクリックしたら、イベントの名前、リンクのアドレスを表示する。

// ==UserScript==
// @include *
// @exclude 
// ==/UserScript==

document.addEventListener('load', function() {

    var a = document.getElementsByTagName('a');
    for ( var i=0; i<a.length; i++) {
        // クリックイベントのリスナーをセット
        a[i].addEventListener('click', function() {
            var message = 'event - ' + event.type + '\r\n' + 'address - ' + this.href ;
            alert(message);
            event.stopPropagation();
            event.preventDefault();
        }, false);
    }
}, false);
  1. getElementsByTagName()で a要素のノードリストを取り出す。
  2. AddEventListener()で 1.のノード全てにイベントリスナーを登録して、 a要素をクリックしたら関数を実行するようにする。

eventからイベントの情報が得られる。thisにイベントが起きたオブジェクトが渡される。

eventのプロパティ、メソッドのことはDOM:event - MDCに書かれている。OperaはDOM 2 Eventにある。

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/40-92030dee
Listed below are links to weblogs that reference
User JavaScriptの練習 - clickイベント from Karafuto Blog

Home > user javascript > User JavaScriptの練習 - clickイベント

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。