Is onclick a jquery event?-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

Is onclick a jquery event?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 02, 2022 pm 04:05 PM

jquery

onclick is not a jquery event, but in JavaScript. This event occurs when the element is clicked; in jquery, the click() method is associated with onclick. The main function of this method is to execute the The element of the method triggers the onclick event.

Is onclick a jquery event?

The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.

Is onclick a jquery event?

1.onclick is a bound event (it is an event)

Note that the event binding is only JacaScript Yes, there is no such event in Jquery, which tells the browser what to do when the mouse clicks

<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title>测试onclick事件</title>
<script type="text/javascript">
function mouse(){
alert(&#39;我是一张图片!!!&#39;);
}
</script>
</head>
<body>
<img src="/static/imghwm/default1.png"  data-src="../1.jpg"  class="lazy"   alt="图片" οnclick="mouse()"/>
</body>
</html>

2.click method (in jquery)

The function is to trigger the onclick event. As long as the click() method of the element is executed, the onclick event will be triggered.

The main function of the click() method is to trigger the onclick event of the element that calls the click method, which actually simulates the click action of the mouse. In addition, if other executable statements are defined within the click brackets, the click method will execute the statements inside the brackets after the onclick event is executed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>测试Jquery中的click方法(表单选择器)</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
 $(function(){
 $("#btn1").click(function(){
 //alert($("#form1 :input").size());
 //alert($("#form1 :input").length);
 alert($("#form1 input").size());
 });
 });
 </script>
</head>
<body>
  <input type="button" value="选取所有的表单子元素" id="btn1"/><br />
  <form id="form1" action="#">
    <input type="button" value="Button"/><br/>
    <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
    <input type="file" /><br/>
    <input type="hidden" /><br/>
    <input type="image" src="1.jpg"/><br/>
    <input type="password" /><br/>
    <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
    <input type="reset" /><br/>
    <input type="submit" value="提交"/><br/>
    <input type="text" /><br/>
    <select><option>Option</option></select><br/>
    <textarea rows="5" cols="20"></textarea><br/>
    <button>Button</button><br/>
  </form>
  <div></div>
</body>
</html>

Expand knowledge

3. on method (in jQuery)

The on() method binds an event handler to the element in the currently selected jQuery object. In jQuery 1.7, the .on() method provides all the functionality needed to bind event handlers. (Dynamic binding event processing function)

This method has two parameters (the parameters with square brackets in the parameters are optional, choose according to actual needs)

1).on(events,[selector],[data],fn)

events: one or more event types and optional namespaces separated by spaces, such as "click" or "keydown.myPlugin" .

selector: A selector string for the descendants of the selector element that triggers the filter event. If the selected

data: When an event is triggered, event.data must be passed to the event processing function.

fn: The function executed when the event is triggered. The false value can also be used as a shorthand for a function that returns false.

2).on(events-map,[selector],[data])

events-map: one or more events represented by strings Space-separated event type and optional namespace, the value represents the handler function bound to the event.

selector: A selector string to filter the selected elements, the handler will be called on descendant elements of this selector. If the selection is empty or ignored, the event is always fired when it reaches the selected element.

data: When an event is triggered, event.data must be passed to the event processing function.

The on method is to define an event processing function for the element matching the selector (matching now or matching in the future)

Video tutorial recommendation: jQuery video tutorial

The above is the detailed content of Is onclick a jquery event?. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Understanding useState(): A Comprehensive Guide to React State ManagementApr 25, 2025 am 12:21 AM

useState()isaReacthookusedtomanagestateinfunctionalcomponents.1)Itinitializesandupdatesstate,2)shouldbecalledatthetoplevelofcomponents,3)canleadto'stalestate'ifnotusedcorrectly,and4)performancecanbeoptimizedusinguseCallbackandproperstateupdates.

What are the advantages of using React?Apr 25, 2025 am 12:16 AM

Reactispopularduetoitscomponent-basedarchitecture,VirtualDOM,richecosystem,anddeclarativenature.1)Component-basedarchitectureallowsforreusableUIpieces,improvingmodularityandmaintainability.2)TheVirtualDOMenhancesperformancebyefficientlyupdatingtheUI.

Debugging in React: Identifying and Resolving Common IssuesApr 25, 2025 am 12:09 AM

TodebugReactapplicationseffectively,usethesestrategies:1)AddresspropdrillingwithContextAPIorRedux.2)HandleasynchronousoperationswithuseStateanduseEffect,usingAbortControllertopreventraceconditions.3)OptimizeperformancewithuseMemoanduseCallbacktoavoid

What is useState() in React?Apr 25, 2025 am 12:08 AM

useState()inReactallowsstatemanagementinfunctionalcomponents.1)Itsimplifiesstatemanagement,makingcodemoreconcise.2)UsetheprevCountfunctiontoupdatestatebasedonitspreviousvalue,avoidingstalestateissues.3)UseuseMemooruseCallbackforperformanceoptimizatio

useState() vs. useReducer(): Choosing the Right Hook for Your State NeedsApr 24, 2025 pm 05:13 PM

ChooseuseState()forsimple,independentstatevariables;useuseReducer()forcomplexstatelogicorwhenstatedependsonpreviousstate.1)useState()isidealforsimpleupdatesliketogglingabooleanorupdatingacounter.2)useReducer()isbetterformanagingmultiplesub-valuesorac

Managing State with useState(): A Practical TutorialApr 24, 2025 pm 05:05 PM

useState is superior to class components and other state management solutions because it simplifies state management, makes the code clearer, more readable, and is consistent with React's declarative nature. 1) useState allows the state variable to be declared directly in the function component, 2) it remembers the state during re-rendering through the hook mechanism, 3) use useState to utilize React optimizations such as memorization to improve performance, 4) But it should be noted that it can only be called on the top level of the component or in custom hooks, avoiding use in loops, conditions or nested functions.

When to Use useState() and When to Consider Alternative State Management SolutionsApr 24, 2025 pm 04:49 PM

UseuseState()forlocalcomponentstatemanagement;consideralternativesforglobalstate,complexlogic,orperformanceissues.1)useState()isidealforsimple,localstate.2)UseglobalstatesolutionslikeReduxorContextforsharedstate.3)OptforReduxToolkitorMobXforcomplexst

React's Reusable Components: Enhancing Code Maintainability and EfficiencyApr 24, 2025 pm 04:45 PM

ReusablecomponentsinReactenhancecodemaintainabilityandefficiencybyallowingdeveloperstousethesamecomponentacrossdifferentpartsofanapplicationorprojects.1)Theyreduceredundancyandsimplifyupdates.2)Theyensureconsistencyinuserexperience.3)Theyrequireoptim

See all articles