初始化触发点击事件_dom自定义事件

为什么要给dom添加自定义事件，有两点用处：1.方便统一操作此dom，给其加上自定义方法，更灵活地处理实际业务；仅需要document.getElementById('id').dispatch(evt),就可以进入自定义方法，根据实际业务进行逻辑处理；2.方便父节点知晓子节点自定义方法是否被触发，一旦触发，父节点可以根据实际情况作出相应逻辑处理，若需要往上通知父节点子节点的方法是否被触发，仅需在初始化事件的时候将冒泡参数配置为true。具体方法分三步走：

第一步：创建事件

var evt = document.createEvent('HTMLEvents')

第二步：初始化事件

evt.initEvent('defaultext', true, true)

第三步：触发事件

let dom = document.getElementById("username")

dom.dispatchEvent(evt)

方法及参数解释：

createEvent(param):param分别有：HTMLEvents、MouseEvents、UIEvents。

initEvent(eventName, canBubble, preventDefault)：分别表示事件名称，是否可以冒泡，是否阻止事件的默认操作。

实例：通过点击【测试】按钮，给用户名和密码都赋值，同时给用户名的父节点背景色设置为白色。

function login_confirm() { 

    init()      

    let dom1 = document.getElementById("username")

    dom1.dispatchEvent(evt)

    let dom2 = document.getElementById("pwd")

    dom2.dispatchEvent(evt)

}

function init() {

    //创建   

    let dom = document.getElementById("username")  

    dom.addEventListener('defaultext', function () {

        this.value = '123456'

        console.log('用户名')

    })

    let ddd = document.getElementById('namecontainer')

    ddd.addEventListener('defaultext', function () {

        this.style="background-color:white"

        console.log('用户名容器')

    })

    let dom2 = document.getElementById("pwd")

    dom2.addEventListener('defaultext', function () {

        this.value = 'mima'

        console.log('密码')

    })

    document.addEventListener('defaultext', function () {

        //this.value = '123456'

        console.log('全局')

    }) 

点击【测试】，打印和页面显示

由于我配置的是冒泡为true，并且父节点配置了监听这个自定义方法，因此执行了修改背景色的代码。

刚刚学做个笔记，以应用为主去了解，有说的不严谨的地方欢迎指正。