JavaScriptでevent.srcElementの動的設定方法は?

このQ&Aのポイント
  • JavaScriptのfunction内で、event.srcElementの値を上書きする方法について教えてください。
  • event.srcElementを動的に設定する場合、普通に「event.srcElement = document.getElementById('a');」と書くとスクリプトエラーが発生します。
  • IE6(SP2)で単体テストを行っている際に、event.srcElementを動的に設定し、各種パターンの検証を行いたいです。
回答を見る
  • ベストアンサー

event.srcElementの動的設定

JavaScriptのfunction内で、event.srcElementの値の上書きする方法についてご存知の方がいれば教えていただけないでしょうか? 普通に「event.srcElement = document.getElementById("a");」(※1)等と書くとスクリプトエラーが発生してしまいます。 ※1 例えば事前に<input type="text" id="a" value="aval" />等をBody内に定義しています。 やりたいことは、IE6(SP2)で、JsUnitという(JUnitのJavaScript版)単体テストツールを使用した、JavaScriptの単体テストを行っているのですが、テスト対象のfunction内でevent.srcElementを参照しており、event.srcElementを入力条件の1つとして有効値、無効値の各種パターン(例えば、undefined、null、inputタグElement、selectタグElement等)を検証するために値を動的に設定することです。 プロジェクトの単体テストで可能な限りJsUnitを使用する方針があるのですが、無理なら例外的にJsUnitを使用せずにテストと思っているので、困り具合はそれほど高くありません。 よろしくお願いいたします。

  • estmo
  • お礼率36% (4/11)

質問者が選んだベストアンサー

  • ベストアンサー
  • Chaire
  • ベストアンサー率60% (79/130)
回答No.2

document.getElementById("a").fireEvent("onclick") で #a を srcElement とする "click" が発火します。 また、elt.onclick のようなレガシープロパティではなく attachEvent() または HTML の onclick 属性を使っており、かつイベントハンドラがイベントオブジェクトを第一引数に受け取るようきちんと定義しているなら、 handleEvent({ type: 'click', srcElement: null }) のような疑似イベントオブジェクトを渡すだけで、テストとしては十分機能するのではないでしょうか。仮に外からイベントハンドラが見えないとしても、JScript には条件コンパイルがあるので、 //@cc_on@set@test=1 (function () {  function handleEvent (e) {   var se = e.srcElement;  }    //@if(@test)window.handleEvent = handleEvent;@end }) (); function testHoge() {  handleEvent({ srcElement: undefined }); } のようにテスト時だけ API を生やせば良い。テストが終わって @test=0 にすれば、その行は完全にコメントとして無視されます。これのおかげで、IE は非常にテスト・トレースしやすい環境のはずです。

estmo
質問者

お礼

「fireEvent」で解決しました。 引数なしのイベントハンドラであるため後者の方法は使えませんが、条件コンパイルについては知らなかったので、勉強になります。 ちょうどJsUnitによるテスト時のみ有効にしたいfunction等があったので、活用できそうなら活用してみます。 ありがとうございました。

その他の回答 (1)

  • think49
  • ベストアンサー率59% (285/482)
回答No.1

event.srcElement は読み込み専用です。別の値を書き込むことは出来ません。 http://msdn.microsoft.com/ja-jp/library/cc410014.aspx

