我直接贴代码,不多,也很容易看的懂
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="demo" />
<!-- Simulate click -->
<input type="button" οnclick="changeValue();" value="点击我改变input值" />
<!-- Add a click handler that calls preventDefault -->
<input type="button" οnclick="addHandler();" value="js触发input和change默认事件" />111
<!-- Remove the click handler that calls preventDefault -->
<input type="button" οnclick="removeHandler();" value="js取消触发input和change默认事件" />
<script>
var input = document.getElementById('demo');
input.addEventListener('input', function() {
console.log('oninput event ');
}, true);
input.addEventListener('change', function() {
console.log('onchange event');
}, false);
// 参考网站
// https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript
// https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events
function changeValue() { //改变input的值函数
input.value = Math.random() * 10;
simulateEvent("demo", "change");
simulateEvent("demo", "input");
}
function simulateEvent(id, event) { //js触发事件--事件构造器
var evt = document.createEvent("Event");
evt.initEvent(event, true, true);
var cb = document.getElementById(id);
var canceled = !cb.dispatchEvent(evt);
if (canceled) {
// A handler called preventDefault
// console.log("canceled");
} else {
// None of the handlers called preventDefault
// console.log("not canceled");
}
}
function preventDef(event) {
event.preventDefault();
}
function addHandler() {
document.getElementById("demo").addEventListener("change", preventDef, false);
document.getElementById("demo").addEventListener("input", preventDef, false);
}
function removeHandler() {
document.getElementById("demo").removeEventListener("change", preventDef, false);
document.getElementById("demo").removeEventListener("input", preventDef, false);
}
</script>
</body>
</html>