Shulou(Shulou.com)06/02 Report--

Editor to share with you how to bind and unbind events in jquery, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

JQuery event binding and unbinding

1.1. JQuery event registration

JQuery provides us with a convenient event registration mechanism, and the advantages and disadvantages of developers' depression operations are as follows:

Advantages: easy to operate, and do not worry about event coverage and other issues.

Disadvantages: ordinary event registration can not do event delegation, and can not achieve event unbinding, need to use other methods.

Grammar

Demo code

$(function () {/ / 1. Single event registration $("div") .click (function () {$(this) .css ("background", "purple");}); $("div") .Mouseenter (function () {$(this) .css ("background", "skyblue");});})

1.2. JQuery event handling

Because of the shortcomings of the general method of registering events, jQuery has developed a number of processing methods, which are explained as follows:

On (): for event binding, the best event binding method currently used

Off (): event unbinding

Trigger () / triggerHandler (): event trigger

1.2.1 event handles the on () bind event

Because of the deficiency of the ordinary event registration method, jQuery has created several new event binding methods bind () / live () / delegate () / on (), among which the best one is: on ()

Grammar

Demo code

We are all good boys $(function () {/ / (1) on can bind one or more event handlers / / $("div"). On ({/ / mouseenter: function () {/ / $(this) .css ("background" "skyblue") / / click: function () {/ / $(this) .css ("background", "purple"); / /} / /}); $("div") .on ("mouseenter mouseleave", function () {$(this) .toggleClass ("current")) }); / / (2) on can implement event delegation / / click is bound to ul, but the trigger object is small li / / $("ul li"). Click () in ul; $("ul"). On ("click", "li", function () {alert (11)) }); / / (3) on can bind events $("ol") .on ("click", "li", function () {alert (11);}) var li = $("I was created later"); $("ol") .append (li) to dynamically created elements in the future. })

1.2.3. Event handles the off () unbind event

When the logic above an event is not needed under specific requirements, the logic on the event can be removed, a process we call event unbinding. JQuery provides us with a variety of event unbinding methods: die () / undelegate () / off (), and even the event binding method one (), which is triggered only once. Here we will focus on off ().

Grammar

Demo code

We're all good kids.

I am a P tag.

$(function () {/ / event binding $("div") .on ({click: function () {console.log ("I clicked");}, mouseover: function () {console.log ('I passed over') ); $("ul"). On ("click", "li", function () {alert (11);}); / / 1. Event unbinds off / / $("div") .off (); / / this unbinds all events on div $("div"). Off ("click"); / / this unbinds the click event $("ul") .off ("click", "li") on div. / / 2. One () but it can only trigger the event once $("p") .one ("click", function () {alert (11);})})

1.2.4. Event handling trigger () automatically triggers events

Sometimes, under certain conditions, we want certain events to be triggered automatically, for example, the auto-play function of the rotation map is consistent with clicking the button on the right. You can use the timer to automatically trigger the right button click event without the need for a mouse click to trigger. Thus jQuery provides us with two automatically triggered events trigger () and triggerHandler ().

Grammar

Demo code

$(function () {/ / bind event $("div") .on ("click", function () {alert (11);}); / / automatically trigger event / / 1. element。 Event () / / $("div") .click (); triggers the default behavior of the element / / 2. The element .trigger ("event") / / $("div") .trigger ("click"); triggers the default behavior of the element $("input"). Trigger ("focus"); / / 3. Element .returerHandler ("event") is the default behavior of the element that does not trigger $("input") .on ("focus", function () {$(this) .val ("how are you"); / / one gets focus, the other does not get $("div") .triggerHandler ("click"); / / $("input") .triggerHandler ("focus");})

1.3. JQuery event object

JQuery encapsulates the event object event in DOM, which makes it more compatible, easier to obtain and little change in use. When an event is triggered, an event object will be generated.

Grammar

Demo code

$(function () {$_ (document) .on ("click", function () {console.log ("clicked document");}) $("div") .on ("click", function (event) {/ / console.log (event); console.log ("clicked div") Event.stopPropagation ();})})

Note: the use of the event object in jQuery can learn from event in API and DOM.

1.4. JQuery copy object

JQuery provides us with two sets of API to quickly obtain and set the size and location of elements, which are easy to use, as follows.

Grammar

Demo code

$(function () {/ / 1. Merge data var targetObj = {}; var obj = {id: 1, name: "andy"}; / / $.extend (target, obj); $.extend (targetObj, obj); console.log (targetObj); / / 2. Will overwrite the original data in targetObj var targetObj = {id: 0}; var obj = {id: 1, name: "andy"}; / / $.extend (target, obj); $.extend (targetObj, obj); console.log (targetObj) })

1.5. Coexistence of jQuery multi-libraries

In actual development, many projects have been developed continuously for more than a decade, and the jQuery version is constantly updated, and the initial jQuery version can not meet the requirements. At this time, it is necessary to ensure that when the old version is running normally, the new function is realized using the new jQuery version. This situation is called jQuery multi-library coexistence.

Grammar

Demo code

(function () {/ / Let jquery release control over $var suibian = jQuery.noConflict (); console.log (suibian ("span"));}) these are all the contents of the article "how to bind and unbind events in jquery". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.