Javascriptを使用してクリックイベントをトリガーして要素をアクティブにする方法はありますか？

Question

div要素があり、デフォルトの色を設定しています。アクティブになると色が変わります。したがって、マウスをクリックすると、色が赤に変わります。私はまた、DOMが準備ができているときにクリックイベントを引き起こしています。しかし、私がクリックイベントをトリガーするときの振る舞いは同じではありません。要素は色を変えず、消えます。それを達成する最良の方法は何ですか？

ここにjsfiddle：https://jsfiddle.net/uvcwxLjr/があります。

var ele = document.querySelector('.clickMe'); 
ele.addEventListener('click', function() { 
    alert('You\'ve clicked me'); 
}); 
ele.click(); 

私はそれが背景赤を持っているし、マウスダウンとは、ときにマウスアップを削除するとことを追加し、別のクラスを作成することによって行うことができます知っています。より良い方法がありますか？

Answer 1

$(function() { 
 
$(".clickMe").click(function() { 
 
    $(this).css('background-color', 'green'); 
 
    alert('change green'); 
 
    }); 
 
}); 
 

.clickMe { 
 
    width: 100px; 
 
    height: 100px; 
 
     background-color: red; 
 
     }

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 

 
<div class="clickMe"> 
 
</div>

Answer 2

'警告' 機能は、ブラウザ（more info）のUIスレッドをブロックする、換言すれば、alertは赤色で描画するDIVを遮断しました。

var ele = document.querySelector('.clickMe'); 
ele.addEventListener('click', function() { 
console.log('You\'ve clicked me'); 
}); 
ele.click();