関連するQ&A

  • イベントハンドラに設定された関数を取得し、実行するには?

    <html>   <body>     <script language="JavaScript" type="text/javascript">       function test(){         alert("testです")       }     </script>     <input id="btntest" type="button" value="test" onclick="test()"/>   </body> </html> このhtml文書に対し、 ・test(); ・document.getElementById("btntest").click;(ByTagName等を使用しても同じ方法とする) 上記方法以外にJavaScriptを用いて、 test()を実行するにはどうすればよいでしょうか? var eventobj = document.getElementById("btntest").onclick; eval(eventobj); 上記みたいな形でevalをよくわからずに試してみましたがダメでした。

  • イベントハンドラを外部ファイルに分離させた時のevent.target

    イベントハンドラを外部ファイルに分離させた時のevent.target||event.srcElementの挙動について質問です。お願いします。xhtmlの<div>に直接書いていたeventハンドラを外部に分離しました。 JavaScript ------------------------------ function Test() { var n = document.getElementsByTagName('div')[0]; n.onmouseover = function() { var m = event.target||event.srcElement; var j = m.tagName; alert(j); } } $(function() { Test(); }); ------------------------------ xhtml ------------------------------ <div> <p><img src="img01.png" width="300" height="300" /></p> </div> ------------------------------ n.onmouseover後のfunction()ですが、FireFoxで動きません。 function()をfunction(event)にするとFireFoxで動くようになりますが、IEで動かなくなります。 FireFox、IE両方動くようにするにはどういう記述にしたらいいでしょうか?

  • onchangeイベントを強制的に発生させる

    お世話になります。 onchangeイベントをjavascriptで強制的に動作させたいと思っております。 発生させたい場合 ・ユーザーがtextボックスを入力 ・リンクボタンを押下した場合 簡単なことなのかもしれませんが、 ご教授よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <script type="text/javascript"> function change(){ alert('test'); } function update(){ document.getElementById('1').value = "update"; document.getElementById('1').onchange = change; } </script> <input id="1" type="text" value="1" onchange="change();"> <a href="javascript:update();">update</a>

  • ロード後にイベントをセットしたい

    初めからタグに埋め込まないで、ロード後にイベントをセットしたいと思い、 データを送信してからonCompleteの関数の中に記述しました。 ちゃんとonCompleteの中に来ていることは確認できたのですが、 idがtestのタグをクリックしても反応がありません。 以下のプログラムのどこがいけないのでしょうか? <script type="text/javascript" src="prototype.js"></script> function post_data() { new Ajax.Request( "test.php", { method: "get", parameters: "test=aa", onComplete: function(httpObj){ var obj = document.getElementById("test"); obj.onClick = sample; } } ); } function sample() { alert("aa"); } window.onload = function() { post_data(); } <a href="" id="test">test</a>

  • POSTされた値でイベント実行

    フォームからpostされたときに、特定の値が入っているときのみJavaScriptにてイベントを発生させたいのですが、どのようにすればいいのかわかりません。 <form action="#" method="post" name="test"> <input type="checkbox" name="a" value="1"> <input type="submit" name="submit" value="送信"> </form> このようなソースの場合でsubmit後、aに値が入っている場合のみイベントを発生させたいと考えています。そのようなことは出来ますしょうか? よろしくお願いします。

  • JavaScriptのイベントハンドラ設定の方法

    要素(aタグなど)にイベントハンドラを設定する場合、 直接onclick等を書かずにaddEventListenerで追加するのが良いと聞きました。 しかしIEでは使えず、attachEventで設定する必要があります。 htmlとJavaScriptを分離するという意味では理解できるのですが、 http://java-script.seesaa.net/category/2504769-1.html の用に document.getElementById("hoge").onclick = function("hogehoge"); とする方が楽なんじゃないでしょうか? IEでもFirefoxでも動くので、addEventListenerの用にブラウザ毎に書く必要もありません。 前者を使うメリットは何なのでしょうか?

  • formのsubmitイベントの発生についての質問です。

    formのsubmitイベントの発生についての質問です。 あるところで、「form.submit() は submit イベントを発火しない」 とあったので、 ↓のscriptで、formのsubmitイベントを調べていました。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>SessionTestNext</title> <style type="text/css"></style> <script type="text/javascript"> function send1(elm){  elm.form.submit(); } function send2(){  document.getElementById("form1").submit(); } if('undefined' !== typeof document.addEventListener){  document.addEventListener('submit', function(event){   var target = event.target;   alert(target.id);  }, false); } else if ('undefined' !== typeof document.attachEvent){  document.attachEvent('onSubmit', function(event){  var target = event.srcElement;  alert(target.id);  }); } </script> </head> <body> <p>SessionTestNext 1 </p> <form id="form1" action="/php/session2.php" method="post" onsubmit="alert('Submited!');return false;"> <input type="text" name="parm2" value="fugafuga"> <input type="submit" value="サブミット"> <button onclick="send1(this)">Javascriptサブミット(1)</button> </form> <button onclick="send2()">Javascriptサブミット(2)</button> </body> </html> だのに、 send1()を実行した時は、イベントが検知され'Submited!'がアラートします。 ただし、onsubmitのハンドラーでfalseを返してるので、サブミットしません。 send2()を実行した時は確かに、submitイベントは発生せず、'Submited!'の アラート無しで、実際サブミットされます。 documentにaddEventListenerで追加したハンドラーの方でも、send1()の 時だけ検知され'form1'がアラートします。  send1()で検知されるのは何故でしょう? また、IEでも同様の動作なんですが、何故か document.attachEvent('onsubmit', の方が、まったく動きません。(タイポかも)

  • JavaScriptでエレメントのIDを取得

    JavaScriptで、エレメントのIDを取得する方法がわからず困っています。 [画像]ここをクリック [画像]ここをクリック 上記が画面配置のイメージなのですが、「ここをクリック」の文字をクリックした時に、そのクリックされた<a>タグのIDを取得したいのです。 以下が試行錯誤したソースの一部です。 [html] <img src="./test_01.gif" name="testImg01"> <a href="javascript" id="test_01" onclick="getID(this);">ここをクリック</> <img src="./test_02.gif" name="testImg02"> <a href="javascript" id="test_02" onclick="getID(this);">ここをクリック</a> [JavaScript] function getID(element) { var id = document.getElementById(id); alert(id); } 上記コードで得られたのは「null」という値でした。 色々検索してはいるのですが、思うように値を取得できません。 どうか知恵をお貸しください。

  • jQueryで設定したイベントハンドラが消える

    jQueryについての質問です。 ちょっと言葉での説明が難しいので、具体的なコードを記載します。 === JavaScript === var clicked = function () { alert(1); }; var jqButton = $("<input type='button' value='test' />"); jqButton.click(clicked); $(function() { $("#showButton").click(function () { $("#test").html(jqButton); }); $("#hideButton").click(function () { $("#test").html(""); }); }); === HTML === <input type="button" id="showButton" value="show" /> <input type="button" id="hideButton" value="hide" /> <div id="test"></div> showボタンをクリックすると、testボタンが表示されます。 hideボタンをクリックすると、testボタンが消えます。 testボタンをクリックすると、alert(1) が実行されます。 という内容なのですが、一度hideしてから再度showして現れたtestボタンをクリックしても、 何も起きません。 仮に、jqButton.click(clicked); の部分を、 jqButton[0].attachEvent("onclick", clicked); などにすると、再表示させたtestボタンも動作します。 これはjQueryのイベントハンドラ設定APIを使った時特有の症状だと思うのですが、 なぜこのような結果になるのでしょうか。 てっきり、$.click()でイベントハンドラを設定すると、 内部でattachEventとかaddEventListnerとかが走るだけだと想像してましたが・・・ また、attachEventなど使わずに、jQueryの機能を使って、 再表示させてtestボタンも動作させるには、どうしたらいいでしょうか。 ご存知の方いましたら、お願い致します。

  • ブラウザに応じたJavaScriptの書き方

    divの中にp、 pの中にspan、 spanの中にinputがあるとして、 クリックしたらそれぞれの要素のタグををalertで表示させたいとき、 (例1) <div onClick="a=event.target || event.srcElement;alert(a.tagName)">div  <p>p   <span>span    <input type="button" value="input">   </span>  </p> </div> で良いと思います。 (IE,Safri,Chrome,Opera,Firefox,Lunascapeで確認済み) ただ、onClick内をスッキリさせたいので (例2) <script> function whereYouClick1(){  a=event.target || event.srcElement;  alert(a.tagName); } </script> <div onclick="whereYouClick1();">div  <p>p   <span>span    <input type="button" value="input">   </span>  </p> </div> とすると、FirefoxとLunascapeで動かなくなります(よね?)。 苦肉の策として (例3) <script> function whereYouClick2(){  alert(a.tagName); } </script> <div onclick="a=event.target || event.srcElement;whereYouClick2()">div  <p>p   <span>span    <input type="button" value="input">   </span>  </p> </div> としたらすべてのブラウザで動いたのですが、腑に落ちません。 これなら(例1)のままの方がすっきりして良かったような気がします。 ここ以外でも同じスクリプトを使いまわしたいときにはfunctionを定義したいところですが、 Forefox, Lunascapeのために(例3)の書き方にならざるを得なくなると思いますが、気持ち悪いです。 もっときれいな書き方はないのでしょうか。 また、上の例では一旦 a=event.target || event.srcElement; としてから、 alert(a.tagName) とやっていますが、 alert(event.target.tagName || event.srcElement.tagName) とやったらIEではエラーとなりました。そんなもんなんでしょうか。 基本的な事柄で申し訳ありませんが、よろしくお願いします。

専門家に質問してみよう