如何为onclick事件添加额外的操作？ [英] How to add extra action to onclick event ?
问题描述
我的元素：
< span onclick =" alert（''test''）" id =" mySpan"> test< / span>
让我们说我不知道这个跨度的onclick事件是什么。是否可以为此元素的onclick事件添加另一个动作
？我已经尝试了这样的事情：$ / b
oncl = document.getElementById（''mySpan''）。onclick
oncl = oncl +''\ n; alert（\''added\''）''
document.getElementById（''mySpan''）。onclick = oncl
在此操作之后，没有任何反应点击< span> ;.
有谁知道如何修复它？
祝你好运，
ABS
My element:
<span onclick="alert(''test'')" id="mySpan">test</span>
Let''s say that I don''t know what is in this span''s onclick event. Is it
possible to add another action to this element''s onclick event ? I''ve tried
something like this:
oncl = document.getElementById(''mySpan'').onclick
oncl = oncl + ''\n;alert(\''added\'')''
document.getElementById(''mySpan'').onclick = oncl
And after this operation there''e no reaction to clicking on the <span>.
Anybody knows how to fix it ?
Best regards,
ABS
推荐答案
" abs" <无**** @ wp.pl>在消息新闻中写道：d7 ********** @ inews.gazeta.pl ...
"abs" <no****@wp.pl> wrote in message news:d7**********@inews.gazeta.pl...
我的元素：
< span onclick =" alert（' '测试''）" id =" mySpan"> test< / span>
让我们说我不知道这个跨度的onclick事件是什么。是否可以为此元素的onclick事件添加另一个动作？我有
试过这样的事情：
oncl = document.getElementById（''mySpan''）。onclick
oncl = oncl +''\ n; alert （\''added\''）''
document.getElementById（''mySpan''）。onclick = oncl
此操作后对此没有任何反应点击< span> ;.
有人知道如何解决它吗？
最好的问候，
ABS
My element:
<span onclick="alert(''test'')" id="mySpan">test</span>
Let''s say that I don''t know what is in this span''s onclick event. Is it
possible to add another action to this element''s onclick event ? I''ve tried something like this:
oncl = document.getElementById(''mySpan'').onclick
oncl = oncl + ''\n;alert(\''added\'')''
document.getElementById(''mySpan'').onclick = oncl
And after this operation there''e no reaction to clicking on the <span>.
Anybody knows how to fix it ?
Best regards,
ABS
我''我可能误解了这个问题，但是设置onclick到一个函数似乎更容易了，然后动态地向函数添加行。
< scr ipt>
函数mySpanClicked（）{
alert（" test"）;
}
< ; / scr ipt>
< span onclick =" mySpanClicked（）" id =" mySpan"> test< / span>
< scr ipt>
....脚本添加到mySpanClicked（）
< / scr ipt>
-alu
I''m probably misunderstanding the problem, but it would seem easier
to set onclick to a function, then add lines to the -function- dynamically.
<scr ipt>
function mySpanClicked(){
alert("test");
}
</scr ipt>
<span onclick="mySpanClicked()" id="mySpan">test</span>
<scr ipt>
.... script to add to mySpanClicked()
</scr ipt>
-alu
你不能再添加另一个动作onClick事件，但你可能会发现
这个方便....
< span onclick =" alert（''test''）;警报（''第二个函数''）"
id =" mySpan"> test< / span>
这将调用2个动作一个接一个地。在第一次活动结束后，请注意
分号。
你可以重复这一点以增加额外的动作。
最诚挚的问候，
Sandfordc
You cant just add another action to the onClick event, but you may find
this handy....
<span onclick="alert(''test'');alert(''second function'')"
id="mySpan">test</span>
This will now call the 2 actions one after the other. note the
semi-colon in there after the first event.
You can repeat that more to add extra actions.
Best Regards,
Sandfordc
On 26/05/2005 20:32，abs写道：
On 26/05/2005 20:32, abs wrote:
我的元素：
< span onclick =" alert（''test''）" id =" mySpan"> test< / span>
让我们说我不知道这个跨度的onclick事件是什么。是否可以为此元素的onclick事件添加另一个动作？
这篇文章末尾的代码是一种非常通用的方法，可以添加和删除元素中的监听器，这与
addEventListener方法。
虽然代码看起来令人生畏，但很多都是内部代码。对于基本的
使用，你只需要三种方法：
DispatcherFactory.createDispatcher（）
这创建和返回一个调度程序对象。每个调度员
维护一个与类型
事件相关联的侦听器列表。当调度程序附加到一个元素时，它会将所有此类事件转发给它管理的监听器。
另外两个重要的方法是成员调度程序对象
由createDispatcher返回。
Dispatcher.add（监听器）
此方法添加一个函数到内部列表。简单。
Dispatcher.attach（元素，类型）
此方法将调度程序与特定的
事件类型相关联，例如作为click事件和特定元素。
如果该元素的元素上已经存在一个监听器（例如
onclick属性），它将被添加在附上调度员之前到
内部清单。
所以，给定：
< span id = QUOT; mySpan" onclick =" alert（''original''）;">测试< / span>
以及对该元素的引用：
var element = document.getElementById（''mySpan''）;
你可以添加一个新函数：
var dispatcher = DispatcherFactory.createDispatcher（）;
dispatcher.add（function（）{
alert（''added''）;
}）;
dispatcher.attach（元素，''onclick''）;
您可以按任意顺序调用添加和附加，以及你可以随时在
添加听众。你也可以将同一个调度程序附加到几个不同类型的不同元素上，但我怀疑你会对它有什么用处。
另一个您可以使用的两种方法是调度员成员。
Dispatcher.remove（监听器）
这将搜索给定的函数。如果它存在于
列表中，则将其丢弃。
Dispatcher.detach（元素，类型）
从元素中移除调度程序及其所有给定类型的侦听器。
有更简单的解决方案，但它们并不灵活。现在非常晚了，所以其他人将不得不继续使用那些
替代品。
oncl = document.getElementById（' 'mySpan''）onclick
oncl = oncl +''\ n; alert（\''added\''）''
document.getElementById（''mySpan''）。 onclick = oncl
My element:
<span onclick="alert(''test'')" id="mySpan">test</span>
Let''s say that I don''t know what is in this span''s onclick event. Is it
possible to add another action to this element''s onclick event ?
The code at the end of this post is a very generic way of adding and
removing listeners from an element, much in the same way as the
addEventListener method.
Though the code looks daunting, a lot of it is internal. For basic
usage, you need only three methods:
DispatcherFactory.createDispatcher()
This creates and returns a dispatcher object. Each dispatcher
maintains a list of listeners that are associated with a type
of event. When the dispatcher is attached to an element, it
forwards all events of this type to the listeners it manages.
The other two important methods are members of the dispatcher objects
returned by createDispatcher.
Dispatcher.add(listener)
This method adds a function to the internal list. Simple.
Dispatcher.attach(element, type)
This methods associates the dispatcher with a particular
event type, such as the click event, and a particular element.
If a listener already exists on that element for that type (an
onclick attribute, for example), it will be added to the
internal list before the dispatcher is attached.
So, given:
<span id="mySpan" onclick="alert(''original'');">Test</span>
and a reference to that element:
var element = document.getElementById(''mySpan'');
you can add a new function with:
var dispatcher = DispatcherFactory.createDispatcher();
dispatcher.add(function() {
alert(''added'');
});
dispatcher.attach(element, ''onclick'');
You can call add and attach in any order, and you can add listeners at
any time. You can also attach the same dispatcher to several different
elements with different types, though I doubt you''ll have any use for that.
The other two methods you can use are again dispatcher members.
Dispatcher.remove(listener)
This searches for the given function. If it exists within the
list, it''s discarded.
Dispatcher.detach(element, type)
This removes the dispatcher and all of its listeners of the
given type from the element.
There are simpler solutions, but they aren''t as flexible. It''s
incredibly late now, so someone else will have to continue with those
alternatives.
oncl = document.getElementById(''mySpan'').onclick
oncl = oncl + ''\n;alert(\''added\'')''
document.getElementById(''mySpan'').onclick = oncl
这里有一个误解：onclick属性不是字符串。当
用户代理解析HTML中的onclick等属性时，会将
代码转换为函数。所以，这不仅仅是添加更多代码的问题。下面的
调度程序对象允许您在一个
属性上管理多个功能。
请询问您是否有任何问题。
Mike
以下部分代码可以删除。如果你不想删除
听众，你可以消除两个删除方法（在Node和
createDispatcher中），detachDispatcher函数和行：
Dispatcher.detach = detachDispatcher;
最后的代码模拟应该存在的调用方法
所有功能。 5.5之前的JScript版本（因此通常IE版本在5.5之前的
）不包括这种方法，因此需要包含替代品。
。调度程序代码只需要在开关
语句中使用案例1，因此您可以删除其他子句。它们被包含在
中，使替代品更有用。
var DispatcherFactory =（函数（全局）{
函数节点（数据）{
var next = null;
this.fire = function（element，event）{
var performDefault =下一个
？next.fire（元素，事件）
：true;
返回data.call（元素，事件） && performDefault;
};
this.add = function（listener）{
if（data ==听众）{return;}
if（next）{
next.add（listener）;
} else {
next = new Node（listener）;
}
};
this.remove = function（listener） {
if（data == listener）{
返回下一个;
}否则if（next）{
next = next.remove（listener）;
}
返回此内容;
};
}
函数attachDispatcher（元素，类型）{
var listener = eleme nt [type];
if（（''function''== typeof listener）
&& （this.constructor！= listener.constructor））
{
this.add（听众）;
}
元素[类型] =这个;
}
函数detachDispatcher（元素，类型）{
if（this == element [type ]）{
元素[类型] = null;
}
}
return {
createDispatcher：function（）{
var list = null;
function Dispatcher（event）{
返回列表
？ list.fire（this，event || global.event）
：true;
}
}
Dispatcher.constructor = this;
Dispatcher.add = function（listener）{
if（list）{
list。 add（listener）;
} else {
list = new Node（listener）;
}
} ;
Dispatcher.remove = function（listener）{
if（list）{
list = list.remove（listener）;
}
};
Dispatcher.attach = attachDispatcher;
Dispatcher.detach = detachDispatcher;
}
};
}）（这个）;
if（''function' '！= typeof Function.prototype.call）{
Function.prototype.call = function（object）{
var property =''__ call''，result，undef ;
while（''undefined''！= typeof object [property]）{
property =''__''+ property;
}
object [property] = this;
switch（arguments.length - 1）{
case 0：
result = object [property]（）;
break;
案例1：
result = object [property]（参数[1]）;
break;
case 2：
result = object [property]（arguments [1]，arguments [2]）;
break;
case 3：
result = object [property]（arguments [1]，arguments [2]，
arguments [3]）;
break;
案例4：
result = object [property]（arguments [1]，arguments [2]，
arguments [3]，arguments [4 ]）;
休息;
案例5：
result = object [property]（arguments [1]，arguments [2]，
arguments [3]，arguments [4]，arguments [5]）;
break;
default：alert（''参数太多！''）;
}
对象[property] = undef;
返回结果;
};
}
-
Michael Winter
替换.invalid ;与.uk通过电子邮件回复。
There''s a misconception here: the onclick property isn''t a string. When
a user agent parses attributes like onclick in HTML, it converts the
code to a function. So, it''s not simply a matter of added more code. The
dispatcher object below allows you to manage several functions on one
property.
Do ask if you have any questions.
Mike
Parts of the code below can be removed. If you won''t be removing
listeners, you can eliminate the two remove methods (in Node and
createDispatcher), the detachDispatcher function, and the line:
Dispatcher.detach = detachDispatcher;
The code at the very end emulates the call method that should exist on
all functions. JScript versions prior to 5.5 (and so usually IE versions
prior to 5.5) don''t include this method so a substitute needs to be
included. The dispatcher code only needs case 1 within the switch
statement, so you could remove the other clauses. They were included to
make the substitute more useful.
var DispatcherFactory = (function(global) {
function Node(data) {
var next = null;
this.fire = function(element, event) {
var performDefault = next
? next.fire(element, event)
: true;
return data.call(element, event) && performDefault;
};
this.add = function(listener) {
if(data == listener) {return;}
if(next) {
next.add(listener);
} else {
next = new Node(listener);
}
};
this.remove = function(listener) {
if(data == listener) {
return next;
} else if(next) {
next = next.remove(listener);
}
return this;
};
}
function attachDispatcher(element, type) {
var listener = element[type];
if((''function'' == typeof listener)
&& (this.constructor != listener.constructor))
{
this.add(listener);
}
element[type] = this;
}
function detachDispatcher(element, type) {
if(this == element[type]) {
element[type] = null;
}
}
return {
createDispatcher : function() {
var list = null;
function Dispatcher(event) {
return list
? list.fire(this, event || global.event)
: true;
}
}
Dispatcher.constructor = this;
Dispatcher.add = function(listener) {
if(list) {
list.add(listener);
} else {
list = new Node(listener);
}
};
Dispatcher.remove = function(listener) {
if(list) {
list = list.remove(listener);
}
};
Dispatcher.attach = attachDispatcher;
Dispatcher.detach = detachDispatcher;
}
};
})(this);
if(''function'' != typeof Function.prototype.call) {
Function.prototype.call = function(object) {
var property = ''__call'', result, undef;
while(''undefined'' != typeof object[property]) {
property = ''__'' + property;
}
object[property] = this;
switch(arguments.length - 1) {
case 0:
result = object[property]();
break;
case 1:
result = object[property](arguments[1]);
break;
case 2:
result = object[property](arguments[1], arguments[2]);
break;
case 3:
result = object[property](arguments[1], arguments[2],
arguments[3]);
break;
case 4:
result = object[property](arguments[1], arguments[2],
arguments[3], arguments[4]);
break;
case 5:
result = object[property](arguments[1], arguments[2],
arguments[3], arguments[4], arguments[5]);
break;
default: alert(''Too many arguments!'');
}
object[property] = undef;
return result;
};
}
--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
这篇关于如何为onclick事件添加额外的操作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
