1) Чтобы получить атрибуты события и связанные с ними значения, вы можете передать в alert() следующие выражения:
Object.entries(event)JSON.stringify(event).
Object.entries(event) - наименее краткий, потому что вам нужно преобразовать массив в строку, но он дает вам максимальный контроль над тем, как выглядит ваш вывод. JSON.stringify(event) является более кратким, у него есть необязательные аргументы, которые позволяют немного форматировать вывод, и он обеспечивает наиболее переносимый вывод, поскольку JSON широко поддерживается.
В качестве альтернативы вы можете использовать консоль вместо предупреждения и просто передать переменную, представляющую объект события (console.log(event)). Исходя из того, что вы выразили, console.log(event) - это то, что вам нужно, потому что он предоставит вам всю необходимую информацию с наименьшим количеством кода. Следующий момент не подходит, когда следует использовать эти 2 метода вывода.
2) Помимо alert(), вы можете добавить атрибуты в виде текста к элементу в DOM или использовать console.log() для записи атрибуты консоли.
Запись в консоль - это самый простой способ вывода, но бесполезный для предоставления информации конечному пользователю. Запись информации в DOM требует большего количества кода, но это лучший способ представить информацию пользователю. alert() следует использовать для доставки очень простых c сообщений (подтверждений, предупреждений и т. Д. c.).
Если ваша единственная цель - увидеть ключи и значения любого заданного объекта, тогда console.log() - лучший способ сделать это, потому что он легче читается и требует очень мало кода.
$('#a').on('click', (event) => console.log(event) )
$('#b').on('click', (event) => alert(JSON.stringify(event)) )
$('#c').on('click', (event) => $('#out').html(Object.entries(event).join(', ')) )
.box {
color: white;
height: 25px;
width: 100px;
}
#a {background-color: green}
#b {background-color: blue}
#c {background-color: red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="box" id="a"> Console </button>
<button class="box" id="b"> Alert </button>
<button class="box" id="c"> Element </button>
<p id="out"></p>