Получение имени элемента JS

Есть html:

<form method="POST" enctype="multipart/form-data" id="main-image-form">
    <input name="image_url">
    <button type="submit" enctype="multipart/form-data" class="save btn btn-warning">
        <b>-100 G</b> <img src="reload.png'">
    </button>
    <div name="main" onclick="backgroundPreview(this);"></div>
    <button name="btn"></button>
</form>

И JS:

jQuery(document).ready(function ($) {
    $('#main-image-form').submit(function(e){
        // some code
    });
});
function backgroundPreview(elem) {
    console.log(elem);
    console.log(elem.name);
}

Во-первых - первая JS функция срабатывает даже при нажатии на button, у которого name="btn". Не пойму почему. Судя по функции срабатывать должна только при нажатии на кнопку формы типа submit

Во-вторых - при нажатии на div, у которого name="main", вызывается функция backgroundPreview, которой из html передается объект элемента. Сам объект в консоль печатается. А вот вместо его параметра name в консоль выводится undefined. Почему? Ведь у данного элемента div есть атрибут name. Если же этот div сменить на button, то имя будет печататься, но тогда будет вызываться первая JS функция, как было описано в первом пункте, а этого мне нельзя допустить.

Что я могу сделать для того, чтобы при нажатии на div вызвалась только одна вторая JS функция, и я мог бы получить атрибут name у этого div из JS?