Mobile and PC-side event binding and canceling browser default style and de-bubbling

Source: Internet
Author: User

# # # Two ways to bind
(DOM0) 1.obj.onclick = fn;

(DOM2) 2.
Ie:obj.attachEvent (event name, event function);
1. No capture (non-standard IE standard IE has IE6 to 10 below)
2. Event name has on
3. Sequence of event function execution: Standard ie-"positive sequence non-standard ie-" reverse order
4.this pointing to Window
Standard: Obj.addeventlistener (event name, event function, whether capture);
1. There is a capture
2. Event name not on
3. The order in which events are executed is a positive sequence
4.this the object that triggered the event


Document.attachevent (' onclick ', fn2);
Document.attachevent (' onclick ', function () {
Fn1.call (document);
});

Capture: Default is false: Bubble true: Capture

Document.addeventlistener (' Click ', Fn1, false);
Document.addeventlistener (' Click ', Fn2, false);

Attention
IE stands for: non-standard IE and standard IE
The standard stands for: standard IE and chrome Firefox ....

# # Synchronous This
function bind (obj, Evname, fn) {
if (Obj.addeventlistener) {//In addition to IE low version can enter
Obj.addeventlistener (Evname, FN, false);
} else {
Obj.attachevent (' on ' + evname, function () {
Fn.call (obj);
});
}
}

Bind (document, ' click ', fn1);

# # # Two different ways to bind
Means of canceling bubbling: Event.cancelbubble = true; (deprecated)
Event.stoppropagation ();

The first type: Default bubbling,
The first: Only one homogeneous event can be bound on an element, and if you continue to bind, the second event function overrides the first


The second type:
Attachevent
Default bubbling
AddEventListener
Whether to capture: false by default
Third parameter: false: Bubbling
true: Capture
The second type: one element can be bound to a number of similar events, they will be executed


# # # Event Unbind
DOM0: To dismiss an event is fairly straightforward, just need to register the event again and set the value to NULL
The principle is that the last registered event is to overwrite the previous one, and the last registration event is set to NULL,
The event binding is also dismissed.

Dom2:removeeventlistener
De-event syntax: Btn.removeeventlistener ("event name", "Event callback", "Capture/bubble");
DetachEvent (IE)


Summary of # #
OnClick form: bubbling
Attachevent: Bubbling
AddEventListener: Third parameter (false: bubbling; true: Capture)

Mobile and PC-side event binding and canceling browser default style and de-bubbling

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.