var event = new Event('build');
// Listen for the event.
elem.addEventListener('build', function (e) { /* ... */ }, false);
// Dispatch the event.
elem.dispatchEvent(event);
複製代碼
IE是朵奇葩,須要參考 老式的方式 建立事件。html
CustomEvent()能夠經過detail屬性爲事件增長數據。前端
var event = new CustomEvent('build', { detail: "foo" });
elem.addEventListener('build', function (e) { console.log(e.detail) });
複製代碼
// Create the event.
var event = document.createEvent('Event');
// Define that the event name is 'build'.
event.initEvent('build', true, true);
// Listen for the event.
elem.addEventListener('build', function (e) {
// e.target matches elem
}, false);
// target can be any Element or other EventTarget.
elem.dispatchEvent(event);
複製代碼
從一個子元素觸發事件,祖先元素去捕獲它,能夠選擇性傳入數據。 事先建立好自定義事件。vue
<form>
<textarea></textarea>
</form>
複製代碼
const form = document.querySelector('form');
const textarea = document.querySelector('textarea');
// Create a new event, allow bubbling, and provide any data you want to pass to the "detail" property
const eventAwesome = new CustomEvent('awesome', {
bubbles: true,
detail: { text: () => textarea.value }
});
// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method
form.addEventListener('awesome', e => console.log(e.detail.text()));
// As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point
textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
複製代碼
觸發時才建立自定義事件。git
<form>
<textarea></textarea>
</form>
複製代碼
const form = document.querySelector('form');
const textarea = document.querySelector('textarea');
form.addEventListener('awesome', e => console.log(e.detail.text()));
textarea.addEventListener('input', function() {
// Create and dispatch/trigger an event on the fly
// Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element
this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } }))
});
複製代碼
function simulateClick() {
var event = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
});
var cb = document.getElementById('checkbox');
var cancelled = !cb.dispatchEvent(event);
if (cancelled) {
// A handler called preventDefault.
alert("cancelled");
} else {
// None of the handlers called preventDefault.
alert("not cancelled");
}
}
複製代碼
爲iView的Table組件的TableCell DOM元素建立事件並觸發,動態增刪class實現熱力圖過濾。github
methods: {
// 表格訂閱事件
tdSubscribe() {
this.$nextTick(() => {
// 獲取全部class以blue-alpha開頭的table cell
this.tableCells = document.querySelectorAll('td[class^="blue-alpha"]');
this.tableCells.forEach((cell) => {
cell.addEventListener('toggleCell', (e) => {
if (e.detail) {
e.target.classList.add('hidden-cell');
} else {
e.target.classList.remove('hidden-cell');
}
});
});
});
},
// 表格觸發事件
tdTrigger(range) {
this.tableCells.forEach((cell) => {
const cellValue = parseInt(cell.innerText);
const rangeMin = range[0];
const rangeMax = range[1];
const hiddenCtrl = cellValue < rangeMin || cellValue > rangeMax;
// 新建自定義事件 toggleCell 「toggle渲染單元格」blue-alpha-8-*類名
const toggleEvent = new CustomEvent('toggleCell', { detail: hiddenCtrl });
cell.dispatchEvent(toggleEvent);
});
},
},
複製代碼
參考資料:developer.mozilla.org/en-US/docs/…express
期待和你們交流,共同進步,歡迎你們加入我建立的與前端開發密切相關的技術討論小組:segmentfault
- SegmentFault技術圈:ES新規範語法糖
- SegmentFault專欄:趁你還年輕,作個優秀的前端工程師
- 知乎專欄:趁你還年輕,作個優秀的前端工程師
- Github博客: 趁你還年輕233的我的博客
- 前端開發QQ羣:660634678
- 微信公衆號: 人獸鬼 / excellent_developers
努力成爲優秀前端工程師!微信