js自定义事件
2019-03-23 本文已影响0人
obsession_me
<!DOCTYPE html>
<html>
<head>
使用js自定义事件
</head>
<body>
<style>
#whirlyThing {display: none;}
</style>
<button id="clickMe" type="button">Start</button>
<img id="whirlyThing" src="http://img2.efu.com.cn/upfile4/2017/2017-04-12/131364367101751798.jpg" />
<script>
document.addEventListener("ajax-start", e=>{
console.log("ajax-start");
document.getElementById("whirlyThing").style.display = "inline-block";
})
document.addEventListener("ajax-complete", e=>{
console.log("ajax-complete");
document.getElementById("whirlyThing").style.display = "none";
})
// 自定义事件
function triggerEvent(target, eventType, eventDetail){
const event = new CustomEvent(eventType, {
detail: eventDetail,
});
target.dispatchEvent(event); // 自定义事件的触发
}
function performAjaxOperation(){
triggerEvent(document, "ajax-start", {url: "http://www.jxufe.edu.cn"});
setTimeout(()=>{
triggerEvent(document, "ajax-complete");
}, 5000);
}
const button = document.getElementById("clickMe");
button.addEventListener("click", ()=>{
performAjaxOperation();
})
</script>
</body>
</html>
