js 点击事件

最新推荐文章于 2024-04-29 23:01:06 发布

m0_56381561

最新推荐文章于 2024-04-29 23:01:06 发布

阅读量420

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_56381561/article/details/126231134

版权

事件：

// 组成：

// （1）触发谁的事件：事件源

// （2）触发的什么事件：事件类型

// （3）触发以后做什么：事件处理函数

// 当我们想让元素做什么，就主要写在事件处理函数中、

//事件绑定:

//方式1：

 box1.onclick=function(){
           console.log("div1")
       }


box1.onclick=function(){
       console.log("div2")
        }

以上这种方式进行事件绑定时，后面的会覆盖掉前面的，故最终单击元素时只会打印出div2

方式2：addEventListener()事件监听函数：可以绑定多事件函数，依次执行

 box2.addEventListener("click",function(){
             console.log("box2_1")
         })
         box2.addEventListener("click",function(){
             console.log("box2_2")
         })

此种方式可以给事件绑定多个事件处理函数，且不会被覆盖，依次执行

兼容性问题解决：主要是解决低版本ie浏览器的兼容性问题，但此方法ie11已经不支持了，此种绑定函数还需要在事件前面加上on，但使用addEventListener时已经不需要这样做了

box2.attachEvent("onclick",function(){
            console.log("兼容性")
         })

//事件解绑

//方式1：

 box1.onclick = function() {
                console.log("谢谢惠顾")
                this.onclick = null
            }

//方式2：

 function test(){
                 console.log("谢谢惠顾")
                解绑
                 this.removeEventListener("click",test)
             }
             box2.addEventListener("click",test)

//事件类型

//单击/双击事件

 var div_0 = document.querySelector("#div_0")
        var div_1 = document.querySelector("#div_1")
        var div_2 = document.querySelector("#div_2")
        var div_3 = document.querySelector("#div_3")


 // div_0.onclick=function(){
            //     console.log("单击事件")
            // }
            // div_1.ondblclick=function(){
            //     console.log("双击事件")
            // }

// //mousedown mousemove mouseup

// div_2.οnmοusedοwn=function(){

// console.log("鼠标按下，不松手")

// }

// div_2.οnmοusemοve=function(){

// console.log("鼠标移动")

// }

// div_2.οnmοuseup=function(){

// console.log("鼠标抬起")

// }

//移入移出mouseover mouseout：不仅在元素本身起作用，还会将事件绑定在子元素上

// div_3.οnmοuseοver=function(){