19.04.2014, 12:28
|
|
Интересующийся
|
|
Регистрация: 19.04.2014
Сообщений: 13
|
|
|
Динамическое добавление аттрибута onClick
Здравствуйте!Подскажите, пожалуйста,как кроссбраузерно используя DOM можно изменить аттрибут onClick и чтобы функция могла принимать параметры: например, obj.setAttribute("onclick","play(par1,par2);"); функция начинает сама исполняться ещё до нажатия.а как имея ссылку на объект динамически кроссбраузерно добавить аттрибут onClick с функцией с двумя параметрами, чтобы функция исполнялась только при нажатии?
пробовала делать так:
function setEvent(c, name, action)
{
if (c.addEventListener) {
c.addEventListener( name, action, false );
}
else if (c.attachEvent) {
c.attachEvent("on" + name, action);
}
else {
c["on" + name] = action;
}
}
Соответственно использование:
setEvent(obj, "click", function () { play(par1,par2); } );
|
|
19.04.2014, 12:38
|
|
Профессор
|
|
Регистрация: 15.03.2014
Сообщений: 561
|
|
|
И чем вас ваш вариант не устраивает?
|
|
19.04.2014, 15:37
|
|
Интересующийся
|
|
Регистрация: 19.04.2014
Сообщений: 13
|
|
|
не работает почему-то,атрибут onclick не проставляется
|
|
19.04.2014, 15:43
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Сообщение от JaneLane
|
|
не работает почему-то,атрибут onclick не проставляется
|
Атрибут и не должен проставляться. Атрибут onclick - это альтернативный, устаревший вариант навешивания обработчика события. setEvent использует addEventListener - что есть хорошо.
__________________
В личку только с интересными предложениями 
|
|
19.04.2014, 15:48
|
|
Профессор
|
|
Регистрация: 15.03.2014
Сообщений: 561
|
|
Сообщение от JaneLane
|
|
не работает почему-то,атрибут onclick не проставляется
|
Так нужен именно атрибут или чтобы клик работал? Если второе, то вроде всё работает:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button onclick="setEvent(document.getElementById('test'), 'click', function() { someFunc(1,2); });">Повесить функцию на ссылку</button>
<a href="#" id="test">test</a>
<script>
function setEvent(c, name, action)
{
if (c.addEventListener) {
c.addEventListener( name, action, false );
}
else if (c.attachEvent) {
c.attachEvent("on" + name, action);
}
else {
c["on" + name] = action;
}
}
function someFunc(a, b) {
alert(a+','+b);
}
</script>
</body>
</html>
|
|
19.04.2014, 16:09
|
|
Интересующийся
|
|
Регистрация: 19.04.2014
Сообщений: 13
|
|
|
М,а если нужно изменить сам атрибут?я клонирую узлы вместе с обработчиком,и мне нужно поменять параметры в функции,если изменять атрибут методом setAttribute,то функция выполняется сразу же,не по нажатию, а способом выше по клику ничего не происходит(
|
|
19.04.2014, 16:45
|
|
Профессор
|
|
Регистрация: 15.03.2014
Сообщений: 561
|
|
|
Сообщение от JaneLane
|
|
М,а если нужно изменить сам атрибут?я клонирую узлы вместе с обработчиком,и мне нужно поменять параметры в функции,если изменять атрибут методом setAttribute,то функция выполняется сразу же,не по нажатию, а способом выше по клику ничего не происходит(
|
Так а не проще при клонировании на клон новый обработчик вешать? Можно сделать функцию которая будет клонировать узел, принимать параметры и вешать нужный обработчик с нужными параметрами. Или вообще хранить параметры функции в каком-нибудь артрибуте узла и в функции брать их уже из кликнутого элемента.
В общем что-то типо этого:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
a: <input type="text" name="a" value="5"><br>
b: <input type="text" name="b" value="3"><br>
<input type="button" value="clone link" onclick="cloneLink(this.form)">
</form>
<a href="#" id="test">test</a><br>
<script>
function setEvent(c, name, action)
{
if (c.addEventListener) {
c.addEventListener( name, action, false );
}
else if (c.attachEvent) {
c.attachEvent("on" + name, action);
}
else {
c["on" + name] = action;
}
}
function someFunc(a, b) {
alert(a + ',' + b);
}
function cloneAndAddHandler(el, a, b) {
var clone = el.cloneNode(true);
setEvent(clone, 'click', function() { someFunc(a, b); });
return clone;
}
function cloneLink(form) {
var el = document.getElementById('test');
var a = form.elements.a.value;
var b = form.elements.b.value;
var newA = cloneAndAddHandler(el, a, b);
newA.innerHTML = 'test' + a + ',' + b;
document.body.appendChild(newA);
document.body.appendChild( document.createElement('br') );
}
</script>
</body>
</html>
Последний раз редактировалось jsnb, 19.04.2014 в 17:08.
|
|
19.04.2014, 17:36
|
|
Интересующийся
|
|
Регистрация: 19.04.2014
Сообщений: 13
|
|
|
Сообщение от jsnb
|
Так а не проще при клонировании на клон новый обработчик вешать? Можно сделать функцию которая будет клонировать узел, принимать параметры и вешать нужный обработчик с нужными параметрами. Или вообще хранить параметры функции в каком-нибудь артрибуте узла и в функции брать их уже из кликнутого элемента.
В общем что-то типо этого:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
a: <input type="text" name="a" value="5"><br>
b: <input type="text" name="b" value="3"><br>
<input type="button" value="clone link" onclick="cloneLink(this.form)">
</form>
<a href="#" id="test">test</a><br>
<script>
function setEvent(c, name, action)
{
if (c.addEventListener) {
c.addEventListener( name, action, false );
}
else if (c.attachEvent) {
c.attachEvent("on" + name, action);
}
else {
c["on" + name] = action;
}
}
function someFunc(a, b) {
alert(a + ',' + b);
}
function cloneAndAddHandler(el, a, b) {
var clone = el.cloneNode(true);
setEvent(clone, 'click', function() { someFunc(a, b); });
return clone;
}
function cloneLink(form) {
var el = document.getElementById('test');
var a = form.elements.a.value;
var b = form.elements.b.value;
var newA = cloneAndAddHandler(el, a, b);
newA.innerHTML = 'test' + a + ',' + b;
document.body.appendChild(newA);
document.body.appendChild( document.createElement('br') );
}
</script>
</body>
</html>
|
вот,например,мой кусок кода.я нахожу новый элемент и пытаюсь на него поставить обработчик.у меня бред написан?просто если смотреть через инспектор на моем узле как была функция c параметрами copyTask(0,0),так и осталась.мне нужно изменить на copyTask(0,1).я извиняюсь,что с такими тупыми вопросами,но в js пока что вообще не алё
function addEndRow(dayN,fieldName)
{
var a=document.getElementsByTagName("input");
for (i=0;i<a.length;i++)
{
var obj=a.item(i);
var oname=obj.name;
if (oname==fieldName)
{
obj.value++;
var cop=document.getElementById("cop_"+dayN+"_"+0);
var newCop=cop.cloneNode(true);
newCop.id="cop_"+dayN+"_"+obj.value;
node= newCop.childNodes[1];
node.name="copy_"+dayN+"_"+obj.value;
node.id="copyB_"+dayN+"_"+obj.value;
var myTD=document.createElement('td');
myTD.appendChild(newCop);
var past=document.getElementById("past_"+dayN+"_"+0);
var newPast=past.cloneNode(true);
newPast.id="past_"+dayN+"_"+obj.value;
node2 = newPast.childNodes[1];
node2.name="paste_"+dayN+"_"+obj.value;
node2.id="pasteB_"+dayN+"_"+obj.value;
var myTD2=document.createElement('td');
myTD2.appendChild(newPast);
var cl=document.getElementById("cl_"+dayN+"_"+0);
var newCl=cl.cloneNode(true);
newCl.id="cl_"+dayN+"_"+obj.value;
node3= newCl.childNodes[1];
node3.name="clear_"+dayN+"_"+obj.value;
node3.id="clearB_"+dayN+"_"+obj.value;
var myTD3=document.createElement('td');
myTD3.appendChild(newCl);
var myTR=document.createElement('tr');
myTR.appendChild(myTD);
myTR.appendChild(myTD1);
myTR.appendChild(myTD2);
myTR.appendChild(myTD3);
document.getElementById("myT_"+dayN).appendChild(myTR);
var cp=document.getElementById("copyB_"+dayN+"_"+obj.value);
var ps=document.getElementById("pasteB_"+dayN+"_"+obj.value);
var cl=document.getElementById("clearB_"+dayN+"_"+obj.value);
cp.onclick=function(){copyTask(dayN,obj.value);}
ps.onclick=function(){pasteTask(dayN,obj.value);}
cl.onclick=function(){clearLine(dayN,obj.value);}
}
}
}
|
|
19.04.2014, 18:56
|
|
Профессор
|
|
Регистрация: 15.03.2014
Сообщений: 561
|
|
А node, node2 и node3 так и задумано что они будут из вне браться? И у них уже есть в самом теге атрибут onclick? Или другое навешанный обработчик через addEventListener? Просто по вашему коду получается, что вы пытаетесь для каких-то внешних элементов перезаписать обработчик. Если предыдущий обработчик был записан в атрибуте onclick, то запись свойства .onclick перезапишет его, но атрибут не поменяется т.к. атрибут - это часть HTML кода элемента. Но сама функция будет вызываться при клике уже перезаписанная. Т.е. сам атрибут после перезаписи через .onclick уже ни на что не влияет. Если уж он так смущает, то можете очистить его через setAttribute или вообще удалить c помощью removeAttribute (не работает в старых IE).
В общем, вот тут про атрибуты написано: http://learn.javascript.ru/attribute...трибуты
А вот тут про то как вешаются события: http://learn.javascript.ru/introduction-browser-events |
|
19.04.2014, 23:43
|
|
Интересующийся
|
|
Регистрация: 19.04.2014
Сообщений: 13
|
|
|
jsnb, спасибо большое за помощь!получилось!оказалос ь, всё просто)
|
|
|
|
