JS native How to add events

Source: Internet
Author: User

JS Native Add event way: 1. Add directly to the HTML tag

<div onclick= "alert (' div ')" >div</div>

2. use the DOM's on ... method to add

document.getElementById (' div '). onclick = function () {alert (' div ')};

3. add with addeventlistener or attachevent

document.getElementById (' div '). AddEventListener (' click ', function () {alert (' div ')}, False);

native JS event binding and event removal


* @description event bindings, compatible with each browser

* @param target Event Trigger object

* @param type event

* @param func event handler function


function addevents (target, type, func) {

if (Target.addeventlistener)// non ie and IE9

Target.addeventlistener (Type, func, false);

AddEventListener Of course is the registration event, she has three parameters, namely:" event name ", " event callback ", " Capture / bubbling " . The last parameter is a Boolean, andtrue represents the capture event, andfalse represents the bubbling event.

else if (target.attachevent)//ie6 to IE8

Target.attachevent ("On" + Type, func);

else target["on" + type] = func; Ie5



* @description event removal, compatible with each browser

* @param target Event Trigger object

* @param type event

* @param func event handler function


function removeevents (target, type, func) {

if (Target.removeeventlistener)

Target.removeeventlistener (Type, func, false);

else if (target.detachevent)

Target.detachevent ("On" + Type, func);

else target["on" + type] = NULL;


/**btn.removeeventlistener (" event name ", " event callback ", " capture / bubble "); This is the same as the parameters for the binding event, which is explained in detail:

· The name of the event, which means which event to dismiss.

· An event callback is a function that must be the same as the function that registers the event.

· Event Type, Boolean, which must be the same type as when registering the event.


Native JavaScript event Details: http://www.cnblogs.com/iyangyuan/p/4190773.html

JS native How to add events

Related Article

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.