javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS事件监听器addEventListener()方法

JavaScript事件监听器addEventListener()方法和一些基本事件详解

作者：千帆过尽皆不是

这篇文章主要介绍了JavaScript事件监听器addEventListener()方法和一些基本事件,这篇文章主要介绍了JavaScript事件监听器addEventListener()方法和一些基本事件的相关资料,需要的朋友可以参考下

一. HTML DOM 事件

什么是事件？

事件是在编译的过程中发生的事情，当事件发生的时候计算机可以自动采取某种行动（即运行一些代码，通常是我们所制定的函数）。常见的事件有：

1.1  鼠标事件

onclick在对象被点击的时候发生
ondblclick在对象被双击的时候发生
onmousedown在鼠标被按下的时候发生
onmouseup在鼠标被松开的时候发生
onmousemove在鼠标被移动的时候发生
onmouseover在鼠标指针被移动到指定元素的时候发生
onmouseout在鼠标指针被移出到指定元素的时候发生

1.2  键盘事件

onkeydown键盘被按下的时候触发事件
onkeypress在键盘按下一个键，然后再松开的时候会触发
onkeyup当键盘上的一个键被松开的时候会触发

1.3 表单事件

onblur元素失去焦点时触发
onfocus元素获取焦点时触发
oninput元素获取用户输入时触发
onreset表单重置时触发
onselect用户选取文本时触发 (比如 <input> 和 <textarea> 中的内容)
onsubmit表单提交时触发

1.4 其他相对常见的事件

onscroll

指定元素滑轮发生滚动的时候会触发事件

onresize

窗口或框架被重新调整大小。

onchange该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)

二.  addEventListener() 方法的介绍和使用

addEventListener() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。

2.1  语法知识

element.addEventListener(event, function, useCapture)

event：

必须填写不可省略。

注意: 在 addEventListener() 方法中不能使用 "on" 前缀，会报错。 例如，我们要使用 "click" ,而不是使用 "onclick"。

function：

必须填写不可省略。

事件发生时运行的函数。

useCapture:

可以省略不写，默认值是 false

true ：使用事件捕获

false ：使用事件冒泡

2.2  addEventListener() 方法的性质

2.2.1 使用外部函数与隐函数

使用外部函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
    <button id="btn">测试按钮</button>
    <p id="demo"></p>
</body>
<script>
    document.getElementById("btn").addEventListener("click",DEMO);
    
    function DEMO(){
        document.getElementById("demo").innerHTML = "测试成功";
    }
</script>
</html>

使用隐函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
    <button id="btn">测试按钮</button>
    <p id="demo"></p>
</body>
<script>
    document.getElementById("btn").addEventListener("click", function(){
        document.getElementById("demo").innerHTML = "测试成功";
    });
</script>
</html>

2.2.2 向一个元素添加多个事件处理程序

addEventListener() 方法允许向相同元素添加多个事件，同时不覆盖已有事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
    <button id="btn">测试按钮</button>
    <p id="demo"></p>
</body>
<script>
    document.getElementById("btn").addEventListener("click",DEMO);
    document.getElementById("btn").addEventListener("click",myFunction);
    
    function DEMO(){
        alert("第一个函数测试成功")
    }

    function myFunction(){
        alert("第二个函数测试成功")
    }
</script>
</html>

2.2.3 向一个元素添加多个相同类型的事件处理程序

需要打开控制台查看结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
    <button id="btn">测试按钮</button>
    <p id="demo"></p>
</body>
<script>
    let btn =  document.getElementById("btn");
    btn.addEventListener("mouseover", myFunctionOver);
    btn.addEventListener("click", DEMO);
    btn.addEventListener("mouseout", myFunctionOut);

    function myFunctionOver(){
        console.log("mouseover","鼠标移入")
    }

    function DEMO(){
        console.log("click","鼠标点击")
    }

    function myFunctionOut(){
        console.log("mouseout","鼠标移出")
    }
</script>
</html>

2.2.4 监测window 对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
    <button id="btn">测试按钮</button>
    <p id="demo"></p>
</body>
<script>
    window.addEventListener("resize", function(){
        document.getElementById("demo").innerHTML = "页面宽度或者高度改变";
    });
</script>
</html>

2.2.5 捕获与冒泡

冒泡：从内到外

捕获：从外到内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>

    <style>
        div 
        {
            background-color: coral;
            border: 1px solid;
            padding: 50px;
        }
    </style>
</head>
<body>
    <div id="myDiv">
        <p id="myP">点击该段落， 我是冒泡</p>
    </div><br>
    <div id="myDiv2">
        <p id="myP2">点击该段落， 我是捕获</p>
    </div>
</body>
<script>
   document.getElementById("myP").addEventListener("click", function() 
    {
        alert("你点击了 P 元素!");
    }, false);

    document.getElementById("myDiv").addEventListener("click", function()
    {
        alert("你点击了 DIV 元素!");
    }, false);

    document.getElementById("myP2").addEventListener("click", function() 
    {
        alert("你点击了 P 元素!");
    }, true);
    
    document.getElementById("myDiv2").addEventListener("click", function() 
    {
        alert("你点击了 DIV 元素!");
    }, true);
</script>
</html>

2.2.6 可以被删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
    <button id="btn">测试按钮</button>
    <br>
    <br>
    <button onclick="shut()">关闭监测按钮</button>
    <p id="demo"></p>
</body>
<script>
    document.getElementById("btn").addEventListener("click",DEMO);
    
    function DEMO(){
        document.getElementById("demo").innerHTML = "测试成功";
        alert("测试成功")
    }
    
    function shut(){
        document.getElementById("btn").removeEventListener("click", DEMO);
        document.getElementById("demo").innerHTML = "";
        alert("监测关闭，显示内容为空,再次点击测试按钮没有反应")
    }

</script>
</html>

三. 小探讨

        如果大家有兴趣的话，可以自己测试一下   addEventListener() 方法的传参效果。

PS：DEMO是"demonstration"的缩写。DEMO的中文含意为“示范”、“展示”、“样片”、“样稿”、“原型”，常被用来称呼具有示范或展示功能及意味的事物。

到此这篇关于JavaScript事件监听器addEventListener()方法和一些基本事件详解的文章就介绍到这了,更多相关JS事件监听器addEventListener()方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文