zoukankan      html  css  js  c++  java
  • CustomEvent 使用

    CustomEvent 使用

    <button id="customEvent">触发事件</button>
    <button id="trigger">触发绑定值</button>
    
    const custom = document.getElementById('customEvent')
    const trigger = document.getElementById('trigger')
    
    // 创建一个事件对象,名字为event,事件名称为 build
    const event = new CustomEvent('build', {
        detail: '初始化值', // 初始化事件时传递的所有数据
        bubbles: true,
        age: '年龄'
    })
    
    // 点击 触发自定义事件
    custom.onclick = function() {
        document.dispatchEvent(event)
    }
    
    // 监听 build 自定义事件 这块要和我们创建的类型相同不然无法触发
    document.addEventListener('build', function(e) {
        console.log(e)
    })
    

    发现age 值没有被挂载上去,只有bubbles初始值,在当前位置只能定义指定的属性

    如果要绑定新值可直接通过event.xx 去赋值

    
    // 绑定nam 值
    trigger.onclick = function() {
        // 给这个对象赋 name 值
        event.name = '张三'
    }
    
    

    监听事件可以写多个,在触发自定义事件时都会触发。

  • 相关阅读:
    CKeditor3.6.2 配置与精简
    CKEditor与CKFinder整合并实现文件上传功能
    实体关联关系映射:
    status pending状态
    wx:for
    小程序
    获取指定控件的值
    报表
    dataGridView 设置
    SQLite 的使用
  • 原文地址:https://www.cnblogs.com/wangyong1997/p/13409824.html
Copyright © 2011-2022 走看看