1. JQuery event registration

JQuery provides us with a convenient event registration mechanism. The advantages and disadvantages of the developer depression operation are as follows:

  • Advantages: Simple operation, and do not worry about event coverage and other problems.
  • Disadvantages: Ordinary event registration can not do event delegate, and can not achieve event unbinding, need to use other methods.

grammar

Demo code

<body> <div></div> <script> $(function() { // 1. A single event registration $(" div "). Click (function () {$(this). The CSS (" background ", "purple"); }); $("div").mouseenter(function() { $(this).css("background", "skyblue"); }); }) </script> </body>Copy the code

2. JQuery event processing

Because of the limitations of the normal registration event method, jQuery has developed several methods to handle the event.

  • On (): for event binding, the best event binding method by far
  • Off (): events are unbound
  • Trigger ()/triggerHandler(): Event trigger

2.1 Event Handling The ON () binding event

Bind ()/live()/delegate()/on(), etc. The best one is: on()

The on() method binds an event handler of one or more events to the matching element

grammar

element.on(events,[selector],fn) 
Copy the code
  1. Events: One or more space-separated event types, such as “click” or “keydown”.
  2. Selector: A child selector of an element.
  3. Fn: The callback function is the listener function bound to the element.

Demo code

The < body > < div > < / div > < ul > < li > we are all good children < / li > < li > we are all good children < / li > < li > we are all good children < / li > < / ul > < ol > < / ol > < script > $(function () {/ / $("div").on({// mouseEnter: function() {// $(this).css("background", "skyblue"); // }, // click: function() { // $(this).css("background", "purple"); / / / /}}); $("div").on("mouseenter mouseleave", function() { $(this).toggleClass("current"); }); $("ul li").click(); $("ul li").click(); $("ul").on("click", "li", function() { alert(11); }); On / / (3) can be dynamically created element binding for the future event $(" ol ") on (" click ", "li", function () {alert (11); }) var li = $("<li> </li>"); $("ol").append(li); }) </script> </body>Copy the code

2.2. Event Handling Off () Unbind event

When the logic on an event is not needed for a specific requirement, the logic on that event can be removed, a process we call event unbinding. JQuery offers a variety of event unbinding methods: Die (), undelegate(), off(), and even one(), which fires only once. We’ll focus on off();

grammar

Demo code

The < body > < div > < / div > < ul > < li > we are all good children < / li > < li > we are all good children < / li > < li > we are all good children < / li > < / ul > < p > I am a p tag < / p > < script > $(function () { / / event binding $(" div ") on ({click: function () {the console. The log (" I click on "); }, mouseover: function() {console.log(' I mouseover '); }}); $("ul").on("click", "li", function() { alert(11); }); $("div").off(); $("div").off("click"); $("ul").off("click", "li"); / / (2) one () but it can trigger a $(" p "). One (" click ", function () {alert (11); }) }) </script> </body>Copy the code

Trigger () Automatically triggers an event

Sometimes, under certain conditions, we want certain events to trigger automatically, such as the auto-play function of the wheel image to be consistent with clicking the right button. The timer can be used to automatically trigger the button click event on the right side without the mouse click trigger. JQuery provides two automatic trigger events () and triggerHandler();

grammar

Demo code

< body > < div > < / div > < input type = "text" > < script > $(function () {/ / bind event $(" div ") on (" click ", function () {alert (11); }); // Automatically trigger events // 1. $("div").click(); Will trigger the default behavior of the element / / 2. Elements. The trigger (" events ") / / $(" div "). The trigger (" click "); Triggers the element's default behavior $("input").trigger("focus"); / / 3. Elements. The triggerHandler element (" events ") is not trigger the default behavior of $(" input ") on (" focus ", function () {$(this). Val (" hello? "); }); $("div").triggerHandler("click"); // $("input").triggerHandler("focus"); }); </script> </body>Copy the code

3. JQuery event object

JQuery encapsulates the event object in DOM, making it more compatible and easier to obtain, with little change in use. When an event is triggered, an event object is created.

grammar

Demo code

<body> <div></div> <script> $(function() {$(document).on("click", function() {console.log(" click on document"); }) $("div").on("click", function(event) { // console.log(event); Console. log(" click div"); event.stopPropagation(); }) }) </script> </body>Copy the code

Note: the event object in jQuery can be used as a reference for API and DOM events.