Не работает window.event

29 мая 2021, 07:20

Опишу ситуацию от начала и до конца, потому что вообще не понимаю происходящее

Сейчас изучаю HTML canvas. В качестве практике решил сделать приложение для рисования. Мой JS код:

const canvas = document.getElementsByTagName('canvas')[0];
const c = canvas.getContext('2d');
var draw = function (){
x = window.event.clientX;
y = window.event.clientY;
c.fillRect(x, y, x+50, y+50)
c.fillColor = 'red'
c.fill()
}
draw()

В HTML только тэг canvas

При попытке запустить код вылазит ошибка

Uncaught TypeError: Cannot read property 'clientX' of undefined

Пробовал запускать другие проекты, которые идеально работали - также ошибка. Подскажите, в чем дело?

Answer 1

Как-то так :

const canvas = document.getElementsByTagName('canvas')[0]; 
const c = canvas.getContext('2d'); 
 
canvas.addEventListener('mousemove', e => { 
  let x = e.clientX, 
    y = e.clientY; 
 
  c.fillRect(x, y, x, y); 
  c.fillColor = 'red'; 
  c.fill(); 
});

canvas { 
  border: 1px black solid; 
}

<canvas></canvas>

Для event нужен собственно event...

Answer 2

The read-only Window property event returns the Event which is currently being handled by the site's code. Outside the context of an event handler, the value is always undefined.

You should avoid using this property in new code, and should instead use the Event passed into the event handler function. This property is not universally supported and even when supported introduces potential fragility to your code.

Google Translate

Событие свойства окна, доступное только для чтения, возвращает событие, которое в данный момент обрабатывается кодом сайта. Вне контекста обработчика событий значение всегда не определено.

Вам следует избегать использования этого свойства в новом коде, и вместо этого следует использовать Событие, переданное в функцию обработчика событий. Это свойство не поддерживается повсеместно, и даже если оно поддерживается, оно может привести к хрупкости вашего кода.

https://developer.mozilla.org/en-US/docs/Web/API/Window/event

Проще говоря для получения объекта события должно это событие произойти. Для этого навешивается слушатель на необходимое событие.

$ref.onclick = function(e) { // Где e и есть объект события }

IE8- вместо передачи параметра обработчику создаёт глобальный объект window.event. Обработчик может обратиться к нему.

$ref.onclick = function() { // window.event - объект события };