JS 函数event

最新推荐文章于 2025-02-11 17:34:10 发布

原创最新推荐文章于 2025-02-11 17:34:10 发布 · 438 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#函数 #javascript

js 专栏收录该内容

19 篇文章

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <title>01_define.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
        console.log('js绑定事件及event参数');
    </script>
  </head>

  <body>

    <ul>
        <li>aaaaaaa</li>
        <li>bbbbbbb</li>
        <li>ccccccc</li>
        <li>ddddddd</li>

    </ul>


    This is my HTML page. <br>
    <input type="button" value="点击" id="ipt1"/>

    <script type="text/javascript">

        //可以通过以下方式来绑定事件，就可以完成事件和html的解耦和操作， <input type="button" value="点击" id="ipt1" onclick="xx()"/>这种就没有实现解耦和，事件内嵌到html中了
        //在开发中通常使用这种方式绑定事件
        //这个事件处理函数中默认有一个event参数，用来获取相应的事件信息
        var ipt1 = window.document.getElementById("ipt1");
        ipt1.onclick = function(event){
            //特别注意：对于IE而言，不会自动传递event这个参数进去，IE需要通过window.event来获取事件，但是FF又不支持window.event,所以通常用以下方式来解决
            event = event || window.event;
            console.log(event.type);  //click

            //this就是这个按钮对象。
            console.log(this.value);
        }

    </script>
  </body>
</html>