好程序员-千锋教育旗下高端IT职业教育品牌
官方微信
2020-05-09
好程序员 web前端培训
好程序员web前端培训分享JavaScript学习笔记之Event事件二，今天来聊一聊事件的执行机制。
什么是事件的执行机制呢？
思考一个问题？
当一个大盒子嵌套一个小盒子的时候，并且两个盒子都有点击事件
你点击里面的小盒子，外面的大盒子上的点击事件要不要执行
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var oUl = docuemnt.querySelector('ul')
oUl.addEventListener('click', function (e) {
console.log('我是 ul 的点击事件，我被触发了')
})
</script></body>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var oUl = docuemnt.querySelector('ul')
oUl.addEventListener('click', function (e) {
e = e || window.event
var target = e.target || e.srcElement
console.log(target)
})
</script></body>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var oUl = docuemnt.querySelector('ul')
oUl.addEventListener('click', function (e) {
e = e || window.event
var target = e.target || e.srcElement
// 判断你点击的是 li if (target.nodeName.toUpperCase === 'LI') {
// 确定点击的是 li // 因为当你点击在 ul 上面的时候，nodeName 应该是 'UL' // 去做点击 li 的时候该做的事情了 console.log('我是 li，我被点击了')
}
})
</script></body>
<a href="https://www.baidu.com">点击我试试</a><script>
var oA = document.querySelector('a')
a.addEventListener('click', function (e) {
e = e || window.event
console.log(this.href)
e.preventDefault ? e.preventDefault() : e.returnValue = false
})</script>
扫码开启架构师蜕变之旅 >>
开班时间：2021-04-12（深圳）
开班盛况开班时间：2021-05-17（北京）
开班盛况开班时间：2021-03-22（杭州）
开班盛况开班时间：2021-04-26（北京）
开班盛况开班时间：2021-05-10（北京）
开班盛况开班时间：2021-02-22（北京）
开班盛况开班时间：2021-07-12（北京）
预约报名开班时间：2020-09-21（上海）
开班盛况开班时间：2021-07-12（北京）
预约报名开班时间：2019-07-22（北京）
开班盛况
Copyright 2011-2023 北京千锋互联科技有限公司 .All Right
京ICP备12003911号-5
京公网安备 11010802035720号
