<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>イベント on qwerty.work</title>
        <link>https://qwerty.work/tags/%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88/</link>
        <description>Recent content in イベント on qwerty.work</description>
        <generator>Hugo -- gohugo.io</generator>
        <language>ja-JP</language>
        <lastBuildDate>Tue, 09 Aug 2022 08:43:36 +0900</lastBuildDate><atom:link href="https://qwerty.work/tags/%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88/index.xml" rel="self" type="application/rss+xml" /><item>
            <title>【jQuery】クリックしたときのイベントを確認するコマンド</title>
            <link>https://qwerty.work/post/2022/08/jquery-click-event-log/</link>
            <pubDate>Tue, 09 Aug 2022 08:43:36 +0900</pubDate>
            <guid>https://qwerty.work/post/2022/08/jquery-click-event-log/</guid>
            <description>&lt;h2 id=&#34;クリックイベントの内容が知りたい&#34;&gt;クリックイベントの内容が知りたい&#xA;&lt;/h2&gt;&lt;p&gt;jQueryでクリックやタップで思い通りの動作にならなかった場合、イベントがhoverなのか、clickやmouseoverなのか知りたいとき、このコマンドで取得できるみたいです。&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code class=&#34;language-javascript&#34; data-lang=&#34;javascript&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;$&lt;/span&gt;.&lt;span style=&#34;color:#a6e22e&#34;&gt;_data&lt;/span&gt;(&lt;span style=&#34;color:#a6e22e&#34;&gt;$&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#39;セレクタ&amp;#39;&lt;/span&gt;).&lt;span style=&#34;color:#a6e22e&#34;&gt;get&lt;/span&gt;(&lt;span style=&#34;color:#ae81ff&#34;&gt;0&lt;/span&gt;), &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;events&amp;#34;&lt;/span&gt;)&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;**console.log();**で出力して確認したいときに便利です。例えば、&lt;code&gt;li.menu_list&lt;/code&gt;をクリックしたときのイベントを確認したいときは以下のようになります。&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code class=&#34;language-javascript&#34; data-lang=&#34;javascript&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;console&lt;/span&gt;.&lt;span style=&#34;color:#a6e22e&#34;&gt;log&lt;/span&gt;(&lt;span style=&#34;color:#a6e22e&#34;&gt;$&lt;/span&gt;.&lt;span style=&#34;color:#a6e22e&#34;&gt;_data&lt;/span&gt;(&lt;span style=&#34;color:#a6e22e&#34;&gt;$&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#39;li.menu_list&amp;#39;&lt;/span&gt;).&lt;span style=&#34;color:#a6e22e&#34;&gt;get&lt;/span&gt;(&lt;span style=&#34;color:#ae81ff&#34;&gt;0&lt;/span&gt;), &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;events&amp;#34;&lt;/span&gt;));&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;以下のページを参考にさせてもらいました。&lt;/p&gt;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;  &#xA;&#xA;&#xA;&lt;div class=&#34;link-card&#34;&gt;&#xA;  &lt;a href=&#34;https://qiita.com/dz_/items/e5da8ed692720a69126c&#34; target=&#34;_blank&#34; rel=&#34;noopener noreferrer&#34;&gt;&#xA;    &#xA;    &lt;div class=&#34;link-card-image&#34;&gt;&#xA;      &lt;img src=&#34;https://image.thum.io/get/width/300/crop/200/https://qiita.com/dz_/items/e5da8ed692720a69126c&#34; alt=&#34;https://qiita.com/dz_/items/e5da8ed692720a69126c&#34; loading=&#34;lazy&#34;&gt;&#xA;    &lt;/div&gt;&#xA;    &#xA;    &lt;div class=&#34;link-card-body&#34;&gt;&#xA;      &lt;span class=&#34;link-card-title&#34;&gt;https://qiita.com/dz_/items/e5da8ed692720a69126c&lt;/span&gt;&#xA;      &#xA;      &lt;span class=&#34;link-card-url&#34;&gt;https://qiita.com/dz_/items/e5da8ed692720a69126c&lt;/span&gt;&#xA;    &lt;/div&gt;&#xA;  &lt;/a&gt;&#xA;&lt;/div&gt;&#xA;&#xA;&lt;h2 id=&#34;chromeのデベロッパーツールでも確認できる&#34;&gt;Chromeのデベロッパーツールでも確認できる&#xA;&lt;/h2&gt;&lt;p&gt;コンソールのログ出力をしなくても、Chromeであればデベロッパーツールでもできるみたいです。&lt;/p&gt;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;  &#xA;&#xA;&#xA;&lt;div class=&#34;link-card&#34;&gt;&#xA;  &lt;a href=&#34;https://qiita.com/zaru/items/b7732ebad9b732518359&#34; target=&#34;_blank&#34; rel=&#34;noopener noreferrer&#34;&gt;&#xA;    &#xA;    &lt;div class=&#34;link-card-image&#34;&gt;&#xA;      &lt;img src=&#34;https://image.thum.io/get/width/300/crop/200/https://qiita.com/zaru/items/b7732ebad9b732518359&#34; alt=&#34;https://qiita.com/zaru/items/b7732ebad9b732518359&#34; loading=&#34;lazy&#34;&gt;&#xA;    &lt;/div&gt;&#xA;    &#xA;    &lt;div class=&#34;link-card-body&#34;&gt;&#xA;      &lt;span class=&#34;link-card-title&#34;&gt;https://qiita.com/zaru/items/b7732ebad9b732518359&lt;/span&gt;&#xA;      &#xA;      &lt;span class=&#34;link-card-url&#34;&gt;https://qiita.com/zaru/items/b7732ebad9b732518359&lt;/span&gt;&#xA;    &lt;/div&gt;&#xA;  &lt;/a&gt;&#xA;&lt;/div&gt;&#xA;&#xA;</description>
        </item></channel>
</rss>
