Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Непонятен синтаксис addEventListener() (https://javascript.ru/forum/css-html/54594-neponyaten-sintaksis-addeventlistener.html)

n199a 24.03.2015 00:05

Непонятен синтаксис addEventListener()
 
1) Что означает в методе document.addEventListener() параметр function()?
2) Вопрос в комментарии //ЧТО ПРОИСХОДИТ ТУТ?

document.addEventListener('DOMContentLoaded', function () {
	settings = JSON.parse(localStorage.settings);
	document.getElementById('showClear').checked = settings.showClear;	//значение чекбокса равно значению чекбокса showClear из функции	save()
	document.getElementById('showClear').addEventListener('click', save); //ЧТО ПРОИСХОДИТ ТУТ?
}

danik.js 24.03.2015 06:35

Цитата:

Сообщение от n199a
параметр function()

Не поверишь, но это ФУНКЦИЯ! Мы передаем вторым параметром ФУНКЦИЮ!
Цитата:

Сообщение от n199a
//ЧТО ПРОИСХОДИТ ТУТ?

На элемент #showClear навешивается функция save в качестве обработчика события click

newuser1001 24.03.2015 10:38

Цитата:

Сообщение от n199a
ЧТО ПРОИСХОДИТ ТУТ?

Думаю, под капотом происходит что-то вроде:
print=console.log.bind(console)

Event={
 create: function(name){
  var o=Object.create(this)
  o.elements=[]
  o.name=name
  window[name]=o
 },
 add: function(el){this.elements.push(el)},
 activate: function(){this.action(); this.notify()},
 notify: function(){var name=this.name; this.elements.forEach(function(el){el["on"+name]()})}
}

Event.create("printWorld")
printWorld.action=function(){print("World, ")}

SomeElement={
 create: function(){return Object.create(this)},
 addEventListener: function(event, fnc){window[event].add(this); this["on"+event]=fnc}
}


helloElement=SomeElement.create()
helloElement.addEventListener("printWorld", function(){print("Hello!")})

goodbyeElement=SomeElement.create()
goodbyeElement.addEventListener("printWorld", function(){print("Bye!")})


printWorld.activate()

//  World, 
//  Hello!
//  Bye!

n199a 24.03.2015 12:12

Цитата:

Сообщение от danik.js (Сообщение 362766)
Не поверишь, но это ФУНКЦИЯ! Мы передаем вторым параметром ФУНКЦИЮ!

Но функция создается так:
function NAME() {}

А в параметре указано просто function(). Как узнать, какая функция?

newuser1001 24.03.2015 12:43

Цитата:

Сообщение от n199a
Но функция создается так:

нет. Ф-ция создается так
function(){}

или так
new Function
или проcто
Function()

а в выражении
function NAME() {}

у Вас создается функция, на нее навешивается с-во name, в глобальном объекте создается с-во NAME, которому присваивается значение объекта созданной Вами ф-ции (проще говоря -- сама ф-ция)

newuser1001 24.03.2015 12:46

Цитата:

Сообщение от n199a
Как узнать, какая функция?

Не понятно, что имеется в виду под "узнать", но если вам нужна просто именованная ф-ция, Вы можете написать
element.addEventLitener("event", function NAME(){})

n199a 24.03.2015 13:08

Цитата:

Сообщение от newuser1001 (Сообщение 362829)
Не понятно, что имеется в виду под "узнать", но если вам нужна просто именованная ф-ция, Вы можете написать
element.addEventLitener("event", function NAME(){})

А все, разобрался. Метод addEventLitener вызовет объект function(). Сама же эта функция и её тело идет сразу же в методе. Мои глаза :dance:

danik.js 24.03.2015 14:39

Цитата:

Сообщение от n199a
А в параметре указано просто function(). Как узнать, какая функция?

Значит это функция без имени. Она так и называется - анонимная.

Вообще, есть два типа функций:
// функция-объявление
function example() {}
Тут это как некая конструкция. Объявляется функция. Как в других языках объявляется, допустим класс.

// функция-выражение
var example = function example() {}

// это более гибкая штука. Это как любой другой тип: число, строка, объект. Оно так и есть, ибо все это и есть выражение.

alert(1 + 2) // аргументом передали выражение

alert(1) // аргументом тоже передали выражение, только очень простое

alert(function example(){}) - аргументом передали выражение.

У функции выражения может не быть имени:

alert(function(){}) // анонимная функция - функция без имени


Зато ее можно присвоить в переменную и дальше юзать как обычную функцию-объявление:

var example = function(){}
// теперь в переменной example хранится ссылка на функцию:

example();// вызвали функцию

alert(example)


Часовой пояс GMT +3, время: 14:12.