自定义事件
自定义事件主要会被用于框架、组件设计与实现中。
自定义的事件有许多的创建方式，但实际的业务场景中几乎不会被用到，网络上的文献记载其具体的使用场景也相对较少。
1. 使用 Event 构造函数
<style>
.btn { border: px solid #4caf50; padding: px px; min-width: px; color: #4caf50; background: white; outline: none; }
.btn:active { background: #4caf50; color: white; }
</style>
<div>
<button class="btn">点击我</button>
</div>
<script>
var afterClick = new Event('afterclick');
var btnEle = document.querySelector('.btn');
btnEle.addEventListener('afterclick', function() {
alert('我是点击事件执行完后做的事情');
});
btnEle.onclick = function() {
alert('我被点击了');
this.dispatchEvent(afterClick);
};
</script>
自定义事件是需要手动触发的！
-
bubbles默认 false ，表示是否会冒泡 -
cancelable默认 false ， 表示事件是否可以被取消 -
composed默认 composed， 表示事件是否会在 Shadow DOM 根节点之外触发。
2. 使用 CustomEvent 构造函数
<style>
.btn { border: px solid #4caf50; padding: px px; min-width: px; color: #4caf50; background: white; outline: none; }
.btn:active { background: #4caf50; color: white; }
</style>
<div>
<button class="btn">点击我</button>
</div>
<script>
var afterClick = new CustomEvent('afterclick');
var btnEle = document.querySelector('.btn');
btnEle.addEventListener('afterclick', function() {
alert('我是点击事件执行完后做的事情，我被改成了 CustomEvent');
});
btnEle.onclick = function() {
alert('我被点击了');
this.dispatchEvent(afterClick);
};
</script>
两个例子效果是一样的。
其主要的区别在参数和工作环境上，CustomEvent 是可以在 WebWorker 中被使用的，而 Event 不行。
<style>
input {width: px;padding: px;font-size: px;outline: none;border: px dashed #4caf50;}
input:focus {border: px solid #4caf50;}
</style>
<div>
<input type="text">
</div>
<script>
var inputEle = document.querySelector('input');
var onKeyClick = function(e) {
console.log(e);
alert('现在输入框内容是：' + e.detail.value + '，触发的键是：' + e.detail.keyCode);
};
inputEle.addEventListener('keyup', (e) => {
console.log('键盘按键弹起了');
var keyClick = new CustomEvent('keyclick', {
detail: {
value: e.target.value,
keyCode: e.keyCode,
},
});
inputEle.addEventListener('keyclick', onKeyClick);
inputEle.dispatchEvent(keyClick);
inputEle.removeEventListener('keyclick', onKeyClick);
});
</script>
这里通过 keyup 事件，在事件处理器的最末尾增加了一个 keyclick 事件。这里并没有结合 keydown 来判断按键的落下和弹起，因为一个按键要弹起，必定得先落下，所以只需要监听 keyup。
<style>
input {width: px;padding: px;font-size: px;outline: none;border: px dashed #4caf50;}
input:focus {border: px solid #4caf50;}
</style>
<div>
<input type="text">
</div>
<script>
var inputEle = document.querySelector('input');
var onKeyClick = function(value, keyCode) {
alert('现在输入框内容是：' + value + '，触发的键是：' + keyCode);
};
inputEle.addEventListener('keyup', (e) => {
console.log('键盘按键弹起了');
onKeyClick(e.target.value, e.keyCode);
});
</script>
这就是为什么自定义事件更常用于框架或者库，因为暴露事件有时候比单纯的提供回调配置项更好理解和解耦。