JavaScript dynamically add event code _javascript Tips

Source: Internet
Author: User
Method One, SetAttribute
var obj = document.getElementById ("obj");
Obj.setattribute ("onclick", "Javascript:alert (' Test ');");
This uses setattribute to specify the onclick attribute, simple, well understood,
However: IE does not support, IE does not support setattribute this function, but does not support the use of setattribute set some properties, including object properties, collection properties, event properties, that is, with setattribute set style, OnClick, onMouseOver These attributes are not feasible in IE.
Method II, using Attachevent and AddEventListener
IE Support Attachevent
Obj.attachevent ("onclick", Foo);
function Foo ()
{
Alert ("Test");
}
It can be written together.
Obj.attachevent ("onclick", function () {alert ("Test");});
Other browsers support AddEventListener
Obj.addeventlistener ("Click", Foo, false);
function Foo ()
{
Alert ("Test");
}
Can also be written together
Obj.addeventlistener ("click", Function () {alert ("Test");}, False);
Note that the Attachevent event takes on, such as onclick, and AddEventListener without on, such as Click.
By the way, AddEventListener's third argument, though rarely used, usecapture-if true, usecapture indicates that the user wants to start the capture. When a capture is started, all events of the specified type are assigned to the registered EventListener prior to any eventtargets that is assigned to the tree below it. Events that are bubbling through the tree will not trigger the specified use capture EventListener.
Comprehensive application
if (window.attachevent)
{
Event code for IE
}
Else
{
Event codes for other browsers
}
method Three, event = function
Example: Obj.onclick = Foo;
This is supported in multiple browsers, which belong to the old specification (method II belongs to the DOM2 specification), but because of easy to use, the occasion is also more.

Here is my solution:
Function Show () {
Alert ("Hello, World!!!");
}
Obj.setattribute (' onclick ', document.all eval (function () {Show ()}): ' Javascript:show () ');
Looks very simple, also compatible with the browser, is not aware of any other aspects of the impact, or a better way to replace it?

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.