事件
事件是指可以被JavaScript侦测到的行为
（JavaScript程序采用了异步事件驱动编程（Event-driven programming）模型。 ）
自定义事件
Event构造器
JavaScript提供Event、CustomEvent等构造器使开发可以自定义事件，这里用Event做创建自定义事件
dispatchEvent
对于标准浏览器，其提供了可供元素触发自定义事件的方法：element.dispatchEvent()。
语法
event = new Event(typeArg, {}<eventInit>);
参数
- 参数1：表示所创建事件的名称。
- 参数2：{}
- "bubbles"，可选，Boolean类型，默认值为 false，表示该事件是否冒泡。
- "cancelable"，可选，Boolean类型，默认值为 false， 表示该事件能否被取消。
- "composed"，可选，Boolean类型，默认值为 false，指示事件是否会在影子DOM根节点之外触发侦听器。
代码
<body>
<div id="div"></div>
<script>
let oDiv = document.getElementById('div');
let lookEvent = new Event("look", {"bubbles":true, "cancelable":false});
oDiv.addEventListener('look', () => { console.log('oDiv执行了look事件')});
oDiv.dispatchEvent(lookEvent);
</script>
</body>
结果：
在创建Event时候，参数bubbles=true也就是开启冒泡，现在给window、document也添加上look事件
<body>
<div id="div"></div>
<script>
let oDiv = document.getElementById('div');
let lookEvent = new Event("look", {"bubbles":true, "cancelable":false});
oDiv.addEventListener('look', () => { console.log('oDiv执行了look事件')});
window.addEventListener('look', () => {console.log('window执行了look事件')}, false)
document.addEventListener('look', () => {console.log('document执行了look事件')}, false)
oDiv.dispatchEvent(lookEvent);
</script>
</body>
结果：
可以看到，只触发了oDiv，但是window、document也跟着触发了
事件流
事件对象被调度到事件目标的时候，在分发给事件目标前，会先确定事件对象的传播路径，一旦确定传播路径，事件对象就会经过一个或多个事件阶段，事件有3个阶段:捕获阶段、目标阶段、冒泡阶段
事件流出现的原因：
但事件重叠的时候，谁先触发
解决方式：
- 捕获阶段：由网景公司提出，Netscape Navigator4.0使用的解决方案是capture（由外到内），过去只使用捕获
- 冒泡阶段：由ie提出，ie的解决方案正好相反，bubble （由内到外），过去只使用冒泡
- w3c则将两个阶段都应用在现代浏览器上，由事件对象决定自身在哪个阶段运行，默认是冒泡
例子：
<body>
<div class="wrapper">
<div class="outer">
<div class="inner"></div>
</div>
</div>
<script type="text/javascript">
//子元素的点击事件会向父元素传递点击事件，这就算冒泡现象
var wrapper = document.getElementsByClassName('wrapper')[0];
var outer = wrapper.getElementsByClassName('outer')[0];
var inner = outer.getElementsByClassName('inner')[0];
window.addEventListener('click', function () {
console.log('window')
}, false)
document.addEventListener('click', function () {
console.log('document')
}, false)
wrapper.addEventListener('click', function () {
console.log('wrapper');
}, false);
outer.addEventListener('click', function () {
console.log('outer');
}, false);
inner.addEventListener('click', function () {
console.log('冒泡inner');
}, false);
// //父元素的点击事件会向子元素传递点击事件，这就算事件捕获
window.addEventListener('click', function () {
console.log('window')
}, true)
document.addEventListener('click', function () {
console.log('document')
}, true)
wrapper.addEventListener('click', function () {
console.log('wrapper');
}, true);
outer.addEventListener('click', function () {
console.log('outer');
}, true);
inner.addEventListener('click', function () {
console.log('捕获inner');
}, true);
</script>
</body>
点击inner盒子
将目标阶段的两个事件掉换下执行位置
从结果可以看出
捕获阶段比冒泡阶段先执行，而目标阶段是不存在捕获和冒泡的。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！