The preventDefault of Event for JS if invoked when the cancelable attribute value is true, and while executing a listener for the event with passive set to false, signals to the operation that caused event to be dispatched that it needs to be canceled.
<!doctype html>
<html>
<body>
<my-element></my-element>
<output></output>
<script>
function callback(myparameter)
{
myparameter.preventDefault();
document.querySelector("output").innerHTML = myparameter.defaultPrevented;
}
const type = "mytype";
const eventInitDict =
{
cancelable: true
};
const event = new Event(type, eventInitDict);
const target = document.querySelector("my-element");
const options =
{
passive: false
};
target.addEventListener(type, callback, options);
target.dispatchEvent(event);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<button>button</button>
<output></output>
<script>
function callback(myparameter)
{
myparameter.preventDefault();
document.querySelector("output").innerHTML = myparameter.defaultPrevented;
}
const type = "mouseover";
const eventInitDict =
{
cancelable: false
};
const event = new Event(type, eventInitDict);
const target = document.querySelector("button");
target.addEventListener(type, function(){callback(event)});
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<button>button</button>
<output></output>
<script>
function callback(myparameter)
{
myparameter.preventDefault();
document.querySelector("output").innerHTML = myparameter.defaultPrevented;
}
const type = "mouseover";
const event = new Event(type);
const target = document.querySelector("button");
const options =
{
passive: true
};
target.addEventListener(type, callback, options);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<button>button</button>
<output></output>
<script>
function callback(myparameter)
{
myparameter.preventDefault();
document.querySelector("output").innerHTML = myparameter.defaultPrevented;
}
const type = "mouseover";
const target = document.querySelector("button");
target.addEventListener(type, callback);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<input placeholder="prevent lowercase">
<output></output>
<script>
function callback(myparameter)
{
if((97 <= myparameter.charCode) && (myparameter.charCode <= 122))
{
myparameter.preventDefault();
}
document.querySelector("output").innerHTML = myparameter.defaultPrevented;
}
const type = "keypress";
const event = new Event(type);
const target = document.querySelector("input");
target.addEventListener(type, function(){callback(event)});
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<input placeholder="prevent lowercase">
<output></output>
<script>
function callback(myparameter)
{
if((97 <= myparameter.charCode) && (myparameter.charCode <= 122))
{
myparameter.preventDefault();
}
document.querySelector("output").innerHTML = myparameter.defaultPrevented;
}
const type = "keypress";
const target = document.querySelector("input");
const options =
{
passive: true
};
target.addEventListener(type, callback, options);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<input placeholder="prevent lowercase">
<output></output>
<script>
function callback(myparameter)
{
if((97 <= myparameter.charCode) && (myparameter.charCode <= 122))
{
myparameter.preventDefault();
}
document.querySelector("output").innerHTML = myparameter.defaultPrevented;
}
const type = "keypress";
const target = document.querySelector("input");
target.addEventListener(type, callback);
</script>
</body>
</html>