1、DOM事件级别(DOM标准指定的级别)
DOM0:
在js中写法element.onclick = function(){},
在html中onclick属性上加js语句;
DOM2:
element.addEventListener(‘click’,function(){},false);
冒泡还是捕获由false/true来定
DOM3:
element.addEventListener(‘keyup’,function(){},false)
事件类型增加了很多,比如鼠标事件、键盘事件
在DOM1标准指定中没有涉及与事件相关的
2、DOM事件模型
捕获:从上往下
冒泡:从当前元素(目标元素)往上
3、什么是DOM事件流
浏览器在为当前页面与用户做交互的过程中,比如点击左键,这个事件是如何传到页面中?如何响应?
第一阶段是捕获,第二阶段目标阶段,第三阶段冒泡;事件通过捕获达到目标元素(第二阶段),从目标元素在上传到window对象(第三阶段),也就是冒泡的过程。
4、DOM事件类,DOM事件捕获的具体流程
第一个接收到事件的是:window**
捕获的过程如下:
window->document->html标签->body->…目标元素
在js中如何获取html标签?
document.documentElement
5、event对象的常见应用
- event.preventDefault() //阻止默认事件
比如在html中form表单,阻止表单的提交;在a标签中给其click事件,
在响应函数中preventDefalut可以阻止链接默认跳转的行为。
<section>
<h1>阻止默认事件</h1>
<a href="./test.html" onClick="preventDefaultFn(event)">点击我测试</a>
</section>
//阻止默认事件例子
function preventDefaultFn(event){
event.preventDefault();
console.log("没有跳转页面了!");
}
点击没有跳转页面
下面是一个实际的应用场景,在form表单中点击button事件,会提交表单刷新页面,如果不阻止表单提交这个默认事件,那么当页面内容很多时,会明显看到页面有一段时间显示空白,那么我们可以通过阻止默认事件来避免这种情况,直接上代码
<body>
这个页面很多很多的内容
<form>
<h1>表单提交刷新页面问题</h1>
<input type="text" value=""/>
<button onClick="unSumbitForm(event)">点击我提交</button>
</form>
</body>
<script>
function unSumbitForm(event){
event.preventDefault();
console.log("我阻止了表单提交刷新页面!!!");
}
</script>
- event.stopPropagation() //阻止冒泡
父元素和子元素,单击子、父元素各执行一个事件,这种情况下当单击子元素时,父元素也会响应,可用stopPropagation阻止冒泡。非标准情况下,用window.event.stopBubble来阻止冒泡
<section>
<h1>阻止事件冒泡</h1>
<div class="parent" onClick="parentFn();">
<p>点击了父元素</p>
<div class="child" onClick="childFn();">点击了子元素</div>
</div>
</section>
function parentFn(){
alert("我是父元素的点击事件");
}
function childFn(){
alert("我是子元素的点击事件");
event.stopPropagation()
}
结果:点击子元素时只执行了childFn()函数;
- event.stopImmediatePropagation()
事件响应优先级中使用
比如一个按钮绑定注册两个事件:A、B事件,想要在A点击时不执行B,那么在A事件函数中添加stopImmediatePropagation 可实现阻止B的执行;
比如一个应用场景
假设点击一个按钮后,需要检测两个input控件的值,值为空时打印’error’,并停止检测下一个input,同时也需停止提单提交。
<body>
<form>
<input type="text" id="txt1">
<input type="text" id="txt2">
<input type="submit" value="button" id="btn">
</form>
<script>
var txt1 = document.querySelector("#txt1");
var txt2 = document.querySelector("#txt2");
var btn = document.querySelector("#btn");
btn.addEventListener("click", function(event) {
if (txt1.value == '') {
alert('error1');
event.stopImmediatePropagation();
}
if (txt2.value == '') {
alert('error2');
event.stopImmediatePropagation();
}
}, false);
btn.addEventListener("click", function() {
alert('Done');
});
</script>
</body>
- event.currentTarget
- event.target
事件委托中,比如中ul父元素for循环出多个li子元素,给每个li注册click事件如何优化?
优化方法:将事件绑定在父元素上,即ul上。
可用event.target获取是哪个li被点击,用event.currentTarget获取当前绑定的事件元素。
<section>
<h1>阻止事件冒泡</h1>
<div class="parent" onClick="parentFn();">
<p>点击了父元素</p>
<div class="child" onClick="childFn();">点击了子元素</div>
</div>
</section>
// 事件委托
function weiTuoEvent(event){
//当前点击的时第几个li
console.log(event.target);
// 事件绑定的节点
console.log(event.currentTarget);
}
自定义事件留着下篇写,晚安!