We Keep Coding

how to make a javascript event occur only if another event to the same element is first triggered?

I have attached a mouseleave event to the select tag. But I want this event should only occur if a user first clicks the select tag and then removes the mouse from.
function loseFocus() {
var dateSelect=document.querySelector('[name="dayCount"]');
dateSelect.blur();
console.log('mouse leave event triggered')
}
<select name="dayCount" onmouseleave="loseFocus()">
<option >op1</option>
<option >op2</option>
<option>op3</option>
</select>

You can define a variable as false and run a click event on your drop down, then in your call back for the click event set that variable to true. Then in your blur event call back a conditional to check if the variable is true.
You may want to do a mouseout event if you don't want to have to click off the drop down menu after a selection has been made.
let dateSelect = document.querySelector('[name="dayCount"]');
let clicked = false;
function changeClick(){
clicked = true;
}
function checkFocus(){
clicked === true ? console.log('BLUR FIRED -> select has lost focus') : null;
}
function mouseOut(){
clicked === true ? console.log('MOUSEOUT FIRED -> Your mouse is not over the select element') : null;
}
dateSelect.addEventListener('click', changeClick);
dateSelect.addEventListener('blur', checkFocus);
dateSelect.addEventListener('mouseout', mouseOut);
<select name="dayCount">
<option >op1</option>
<option >op2</option>
<option>op3</option>
</select>

click event on HTML select element

I would like to listen a click event in the event. The change event is only fired when I select other items, but I need an event to be triggered even I click the selected one.
For example, when I select Apple, change event triggered. Then I select Apple again, I need an event to be triggered as well.
$("#fruit").on('click', function() {
console.log("click event");
});
$("#fruit").on('change', function() {
console.log("change event");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="fruit">
<option>Apple</option>
<option>Pear</option>
</select>

I solve that problem wrapping the select element with a div element and using the onclick over the div, after that the function javascript call the select element using the id, like this:
HTML:
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div onclick="ReadSelected()">
<select id="fruit">
<option value="Apple">Apple</option>
<option value="Pear">Pear</option>
</select>
</div>
Javascript:
function ReadSelected(){
var selectedValues = $("#fruit").val();
console.log(selectedValues); //if you select apple will be ['Apple']
}

According to the jQuery docs:
The change event is sent to an element when its value changes. This event is limited to elements, boxes and elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
As there is no change when you click on 'Apple' when 'Apple' is already selected, it looks like the 'click' event is your best option. Why exactly do you need the change event to fire when you click the same option? Maybe there is a better solution than firing the change event in this case?

You may check condition on click like below to achieve what you want .
var flag = false;
$('#fruit').on('click', function() {
if (flag) {
console.log($(this).val());
flag = false;
} else {
flag = true;
}
}).on('blur', function() {
flag = false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="fruit">
<option>Apple</option>
<option>Pear</option>
</select>

Behave differently when selecting a dropdown select by click or arrow keys

<select id="s">
<option value="1">selected1</option>
<option value="2">selected2</option>
<option value="3">selected3</option>
<option value="4">selected4</option>
</select>
<div id="se">
</div>
$('body').on('change', '#s', function() {
$('#se').text($('#s :selected').text()+" / unfortunatly it also triggers when Im moving with the UP and DOWN keys, not just with select");
});
https://jsfiddle.net/8kLke2je/
I want this event triggered if I pick an item from the dropbox with mouseclick and not with UP and DOWN arrows.

Just use the "click" event on the select:
$('#s').click(function(){
var sv = $('#s').val();
$('#se').html("That\'s it: "+sv);
});
Here there is a fiddle for it: https://jsfiddle.net/nemoneminis/rwza9xzt/1/

.on passes the event into the callback function. You can utilize that to detect whether it was a click or keypress.
If you bind separately to click and keyup, you can detect which one by checking the event type:
$(document).on('click keyup', '#s', function(e) {
if ('click' == e.type) {
$('#se').text($('#s :selected').text());
}
});

how to prevent onclick event to trigger in select option

I have a select that triggers an event when it is clicked. But I want to prevent it to trigger again when I click in the respective option.
Is there a way to do that?

How about you try using onchange. So if there is not change in what is selected. Nothing is triggered.

Just use onchange event. Here is an example: https://jsfiddle.net/rafb0vyw/2/
$('#sel').on('change', function() {
alert('change');
})

You could check the event.target property, which will have a different value. Like this:
var select = document.querySelector('select');
var span = document.querySelector('span');
select.onclick = function(e) {
// show e.target in snippet (you would remove this line in your code):
span.textContent = 'You clicked on ' + e.target.tagName + '.' +
' Current selected value is ' + select.value;
if(e.target.tagName !== 'SELECT') return; // ignore
// The rest of your event handling comes here...
// This will only be executed when you click the SELECT and not the OPTION.
};
<select>
<option value = 'A'>Option A</option>
<option value = 'B'>Option B</option>
</select>
<span></span>
Make sure to have the event parameter (named e in the above example) defined in your event handler function.

jQuery Option De-Select Event?

I would like to detect the event where an option is de-selected from a select element. So for instance, if my HTML is:
<select id="select_box">
<option value="1">Hot</option>
<option value="2">Cold</option>
<option value="3">Just Right</option>
</select>
And the second option is selected (value="2"), and then the user de-selects it by clicking on another option (such as value="3") or clicking the same option again, how do I detect that event using jQuery? My goal is to fire off a function when it happens.
I tried the following:
$("#select_box option:selected").change(function() {
console.log($(this).val());
});
But it didn't work.

The change event should go on the select element itself:
$("#select_box").change(function() {
console.log($(this).val());
});
This event fires when the value of the select is changed and will match the behaviour you require.
I want the value of the option that was de-selected.
In that case you would need to store the previous value when it's selected, something like this:
$("#select_box").change(function() {
var $select = $(this),
currentValue = $select.val(),
oldValue = $select.data('previous-value');
// do stuff...
$select.data('previous-value', currentValue);
});

Well, this is how I would handle this with with a change Event listener.
$("#select_box").on('change', function(e){
var $t = $(this), data = $t.data('last') || {optText:'none', val:'none'};
$t.next().text('last was ['+data.optText+'] and its value is "'+data.val+'"').end()
.data('last', {optText:$t.children('[value="'+$t.val()+'"]').text(), val:$t.val()});
});
Fiddle HERE

I would enable the element when the option is selected using the one() event binding method

change event will fired only when value is changed which is required by you
$("#select_box").change(function() {
console.log(this.value);
});

You can do it manually some thing like below code i given,
var xSelectedOption = 0;
$("#select_box").change(function() {
if(xSelectedOption != $(this).val())
{
xSelectedOption = $(this).val();
console.log("Option was changed!");
}
});