JS_事件流_事件绑定

最新推荐文章于 2024-07-24 11:09:48 发布

柠檬养乐多.

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量477

点赞数

本文链接：https://blog.csdn.net/ysj94s7/article/details/123136418

版权

01-复习
事件对象
- ev || widnow.event

鼠标信息
- ev.offsetX / offsetY 元素
- ev.clientX / clientY 可视区
- ev.pageX / pageY 页面

事件源
- ev.target || ev.scrElement
- 事件委托

阻止默认行为
- return false
- ev.preventDefault()

02-事件流
结构嵌套事件相同
事件流事件冒泡
<style>
.box1 {
width: 500px;
height: 500px;
background-color: yellow;
margin: 0 auto;
}

.box2 {
width: 300px;
height: 300px;
background-color: pink;
margin: 0 auto;
}

.box3 {
width: 100px;
height: 100px;
background-color: cyan;
margin: 0 auto;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>

<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
<script>
var oBox1 = document.querySelector('.box1')
var oBox2 = document.querySelector('.box2')
var oBox3 = document.querySelector('.box3')

// 结构嵌套事件相同
// 事件流事件冒泡

oBox1.onclick = function () {
alert('box1')
}

oBox2.onclick = function (ev) {
alert('box2')

// 阻止事件流
ev.cancelBubble = true
}

oBox3.onclick = function () {
alert('box3')
}
</script>
</body>

03-模拟事件流
图片点击放大点击可以重新上传
<style>
.small {
width: 300px;
margin: 0 auto;
border: 10px solid #F60;
position: relative;
}

.small img {
width: 100%;
/* display: block; */
vertical-align: top;
}

.small input {
position: absolute;
left: 40%;
bottom: 10px;
}

.big {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .7);
justify-content: center;
align-items: center;
display: none;
}

.big img {
width: 1000px;
}
</style>
</head>

<body>
<div class="small">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-04-25%2F5adfddeccdacf.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648349025&t=2bcb4b73899248ef68aaed624bfa1d7c"
alt="">
<input type="button" value="重新上传">
</div>
<div class="big">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-04-25%2F5adfddeccdacf.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648349025&t=2bcb4b73899248ef68aaed624bfa1d7c"
alt="">
</div>
<script>
var oSmall = document.querySelector('.small')
var oBtn = document.querySelector('.small input')
var oBig = document.querySelector('.big')

oSmall.onclick = function () {
oBig.style.display = 'flex'
}

oBig.onclick = function () {
oBig.style.display = 'none'
}

oBtn.onclick = function (ev) {
alert('重新上传')

// ev.cancelBubble = true // PC
ev.stopPropagation() // PC 移动不兼容低版本浏览器 6 7 8
}
</script>
</body>

04-改变事件流
结构嵌套事件相同
事件流事件捕获（下沉）
事件绑定的第三个参数改成 true
obj.addEventListener(事件, 函数, 布尔值)
<style>
.box1 {
width: 500px;
height: 500px;
background-color: yellow;
margin: 0 auto;
}

.box2 {
width: 300px;
height: 300px;
background-color: pink;
margin: 0 auto;
}

.box3 {
width: 100px;
height: 100px;
background-color: cyan;
margin: 0 auto;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>

// 结构嵌套事件相同
// 事件流事件捕获（下沉）

// 事件绑定的第三个参数改成 true
// obj.addEventListener(事件, 函数, 布尔值)

oBox1.addEventListener('click', function () {
alert('box1')
}, true)

oBox2.addEventListener('click', function () {
alert('box2')
}, true)

oBox3.addEventListener('click', function () {
alert('box3')
}, true)
</script>
</body>

05-事件绑定
   以后代码都要换成事件绑定的写法
oBtn.addEventListener('click', fn)
解除事件绑定
oBtn.removeEventListener('click', fn)
IE
obj.attachEvent('onclick', fn) 加绑定
obj.detachEvent('onclick', fn) 解绑定
       例子
           <body>
<input type="button" value="按钮">
<script>
var oBtn = document.querySelector('input')

oBtn.onclick = function () {
alert(1)
}

// oBtn.onclick = function () {
// alert(2)
// }

function fn() {
alert(2)
}

// 以后代码都要换成事件绑定的写法
oBtn.addEventListener('click', fn)

// 解除事件绑定
oBtn.removeEventListener('click', fn)

// IE
// obj.attachEvent('onclick', fn) 加绑定
// obj.detachEvent('onclick', fn) 解绑定
</script>
</body>

06-禁言
<body>
<input type="text" class="txt">
<input type="button" value="发言" class="send">
<input type="button" value="禁言" class="stop">
<p class="contDown"></p>

function fn() {
alert(oTxt.value)
oTxt.value = ''
}
oSend.addEventListener('click', fn)

var s = 5
var timer = null

oStop.addEventListener('click', function () {
oSend.disabled = true
oSend.removeEventListener('click', fn)
// 用户倒计时提示
clearInterval(timer)
timer = setInterval(function () {
s--
oCoutDown.innerHTML = `倒计时${s}秒`
// 停止定时器
if (s === 0) {
oSend.disabled = false
clearInterval(timer)
oCoutDown.innerHTML = ''
// 继续发言
oSend.addEventListener('click', fn)
}
}, 1000)
})
</script>
</body>

柠檬养乐多.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS_事件流_事件绑定

01-复习事件对象- ev || widnow.event 鼠标信息- ev.offsetX / offsetY 元素- ev.clientX / clientY 可视区- ev.pageX / pageY 页面事件源- ev.target || ev.scrElement- 事件委托阻止默认行为 - return false - ev.preventDefault()02-事件流结...
复制链接

扫一扫