JS事件处理和事件对象

Posted 2020-06-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS事件处理和事件对象相关的知识，希望对你有一定的参考价值。

直接添加到html结构中处理程序属性

<body>
<button onclick="demo()">按钮</button>
<script>
function demo(){
    alert("html事件处理");
}
</script>
</body>

技术分享

这种html事件处理有很大坏处是修改一处函数名称必须同时修改两处（onclick事件内容也要修改）

2.DOMO级事件处理

把一个函数赋值给一个事件

<body>
<button id="btn">按钮</button>
<script>
var a=document.getElementById("btn");
a.onclick=function demo(){alert("DOMO级事件处理")};
</script>
</body>

执行后点击按钮弹出窗口DOMO级事件处理

若加上a.onclick=null则赋值为空，点击按钮不会弹出窗口

它的弊端是如果同时赋值多个a.onclick则前面的事件会被覆盖只弹出最后一个窗口

3.DOMO2级事件处理

addEventListener("事件名",事件函数,"布尔值(可忽略)")

true为事件冒泡

false为事件捕获

现在一般不再使用布尔值，因为多数情况下采取事件冒泡

removeEventListener移除该事件

<body>
<button id="btn">按钮</button>
<script>
var a=document.getElementById("btn").addEventListener("click",function demo(){alert("DOMO二级事件处理")});
</script>
</body>

弹出窗口DOMO二级事件处理

<body>
<button id="btn">按钮</button>
<script>
var a=document.getElementById("btn");
a.addEventListener("click",demo1);
a.addEventListener("click",demo2);
a.addEventListener("click",demo3);
function demo1(){
    alert("DOMO二级处理事件1");
}
function demo2(){
    alert("DOMO二级处理事件2");
}
function demo3(){
    alert("DOMO二级处理事件3");
}
</script>
</body>

多个窗口依次弹出也不会被覆盖，所以DOMO二级事件处理使用最为普遍，可用removeEventListener（“事件名”，事件函数名）移除掉某一事件

二、事件对象

1.事件对象：

在触发一个DOMO事件时都会产生一个对象

2.事件对象event：

（1）type：获取事件的类型

<body>
<button id="btn">按钮</button>
<script>
var a=document.getElementById("btn");
a.addEventListener("click",demo1);
function demo1(e){
    alert(e.type);
}
</script>
</body>

弹出窗口click，表示这个事件的类型是click事件

（2）target：获取事件的目标

<body>
<button id="btn">按钮</button>
<script>
var a=document.getElementById("btn");
a.addEventListener("click",demo1);
function demo1(e){
    alert(e.target);
}
</script>
</body>

弹出窗口

技术分享

表示事件的目标是button元素

（3）stopPropagation（）：阻止事件的冒泡

<body>
<div id="div">
    <button id="btn">按钮</button>
</div>
<script>
    document.getElementById("btn").addEventListener("click",demo1);
    document.getElementById("div").addEventListener("click",demo2);
    function demo1(e){
        alert(e.target);
    }
    function demo2(r){
        alert(r.type);
    }
</script>
</body>

执行后先弹出目标button元素后弹出类型click，由此可知这是事件冒泡，从最根本的元素触发，如果我们不想要事件冒泡，可以采取stopPropagation

<body>
<div id="div">
    <button id="btn">按钮</button>
</div>
<script>
    document.getElementById("btn").addEventListener("click",demo1);
    document.getElementById("div").addEventListener("click",demo2);
    function demo1(e){
        alert(e.target);
        e.stopPropagation();
    }
    function demo2(r){
        alert(r.type);
    }

</script>
</body>

需要注意的是stoPropagation应放在最根本元素的函数里，这样调用才会阻止事件冒泡

（4）preventDefault（）：阻止事件的默认行为（）

<body>
<div id="div">
    <button id="btn">按钮</button>
    <a href="http://baidu.com" id="aid">baidu</a>
</div>
<script>
    document.getElementById("btn").addEventListener("click",demo1);
    document.getElementById("div").addEventListener("click",demo2);
    document.getElementById("aid").addEventListener("click",demo3);
    function demo1(e){
        alert(e.target);

    }
    function demo2(r){
        alert(r.type);
    }
function demo3(q){
   
    q.preventDefault();
}
</script>
</body>

执行后点击baidu不会弹出窗口也不会跳转页面，因为preventDefault把它的默认行为阻止了

以上是关于JS事件处理和事件对象的主要内容，如果未能解决你的问题，请参考以下文章

js学习笔记：事件——事件流事件处理程序事件对象