事件的add几种方式

贵哥的编程之路

发布于 2020-10-28 14:54:07

4260

发布于 2020-10-28 14:54:07

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <button id="btn">我是按钮</button>   
 <script type="text/javascript">
      var btn = document.getElementById("btn");
    /*
    方式一:
    1.通过onxxx的方式来添加
    注意点: 由于是给属性赋值, 所以后赋值的会覆盖先赋值
    */
    /*btn.οnclick=function()
    {
        alert("cyg");
    }
    btn.οnclick=function()
    {
        alert("777");
    }
    let obj={};
    obj.say=function()
    {
        console.log("888");
    }
    obj.say=function()
    {
        alert("999");
    }
     obj.say();
     */
    /*
    方式二:
    2.通过addEventListener方法添加
    注意点:
    1.事件名称不需要添加on
    2.后添加的不会覆盖先添加的
    3.只支持最新的浏览器IE9
    */
   /*btn.addEventListener("click",function()
    {
        alert("666");
    });
   btn.addEventListener("click",function()
    {
        alert("777");
    });
    */
    /*
    方式三
    3.通过attachEvent方法添加
    注意点:
    1.事件名称必须加上on
    2.后添加的不会覆盖先添加的
    3.只支持低版本的浏览器
    */
  /* btn.attachEvent("onclick",function()
    {
        alert("666");
    });
    btn.attachEvent("onclick",function()
    {
        alert("6");
    });*/
    cygEvent(btn,"click",function()
        {
            alert("666");
        });
    cygEvent(btn,"click",function()
        {
            alert("666");
        });
 function cygEvent(ele, name, fn)
 {
    if(ele.attachEvent)
    {
        ele.attachEvent("on"+name,fn);
    }
    else
    {
        ele.addEventListener(name,fn);
    }
 }
 </script>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/09/19 ，如有侵权请联系 cloudcommunity@tencent.com 删除

add