Почему перестает работать onBlur?

Question

[Ярослав Никитин]

Сам код:

<textarea id="codePHP" name="PHP" onBlur = 'Press_Generator_PHP("codePHP")'></textarea>
<script>
    createTextAreaWithLines('codePHP');
</script>

Функция Press_Generator_PHP():

function Press_Generator_PHP(Code) {
 document.getElementById('Press').innerHTML=document.getElementById(Code).value;
}

Функция createTextAreaWithLines():

var lineObjOffsetTop = 2;
function createTextAreaWithLines(id)
{
	var el = document.createElement('DIV');
	var ta = document.getElementById(id);
	ta.parentNode.insertBefore(el,ta);
	el.appendChild(ta);
						 
	el.className='textAreaWithLines';
	el.style.width = (ta.offsetWidth + 40) + 'px';
	ta.style.position = 'absolute';
	ta.style.left = '40px';
	el.style.height = (ta.offsetHeight + 0) + 'px';
	el.style.overflow='hidden';
	el.style.position = 'relative';
	el.style.width = (ta.offsetWidth + 40) + 'px';
						  
	var lineObj = document.createElement('DIV');
	lineObj.style.position = 'absolute';
	lineObj.style.top = lineObjOffsetTop + 'px';
	lineObj.style.left = '0px';
	lineObj.style.width = '33px';
	el.insertBefore(lineObj,ta);
	lineObj.style.textAlign = 'right';
	lineObj.className='lineObj';
						
	var string = '';
	for(var no = 1; no < 999; no++){
		if(string.length > 0) string = string + '<br>';
			string = string + no;
	}
						 
	ta.onkeydown = function() { positionLineObj(lineObj,ta); };
	ta.onmousedown = function() { positionLineObj(lineObj,ta); };
	ta.onscroll = function() { positionLineObj(lineObj,ta); };
	ta.onblur = function() { positionLineObj(lineObj,ta); };
	ta.onfocus = function() { positionLineObj(lineObj,ta); };
	ta.onmouseover = function() { positionLineObj(lineObj,ta); };
	lineObj.innerHTML = string; 
}
					   
function positionLineObj(obj,ta) {
	obj.style.top = (ta.scrollTop * -1 + lineObjOffsetTop) + 'px';   
}

1 функция означает вывод содержимого textarea после потери фокуса.
2 функция нужна для создания нумерации у textarea.

Обе функции рабочие. Первая работает нормально, но после подключение второй функции(createTextAreaWithLines()), onBlur перестает срабатывать.

Может проблема в том что они ссылаются на один id?

Answer 1

[Владимир Родкин]

Да, потомучто в createTextAreaWithLines переопределяется обработчик onblur
Почитай Способы добавления обработчиков в сравнении

Comments

[Ярослав Никитин]

Что значит переопределяется?

[Владимир Родкин]

Ярослав Никитин: Ну таким образом можно навесить только один обработчик на событие - они не добавляются, а заменяются.

[Ярослав Никитин]

Владимир Родкин: Можешь показать на примере?

[Ярослав Никитин]

У меня получается что только один раз срабатывает и все

[Владимир Родкин]

Ярослав Никитин: Press_Generator_PHP не сработает никогда, потому что ниже вызывается createTextAreaWithLines, в которой на событие onblur навешивается новый обработчик
ta.onblur = function() { positionLineObj(lineObj,ta); };
Вот он и будет срабатывать.
Вот добавил алерты для наглядности jsfiddle.net/VovanR/sact2Lm8

[Ярослав Никитин]

Владимир Родкин: Спасибо, я во всем разобрался.