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

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 作为实参传递到函数中，在函数体中使用形参代表标签本身
• 在事件函数中使用，代表标签本身