JavaScript オブジェクト指向 イベントハンドラ
addEventListenerでJavaScrtiptとHTMLを分離する
DOM操作(document.getElementById()等)でHTMLのnodeをJavaScriptに渡す。
loading...
リンクタグにイベントハンドラを関連付けるときは標準のアクション(リンク先に飛ぶ)を無効化する。
linkdocumnetの読み込みとイベント起動の順番
起動が早い順
- window.onload
- document.body.onload
- $(document).ready, $(function(){});
- document.addEventListener( "DOMContentLoaded", loadedFunc, false );
実際にこのページでのイベント起動順確認したいときはDeveloper toolでconsole.log を参照してください。
通常のHTMLにおいてonloadイベント取得はwindowやdoumentのみ。
画像のonloadイベント取得はJavaScript側でnew Image()宣言した要素に大して可能。
- tacshiss:jQueryのCDNの応答速度を計測してみた。 jQuery本家Googleが110ms, Microsoftが3ms. ……Microsoftさんはやいっスね。まぁ呼び出す環境・地域に寄るだろうけど、参考にさせてもらおう。 [http://twitter.com/tacshiss/status/76216415639699456]
- tacshiss:ちなみに両方書くとdocument.body.onload が優先され、 <body onload=""> のほうは無効化されます。 まぁ普通は window.onload と書く。 [http://twitter.com/tacshiss/status/76212975110852608]
- tacshiss:「onloadが$(document).rady()より起動が遅い」といったが、それはHTML内に <body onload="">と書いた場合。 JavaScript内で document.body.onload=load(); した場合は jQueryより先に発火する。 [http://twitter.com/tacshiss/status/76212246669299712]
view source
JavaScript
/*!
* hi0a.com
* Copyright 2010- by t_hida All rights Reserved.
*/
/*
******** ******** ******** ******** ******** ******** ******** ********
*/
document.addEventListener( "DOMContentLoaded", loadedFunc, false );
function loadedFunc(){
console.log('DOMContentLoaded');
}
/*
******** ******** ******** ******** ******** ******** ******** ********
*/
$(function(){
console.log('jQuery ready');
});
$(document).ready(function(){
console.log('$(document).ready');
});
/*
******** ******** ******** ******** ******** ******** ******** ********
*/
var btn = document.getElementById('btn');
var link = document.getElementById('link');
window.onload=init();
document.body.onload=load();
if(document.addEventListener){
console.dir(btn);
btn.addEventListener('click', myHandler, false);
//無名関数を使うと引数を渡すことができる
//無名関数に引数を渡すと、eventオブジェクトでイベント発火時のマウスの位置などを取得できる
var a = 'link';
var url = link.getAttribute('href');
var func = function(a, url ,x){
console.log('link:' + a + url + x);
}
link.addEventListener('click', function(e){
e.preventDefault(); //リンク無効化
var lx = e.layerX; // ブラウザ内のマウスカーソルのX座標
var ox = e.offsetX; // 要素内のマウスカーソルのX座標
func(a, url, ox);
}, false);
}
function init(){
console.log('window.onload init()');
}
function load(){
console.log('document.body.onload');
var msg= document.getElementById('msg');
msg.innerHTML = 'load!';
}
function myHandler(e){
var src;
e = e || window.event;
src = e.target || e.srcElement;
src.innerHTML = 'clicked!';
console.log(src.innerHTML);
}
/*
******** ******** ******** ******** ******** ******** ******** ********
*/
var Item = function(){
this.ele = document.getElementById('item');
this.is_toggle = false;
}
Item.prototype = {
handler : function(e){
var src;
e = e || window.event;
src = e.target || e.srcElement;
if(this.is_toggle){
src.innerHTML = 'OFF';
} else {
src.innerHTML = 'ON';
}
this.is_toggle = !this.is_toggle;
console.log(src.innerHTML);
}
}
var item = new Item();
if(document.addEventListener){
console.dir(item);
item.ele.addEventListener('click', item.handler, false);
}
/*
******** ******** ******** ******** ******** ******** ******** ********
*/
var imgs = document.getElementsByTagName('img');
imgs.onload = function(){
console.log('imgs.onload'); // 機能しない
}
var img = new Image();
img.src = "logo-jquery-215x53.gif";
img.onload = function(){
console.log('img.onload');
}
/*
******** ******** ******** ******** ******** ******** ******** ********
*/
CSS
#demo button{
width:200px;
height:60px;
}
#demo ul,ol{
margin:20px;
}
#demo ul li,ol li{
list-style-type:disc;
margin:6px 0px;
}
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/demo/-js/js-event-handler/
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。