එකම ශ්‍රිතය අවුලුවාලීමට jQuery බහුවිධ සිදුවීම්

ඇති එහි ක්රමයක් keyup, keypress, blur, හා changeසිද්ධීන් එක් අනුකූලව සමාන කාර්යයක් කතා හෝ මම ඒවා, ෙවන් ෙවන් වශෙයන් කරන්න තියෙන්නේ?

මට ඇති ගැටළුව නම්, සමහර දත්ත ඩීබී විමසුමකින් වලංගු කිරීමට අවශ්‍ය වන අතර එය යතුරු ලියනය කර හෝ කොටුවට අලවා තිබේද යන්න කිසිදු අවස්ථාවක වලංගු කිරීම මග හැරී නැති බවට සහතික කර ගැනීමට කැමතියි.

.on()ශ්‍රිතයක් බහුවිධ සිදුවීම් සමඟ බැඳීමට ඔබට භාවිතා කළ හැකිය :

$('#element').on('keyup keypress blur change', function(e) {
    // e.type is the type of event fired
});

නැතහොත් පරාමිතිය ලෙස ශ්‍රිතය සාමාන්‍ය සිදුවීම් ශ්‍රිත වෙත යොමු කරන්න:

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)

JQuery 1.7 වන විට, .on()සිද්ධිය හසුරුවන්නන් ලේඛනයකට ඇමිණීම සඳහා වඩාත් සුදුසු ක්‍රමය වේ. පෙර සංස්කරණ සඳහා, .bind()සිදුවීම් හසුරුවන්නෙකු සෘජුවම මූලද්‍රව්‍යවලට සම්බන්ධ කිරීම සඳහා ක්‍රමය භාවිතා කරයි.

$(document).on('mouseover mouseout',".brand", function () {
  $(".star").toggleClass("hovered");
})

JQuery එකවර සිදුවීම් කිහිපයකට සවන් දෙන විට මම සිදුවීම් වර්ගය ලබා ගැනීමට ක්‍රමයක් සොයමින් සිටියෙමි, ගූගල් මාව මෙහි තැබුවේය.

එබැවින්, උනන්දුවක් දක්වන අය සඳහා, event.typeමගේ පිළිතුර:

$('#element').on('keyup keypress blur change', function(event) {
    alert(event.type); // keyup OR keypress OR blur OR change
});

වැඩි විස්තර JQuery ලේඛනයේ .

සිදුවීම් කිහිපයකට ශ්‍රිතය ඇමිණීමට ඔබට බන්ධන ක්‍රමය භාවිතා කළ හැකිය . මෙම කේතයේ ඇති ආකාරයට සිදුවීම් නම් සහ හසුරුවන්නාගේ ක්‍රියාකාරිත්වය සමත් කරන්න:

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

තවත් විකල්පයක් වන්නේ jquery api හි දම්වැල් ආධාරක භාවිතා කිරීමයි.

ඔබ එකම සිදුවීම් හසුරුවන්නා සිදුවීම් කිහිපයකට අනුයුක්ත කරන්නේ නම්, ඔබ බොහෝ විට එකවර එකකට වඩා වෙඩි තැබීමේ ගැටලුවට ගොදුරු වේ (උදා: පරිශීලකයා සංස්කරණය කිරීමෙන් පසු ටැබ් එබීම; යතුරුපුවරුව, වෙනස් කිරීම සහ නොපැහැදිලි සියල්ලම ගිනි තැබිය හැකිය).

ඔබට සැබවින්ම අවශ්‍ය වන්නේ මේ වගේ දෙයක් බව පෙනේ:

$('#ValidatedInput').keydown(function(evt) {
  // If enter is pressed
  if (evt.keyCode === 13) {
    evt.preventDefault();

    // If changes have been made to the input's value, 
    //  blur() will result in a change event being fired.
    this.blur();
  }
});

$('#ValidatedInput').change(function(evt) {
  var valueToValidate = this.value;

  // Your validation callback/logic here.
});

මම එය කරන්නේ මෙයයි.

