关于DOM三级事件的一些总结

肚肚
974 阅读2分钟

DOM事件级别

DOM 0级事件：

这类事件经常嵌入在html中，比如onclick, onchange等事件，例如：

<button onclick="changeVal">按钮</button>

这类事件也是大家经常遇到的，不做过多解释。

DOM 2级事件：

DOM2级事件有两个很重要的api：addEventListener()、removeEventListener();

下面给大家举一个DOM2级事件中绑定点击事件的例子。

// html部分
<p id="test">test</p>

// js部分
var ele = document.getElementById('test');
ele.addEventListener('click', () => console.log('test一下'));

上图中给id=test的<p>标签绑定了一个点击事件，我们可以用removeEventListener来清楚这个绑定事件，但是有点需要注意：

当你通过removeEventListener来清除addEventListener绑定的事件，addEventListener参数中第二个参数只能是函数名。否则，删除无效。

...上面省略
// 无效删除(因为两次传入的回调函数是存在不同的内存中，不是一个函数)
var ele = document.getElementById('test');
ele.addEventListener('click', () => console.log('test一下'));
ele.removeEventListener('click', () => console.log('test一下'));

//有效删除
var ele = document.getElementById('test');
var fn = () => console.log('test一下');
ele.addEventListener('click', fn);
ele.removeEventListener('click', fn);

DOM 3级事件：

DOM 3级事件主要是对DOM事件的规范和补充：

UI事件：当用户与页面上的元素交互时触发，如：load、scroll 

焦点事件：当元素获得或失去焦点时触发，如：blur、focus

鼠标事件：当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup

滚轮事件：当使用鼠标滚轮或类似设备时触发，如：mousewheel

文本事件：当在文档中输入文本时触发，如：textInput

键盘事件：当用户通过键盘在页面上执行操作时触发，如：keydown、keypress

合成事件：当为IME（输入法编辑器）输入字符时触发，如：compositionstart

变动事件：当底层DOM结构发生变化时触发，如：DOMsubtreeModified

上面整理参考：zhuanlan.zhihu.com/p/32985312

下面说下DOM 3级事件中的自定义事件，先举个例子：

// html部分
<p id="test">test</p>

//js部分
var ele = document.getElementById('test');
var event = ele.createEvent('Event');
event.initEvent('build', true, true);
ele.addEventListener('build', () => console.log('test'));
ele.dispatchEvent(event);

上面的代码给<p>标签绑定了一个自定义的事件build，这里面主要用到了三个api:

createEvent：创建事件；
initEvent：初始化事件；
dispatchEvent：触发事件;

DOM 3级事件中比较特殊的就是自定义事件，下面依次讲解下上面三个api的参数：

createEvent(eventType):
    eventType是指想获取的Event对象的事件模块名,
    主要有‘HTMLEvents’、‘MouseEvents’、‘UIEvents’;

initEvent(eventType,canBubble,cancelable):
    eventType: 字符串值，事件类型。
    canBubble: 事件是否冒泡。
    cancelable: 是否可以用preventDefault()方法取消事件。
dispatchEvent(event):
    event: 定义的事件。
    如果在事件传播过程中调用了 event 的 preventDefault() 方法，
    则返回 false，否则返回 true。

更多的api具体的参数和用法，可以点击下面的链接：developer.mozilla.org/en-US/docs/…

avatar
文章
阅读
粉丝