js添加事件监听的方式与this

时间：2022-01-02 05:23:56

js添加事件监听的方式与this

<div id="box1" onclick="alert('Hello,小潘')"></div>

在标签中调用自定义函数

<div id="box1" onclick="Hello()"></div>

    <script>

        function Hello () {

            alert('Hello,小潘');

        }

    </script>

DOM0级事件处理程序

这种方式也是早期的写法，但好处是可以讲js和html完全分离，前提是需要给html元素提供一个额外的id属性（或其它能获取该元素对象的方式）

<div id="box1" ></div>

    <script>

        var box1 = document.getElementById("box1");

        box1.onclick = function () {

            alert("Hello,小潘")

        }

    </script>
 box1.onclick = function () {

            alert("Hello,小潘!")

        }

则前面的事件会被后一个事件覆盖
如果想要清除该事件，则加以下代码即可

box1.onclick = null;

DOM2级事件处理程序

这是目前最流行的事件处理程序，各大主流浏览器全部支持

<div id="box1" ></div>

    <script>

        //添加事件监听器

        //元素节点.addEventListener("事件名", 响应事件的函数, 布尔值)

        //事件名 click mouseover mouseout

        //函数名或者匿名函数

        //事件流 false

        var box1 = document.getElementById("box1");

        box1.addEventListener("click", function() {

            alert("Hello,小潘");

        }, false)

    </script>

即使后面再加同样的事件监听器也不会将前面的覆盖
清除事件

<div id="box1" ></div>

    <script>

        //添加事件监听器

        //元素节点.addEventListener("事件名", 响应事件的函数, 布尔值)

        //事件名 click mouseover mouseout

        //函数名或者匿名函数

        //事件流 false

        var box1 = document.getElementById("box1");

        function Hello () {

            alert("Hello,小潘");

        }

        box1.addEventListener("click",Hello, false);

        //移除事件

        //注意：

        //1. 参数与添加事件时相同

        //2. 添加事件时第二个参数不能是匿名函数

        box1.removeEventListener("click",Hello, false)

    </script>

this 代表谁？

  • 在标签中使用，代表的是标签本身
  • 在函数体中直接使用，代表window
  • 在标签中将this 作为实参传递到函数中，在函数体中使用形参代表标签本身
  • 在事件函数中使用，代表标签本身

相关文章