[js] addEventListener 事件监听 onclick

原创

wx5909dcbadae4c 2022-12-21 10:12:14 博主文章分类：js ©著作权

文章标签 javascript 赋值内存地址匿名函数 文章分类 云平台云计算

©著作权归作者所有：来自51CTO博客作者wx5909dcbadae4c的原创作品，请联系作者获取转载授权，否则将追究法律责任

var oDiv = document.querySelector('div');
oDiv.addEventListener('click' , function(){console.log(111)});

一个标签一个事件类型可以绑定多个事件处理函数
匿名函数

// 绑定事件1
oDiv.addEventListener('click' , function(){console.log(111)});
// 绑定事件2
oDiv.addEventListener('click' , function(){console.log(222)});
// 绑定事件3
oDiv.addEventListener('click' , function(){console.log(333)});

这里的function(){console.log(111)}就是回调函数

可以在同一个标签中添加不同类型的事件。

document.getElementById("myBtn").addEventListener("mouseover", function(){console.log(111)});
document.getElementById("myBtn").addEventListener("click", function(){console.log(111111)});
document.getElementById("myBtn").addEventListener("mouseout", function(){console.log(11111111111)});

已经定义好的函数名称

oDiv.addEventListener( 'click' , fun1 );
function fun1(){
            console.log('我是已经定义好的函数1');
        }

这里的fun1 就是回调函数

on语法

// on语法
        // 赋值形式 后赋值的数据 会 覆盖之前存储的数据
        // 事件类型中 赋值存储的是 匿名函数的 内存地址
        // 后赋值的 匿名函数的内存地址 会 覆盖之前存储的函数的内存地址
        oDiv.onclick = function(){console.log(111)};
        oDiv.onclick = function(){console.log(222)};
        // 最终 事件类型中存储 最后一次赋值的内存地址
        // 调用执行时 只会 触发 最后一次赋值的函数程序
        oDiv.onclick = function(){console.log(333)};

赋值形式后赋值的数据会覆盖之前存储的数据
事件类型中赋值存储的是匿名函数的内存地址
后赋值的匿名函数的内存地址会覆盖之前存储的函数的内存地址