JavaScript动态监听事件使用

最新推荐文章于 2024-02-16 19:46:25 发布

刘远山

最新推荐文章于 2024-02-16 19:46:25 发布

阅读量1.1k

点赞数

分类专栏：前端专题学习汇总

本文链接：https://blog.csdn.net/weixin_39218464/article/details/108920139

版权

前端专题学习汇总专栏收录该内容

67 篇文章 1 订阅

订阅专栏

编写事件过程（函数）的4种方法：
1，标记中实现
2，js对象添加方法
3，将事件看作是元素节点的标准属性（事件本质）
4，动态监听

实例

1、冒泡事件原理，由里到外依次执行
2、addEventListener动态绑定监听事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .myClass{
            background-color: red;
        }
        body{
            font-size: 40px;
        }
        .text{
            font-size: 40px;
            background-color: yellow ;
        }
    </style>
</head>
<body>
<div id = "myDiv1" onclick="alert('你点了myDiv1')">
    我在mydiv1中
    <p class="myClass" id = "myP1" >我在myP1中</p>
    <ul id = "ul1">
        <li class="myClass" id="li1" onclick="onLi1Click()">1</li>
        <li id = "li2">2</li>
        <li id = "li3">3</li>
    </ul>
    <input type="text" id="myText1" >
    <a href="http://www.baidu.com" id="myA1">我是链接</a>
    <button id="myBtn1">点我</button>
</div>
<script>
    /*function onLi1Click(){
        alert("你点了li1一下");
    }*/
   /* var onLi1Click = function (){
        alert('你好是点了li1一下');
    }*/
   //---------------直接使用js对象，元素节点对象
    /*var btn = document.getElementById("myBtn1");
    btn.onclick = function (){
        alert("你点了btn一下");
    }*/
    //---------------将事件看做标准属性----------
   /* var text = document.getElementById("myText1");
    text.setAttribute("onChange", "tChange()");
    function tChange(){
        alert('你输入了'+text.value+"内容");
    }*/
    //---------------动态监听
     var p = document.getElementById("myP1");
     p.addEventListener("click", function (){
         alert("你点了p标记一下");
     });

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