$("input[name='title']").on({
    "change keyup": function(e) {
        var slug = $(this).val().split(" ").join("-").toLowerCase();
        $("input[name='slug']").val(slug);
    },
});

ඔබ නැවත භාවිතා කිරීමට කැමති ශ්‍රිතය පහත පරිදි අර්ථ දැක්විය හැකිය:

var foo = function() {...}

පහත දැක්වෙන පරිදි ('සිද්ධිය') භාවිතා කරමින් එම ක්‍රියාව අවුලුවාලීමට ඔබේ වස්තුවට අවශ්‍ය සිදුවීම් සවන්දෙන්නන් කොපමණ ප්‍රමාණයක් පසුව සැකසිය හැකිය:

$('#selector').on('keyup keypress blur change paste cut', foo);

ටාටූගේ පිළිතුර නම්, මම එය බුද්ධිමත්ව කරන්නේ කෙසේද යන්නයි, නමුත් ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් හි යම් යම් ගැටලු අත්විඳ ඇති අතර, එමඟින් සිදුවීම් කැදැල්ල / බැඳීම සිදු කරයි. .on() ක්‍රමවේදය .

මට ඇති ගැටළුව කුමක්දැයි නිශ්චිතවම නිශ්චය කිරීමට මට නොහැකි විය. නමුත් සමහර විට පහත දැක්වෙන අනුවාද වල ගැටලුව මම දකිමි:

• 2.0.2
• 1.10.1
• 1.6.4
• ජංගම 1.3.0b1
• ජංගම 1.4.2
• ජංගම 1.2.0

මගේ කාර්යභාරය වන්නේ ශ්‍රිතය මුලින්ම අර්ථ දැක්වීමයි,

function myFunction() {
    ...
}

ඉන්පසු සිදුවීම් තනි තනිව හසුරුවන්න

// Call individually due to IE not handling binds properly
$(window).on("scroll", myFunction);
$(window).on("resize", myFunction);

මෙය වඩාත්ම සුදුසු විසඳුම නොවේ, නමුත් එය මට ප්‍රයෝජනවත් වන අතර, මෙම ගැටලුවට බාධා විය හැකි අන්‍යයන්ට උපකාර කිරීම සඳහා මම එය එහි තබනු ඇතැයි සිතුවෙමි

$("element").on("event1 event2 event..n", function() {
   //execution
});

මෙම නිබන්ධනය සිදුවීම් කිහිපයක් හැසිරවීම පිළිබඳව වේ.

ඇති එහි ක්රමයක් keyup, keypress, blur, හා changeසිද්ධීන් එක් අනුකූලව සමාන කාර්යයක් කතා?

.on()පහත දැක්වෙන ව්‍යුහය පිළිගන්නා එය භාවිතා .on( events [, selector ] [, data ], handler )කළ හැකිය:, එබැවින් ඔබට මෙම ක්‍රමයට විවිධ සිදුවීම් යැවිය හැකිය. ඔබේ නඩුවේ එය මේ ආකාරයට විය යුතුය:

$('#target').on('keyup keypress blur change', function(e) {
    // "e" is an event, you can detect the type of event using "e.type"
});

සජීවී උදාහරණය මෙන්න:

$('#target').on('keyup keypress blur change', function(e) {
  console.log(`"${e.type.toUpperCase()}" event happened`)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="target">

JQuery වැනි විශාල පුස්තකාලයක් නොමැතිව ගොඩනංවන ලද DOM ක්‍රම සමඟ මෙය ක්‍රියාත්මක කිරීම සරල ය, ඔබට අවශ්‍ය නම්, එය තව ටිකක් කේතයක් ගනී - සිදුවීම් නම් රාශියක් හරහා නැවත කියන්න, සහ එක් එක් සඳහා සවන්දෙන්නෙකු එක් කරන්න:

function validate() {
  // ...
}

const element = document.querySelector('#element');
['keyup', 'keypress', 'blur', 'change'].forEach((eventName) => {
  element.addEventListener(eventName, validate);
});