ページの要素をクリックしたときの外側のタグのonclick要素を発火させたい

Question

実現したいこと

Twitterやfacebookのシェアボタンをサイトに設置しました．
それらのボタンをクリックしたときに共通して実行したい動作があるのですが，どのように実装したらよいでしょうか．

Twitterのボタンを押しても，Facebookのボタンを押しても，同じ処理が実行されるというものです．

試したこと

親要素divにonclick属性を追加

Twitterやfacebookのボタンをdivタグで囲い，そのdivタグにonclickで動作を追加したのですが，ボタンを押したときにonclickの処理が実行されません．
ボタンの少し外側をクリックするとonclickの処理が実行されます．
実際のコードは次のような感じです．

<div id="snsbtns" onclick="alert('foooooooo')">　<!-- ←←　実行したい処理 -->
    <div class="snsbtn">
        <!-- Twitterのボタン -->
        <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button"
            data-show-count="false">Tweet</a>
        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>

    <div class="snsbtn">
        <!-- facebookのボタン -->
        <div id="fb-root"></div>
        <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v8.0" nonce="OooKwPjc"></script>
        <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-size="small">
            <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">シェア</a>
        </div>
    </div>
</div>

JavaScriptでonclick属性をiframeに追加

また，TwitterやfacebookのボタンはJavaScriptで生成しているみたいなので，
生成されたものを見ると，次のようになっていました．

<!-- TwitterのJavaScriptで生成されたもの -->
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true"
    class="twitter-share-button twitter-share-button-rendered twitter-tweet-button"
    style="position: static; visibility: visible; width: 62px; height: 20px;" title="Twitter Tweet Button"
    src="https://platform.twitter.com/widgets/tweet_button.2d7d9a6d04538bf11c7b23641e75738c.en.html#dnt=false&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=file%3A%2F%2F%2FC%3A%2FUsers%2Ftaihara%2FDocuments%2Fjt-development%2Findex.html&amp;size=m&amp;time=1599451037840&amp;type=share&amp;url=file%3A%2F%2F%2FC%3A%2FUsers%2Ftaihara%2FDocuments%2Fjt-development%2Findex.html">
</iframe>

どうやら，iframeでその中にボタンが生成されているみたいです．
そこで，JavaScriptを使ってiframeのonclick要素を操作するコードを書いてみたのですが，こちらも動作しません．

<script>
    document.getElementsByTagName('iframe')[0].onclick = function() {
        alert('foooooooo');
    };
    document.getElementsByTagName('iframe')[1].onclick = function() {
        alert('foooooooo');
    };
</script>

Answer 1

iframe側に書かないと反応しないのでは？

Comments

[yambejp]

<style>
iframe{height:100px;width:100px;bordersolid 1px;}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
window.addEventListener('click',e=>{
console.log("window");
});
document.querySelector('iframe').addEventListener('click',e=>{
console.log("iframe");
});
});
</script>
<iframe></iframe>

[kokorin]

回答ありがとうございます．
iframeの中でクリックされたイベントのプロパゲーションはiframeの中で完結してしまうため，元のページのイベントが発火しないということなのでしょうか．

また，ご教授いただいたコードをindex.htmlに張り付けてもconsole.logイベントは依然として動かないのですが，iframeの中にこのようなコードを書く必要があるということですか？

[yambejp]

こういうことです
//index.html

<style>
iframe{height:100px;width:100px;bordersolid 1px;}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
window.addEventListener('click',e=>{
console.log("window");
});
document.querySelector('iframe').addEventListener('click',e=>{
console.log("iframe");
});
});
function test(){
console.log("test");
}
</script>
<iframe src="iframe.html"></iframe>

//iframe.html
<script>
window.addEventListener('click',e=>{
parent.test()
});
</script>
test