js两种注册事件方式以及区别

最新推荐文章于 2022-10-12 17:18:05 发布

黄大仙No.1

最新推荐文章于 2022-10-12 17:18:05 发布

阅读量420

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_44378358/article/details/107851491

版权

javascript 专栏收录该内容

104 篇文章 9 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<script>
    //1.传统的注册事件方式利用on开头,具有唯一性
    //下方的onclick会替换掉上面的onclick,导致上面的不执行
    var btns=document.querySelectorAll('button');
    btns[0].onclick=function () {
        alert('hi');
    }
    btns[0].onclick=function () {
        alert('how are you');
    }

    //2.w3c标准 推荐方式
    //eventTarget.addEventListener(type,listener[,useCapture]);
    //type:事件类型(不写'on') listener:事件处理函数 useCapture:一个布尔值,目前不需要
    btns[1].addEventListener('click',function () {
        alert('非传统方式1');
    })
    btns[1].addEventListener('click',function () {
        alert('非传统方式2');
    })
    //3.attachEvent i9以前版本支持,了解即可
    //btns[2].attachEvent('onclick',function () {
        //alert('ie老版本才支持的方式');
    //})
</script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

黄大仙No.1

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js两种注册事件方式以及区别

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><button>传统注册事件</button><button>方法监听注册事件</button><script> //1.传统的.
复制链接

扫一扫