本文共 2429 字,大约阅读时间需要 8 分钟。
①行内事件
点击结果如图:
②以“on事件名”的方式点我试试
点击后的效果:
①没有事件的传播
②一个DOM对象只能注册一个类型的事件,后注册的事件会覆盖之前的事件。且只执行最后一个事件。 例如:document.getElementById("btn").οnclick= ()=>{ console.log('我被点击了') } document.getElementById("btn").οnclick= ()=>{ console.log('我才是被点击了') }
点击一次的效果如图:
当我们想要解除DOM0级事件时,我们可以将事件对应的函数赋值为null
,以此消除事件。例如:
document.getElementById("btn").οnclick= null
当我们想取消某些标签自身的默认行为的时候,我们可以将函数的返回值写成“return false"
例如:
我是a标签
效果如图:
我们无论点击a标签多少次,页面都没有跳转到"2.html"页面。监听方法,注册和移除事件处理程序:注册:addEventListener()
和 移除 removeEventListener()
。
①.有一个完整的事件传播
所有事件类型都会经历第一阶段,有的事件不会经历第三阶段(submit)
②.一个DOM对象能注册多个类型的事件,后注册的事件不会覆盖之前的事件 ,事件依次执行。
结果:
停止传播:event.stopPropagation()
当我们在不移除的前提
下想要继续传播的事件不执行
时,我们就可将事件对象event
调用stopPropagation()。 效果如图:
点击indiv后
本应通过冒泡
同时执行的outdiv上
注册的事件不再执行
。 阻止默认动作:event.preventDefault();
我是a标签
效果如图:
我们无论点击a标签多少次,页面都没有跳转到"2.html"页面。事件对象event:事件发生时产生的对象。封装了跟事件相关的信息。
–鼠标信息 –键盘信息IE得到的事件对象div1.onclick = function(){ var e = window.event;} DOM得到事件对象div1.onclick = function(ev){ var e = ev;}
事件传播过程只有冒泡阶段
[object].attachEvent(“onclick”,click1)
[object].detachEvent(“onclick”,click1)
停止传播:window.ecent.cancelBubble=true;
冒泡:(默认 ,第三个参数为false ,可以省略)
document.getElementById("block1").addEventListener("click", function(){ console.log('点击了block1!');});document.getElementById("block2").addEventListener("click", function(){ console.log('点击了block2!');});document.getElementById("block3").addEventListener("click", function(){ console.log('点击了block3!');});点击
执行顺序
:(由内向外)‘点击了block3!’—>‘点击了block2!’—>‘点击了block1!’。
document.getElementById("block1").addEventListener("click", function(){ console.log('点击了block1!');},true);document.getElementById("block2").addEventListener("click", function(){ console.log('点击了block2!');},true);document.getElementById("block3").addEventListener("click", function(){ console.log('点击了block3!');},true);
执行顺序:(由外向内)‘点击了block1!’—>‘点击了block2!’—>‘点击了block3!’。
转载地址:http://swezi.baihongyu.com/