jQuery

最新推荐文章于 2024-04-29 11:52:08 发布

记得双击！么么哒！

最新推荐文章于 2024-04-29 11:52:08 发布

阅读量213

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/Tigaso/article/details/121332890

版权

本文介绍了JavaScript中传统事件绑定与事件监听的区别，展示了如何使用`.addEventListener`进行事件监听并执行多个函数。示例包括焦点定位、鼠标移动事件以及字符串处理方法如trim和replace。此外，还提供了移动鼠标挂件的实现代码。

摘要由CSDN通过智能技术生成

1.传统绑定事件与监听事件的区别

.addEventListener("事件类型不带on",function(){})

区别：

传统绑定事件只能执行一个函数

如果要用事件监听绑定多个函数的话

会一一执行

let button = document.getElementsByTagName("button");
button[0].onclick = function (ev){
alert("我是1")
}
button[1].onclick = function (ev){
alert("我是11")
}
button[1].addEventListener("click",function (ev){
alert("我是2")
})
button[1].addEventListener("click",function (ev){
alert("我是22")
})
空格定位搜索框

.focus()

let input = document.getElementsByTagName("input")
document.addEventListener("keyup",function (ad){
if (ad.keyCode===32){
input[0].focus()
}
})
移动鼠标挂件

<head>
<style>
img{
position: absolute;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<img src="img.jpg" alt="">
<script>
let img = document.getElementsByTagName("img")
document.addEventListener("mousemove", function (ad){
img[0].style.left = ad.pageX-25+"px"
img[0].style.top = ad.pageY-25+"px"
})
</script>
</body>
字符串去除空格