Let “native Event” and” V-on “play out

“Event”: Like $emit in vue, you can use new Event to create a native Event for the browser and listen for the Event using addEventListener.

Simple use:

/ / to monitor
el.addEventListener('abc', onAbc);
// Create an event
const event = new Event(type);
// Send event objects
el.dispatchEvent(event);
Copy the code

What does this have to do with Vue?

See, it’s common to bind events to components like this:

<my-scroll @scroll-reach-bottom="onScrollReachBottom"/>
Copy the code

But what if it’s not a component but an HTML element?

<div @scroll-reach-bottom="onScrollReachBottom"/>
Copy the code

To implement the above example, you need to use custom events.

Why not use “components “?

For example, “drag component”, it is known that the component has at least one element (root), so if we use “drag component “:

<my-drag>
    <span>To drag and drop</span>
</my-drag>

<! -- Actual DOM structure -->
<div>
    <span>To drag and drop</span>
</div>
Copy the code

As you can see, components break the DOM structure and can directly affect style when used, so many vUE plug-ins use “vUE directives” to solve this problem.

Better “VUE command”

This is the InfiniteScroll instruction for ele. me UI:

<ul 
    v-infinite-scroll="load" 
    infinite-scroll-distance="10" 
    infinite-scroll-delay="10">
    <li v-for="i in count">{{ i }}</li>
</ul>
Copy the code
export default{
    directives:{
        infiniteScroll
    }
}
Copy the code

By contrast, if the Event is implemented:

<ul @infinite-scroll="load">
    <li v-for="i in count">{{ i }}</li>
</ul>
Copy the code
export default{
    mounted(){
        const is = new InfiniteScroll(this.$el,{
            distance:10.delay:10
        });
        this.$on('hook:destroy', is.destroy); }}Copy the code

To be honest, it doesn’t make much difference to the user, except that the “@” semantics look a little better, but destruction needs to be triggered manually.

But if you’ve ever written a vUE directive, you’ll remember that the design of the vUE directive’s “hook function” is not particularly friendly, requiring the implementation of its own data management between hooks.

However, with Event, you can make your own components into constructors, and the above “state management” problem is solved, and you can write code that is not only a Vue plug-in, it is a normal JS plug-in, can be used in any framework.

Of course, the concept of “modifiers” is still attractive, and can be used together with the Event and “vue directives “if necessary.

How do I use Events?

Define the event ‘ABC’ and assign a value to the event object:

// Register listener
el.addEventListener('abc', event=>{
    'abc' === event.type // true
    1 === event.a // true
});
// Create an event
const event = new Event(type, {
     // Whether the event can bubble is false by default
    bubbles: false.// Whether the event can be canceled (with preventDefault), the default is false
    cancelable: false.// Whether the event triggers a listener outside the shadow DOM root node, false by default,
    // This property refers to the native Web Component. For more information about Web Components, see MDN
    composed: false 
});

// Modify the value of the event object
Object.assign(event, {a:1.b:2});
// Send event objects
el.dispatchEvent(event);
Copy the code

Cancelable instance

el.addEventListener('abc', event=>{
    // Cancelable control
    // cancelable === false
    / / the preventDefault () is invalid
    event.preventDefault();
});
Copy the code

Bubbles instance

parent.appendChild(el);

el.addEventListener('abc', event=>{
    // event.stopPropagation();
});

parent.addEventListener('abc', event=>{
    // Controlled by bubble
    // bubble === false
    // In the event callback bound to the child element,
    // Event.stopPropagation () is not triggered
});
Copy the code

Compatible with

Event
Event

createEvent

const event = document.createEvent('HTMLEvents');
// The parameter has the same meaning as new Event
event.initEvent(type, bubbles, cancelable);
Copy the code

createEvent

Compatible with the code

function dispatchDOMEvent(el, payload, eventInit){
    let event;
    if (void 0! == Event) { event =new Event(type, eventInit);
    } else {
        event = document.createEvent('HTMLEvents'); event.initEvent(type, eventInit? .bubbles, eventInit? .cancelable); }return el.dispatchEvent(event);
}
Copy the code

Source: github.com/any86/any-t…

My application

In fact, this way to cooperate with VUE is also accidentally discovered, not anything complicated, but generally do not think about it.

I made an ✋ gesture library that works with “V-on” under VUE in this way:

Github.com/any86/any-t…

🔥typescript

If you are interested in TS, please check out my TS basics tutorial.

Lesson one: Play with typescript

Lesson two, basic types and introductory advanced types

Lesson three: Generics

Lesson four: Reading advanced types

Lesson 5: What is a namespace

Special, learn typescript in vue3🔥 source 🦕 – “is”

Lesson 6. What is a declare? 🦕 – Global declaration

🔥typescript – Full screen browser (59 lines)

WeChat group

Thank you for your reading. If you have any questions, you can add me to the wechat group, and I will pull you into the wechat group (Because Tencent limits the number of wechat groups to 100, when the number exceeds 100, you must be joined by group members).