Add JavaScript code to an existing event

Question

I wanna add a function to an existing JavaScript event :

<input type="text" value="" maxlength="2048" accesskey="S" title="Rechercher..." id="ctl00_ctl42_g_c33cc49a_f2b3_4d8f_9da7_c43b759a91ea_csr_sbox" autocomplete="off" autocorrect="off" onkeypress="if (Srch.U.isEnterKey(String.fromCharCode(event.keyCode))) { $getClientControl(this).search(this.value);return Srch.U.cancelEvent(event); }" onkeydown="var ctl = $getClientControl(this);ctl.activateDefaultQuerySuggestionBehavior();" onfocus="var ctl = $getClientControl(this);ctl.hidePrompt();ctl.setBorder(true);" onblur="var ctl = $getClientControl(this);ctl.showPrompt();ctl.setBorder(false);" class="ms-textLarge ms-srch-sbLarge-fullWidth">

I wanna add this function to the event onkeydown:

if(window.location.href.indexOf("#k=") > -1) { 
    $("#reset").show();
}

Then use addEventListener and add another event handler

adeneo
– adeneo

2016-10-27 14:50:49 +00:00
Commented Oct 27, 2016 at 14:50 — adeneo
– adeneo, Commented Oct 27, 2016 at 14:50

gurvinder372 · Accepted Answer · 2016-10-27 14:52:19Z

1

Why not use less intrusive and more readable way of writing js using addEventListener

var element = document.querySelector( ".ms-srch-sbLarge-fullWidth" );
element.addEventListener( "keydown", function(){
  var ctl = $getClientControl(this);
  ctl.activateDefaultQuerySuggestionBehavior();
  if(window.location.href.indexOf("#k=") > -1) { 
    $("#reset").show();
  }
});

answered Oct 27, 2016 at 14:52

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ysfibm Over a year ago

it work from the console, but when i add the script to my page it retrieve me an error : Accueil.aspx:630 Uncaught TypeError: Cannot read property 'addEventListener' of null

gurvinder372 Over a year ago

@ysfibm it looks like your script is being executed before your element has loaded.

Mamdouh Saeed · Accepted Answer · 2016-10-27 15:03:52Z

0

Pure JavaScript Element.addEventlistener()

document.getElementById("button").addEventListener("click", function() {
  //excute some 1
  console.log("first event fired");
}, false);

document.getElementById("button").addEventListener("click", function() {
  //excute some 2
  console.log("appended event fired in the same time");
}, false);

<button id='button'>click</button>

JQuery $("selector").on();

$("#button").on("click",function(){
console.log("first call");
});

$("#button").on("click",function(){
console.log("and appended event called in the same time");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='button'>click</button>

answered Oct 27, 2016 at 15:03

Mamdouh Saeed

2,3231 gold badge12 silver badges11 bronze badges

1 Comment

ysfibm Over a year ago

it work from the console, but when i add the script to my page it retrieve me an error : Accueil.aspx:630 Uncaught TypeError: Cannot read property 'addEventListener' of null

Collectives™ on Stack Overflow

Add JavaScript code to an existing event

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related