DOM 事件的三要素

最新推荐文章于 2024-06-10 22:18:41 发布

落叶过河

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量152

点赞数 2

文章标签： javascript 前端 ajax

本文链接：https://blog.csdn.net/m0_55747309/article/details/138588393

版权

的三要素

DOM（Document Object Model）

**两种 on 传统和监听 on+触发条件而监听用addEventListener **

其中传统只能只能绑定元素一次而监听可以使用多次

// // 事件监听方式
box.addEventListener("click",function(){
    alert("我被点击了")
})

box.addEventListener("click",function(){
    alert("我知道了")
})

DOM 事件

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>事件处理示例</title>  
    <script>  
        // 当文档加载完成后执行此函数  
        document.addEventListener('DOMContentLoaded', function() {  
            // 获取按钮元素（事件源）  
            var button = document.getElementById('myButton');  
            
            //传统利用 on 来绑定事件
            button.onclick=function(){
                alert('按钮被点击了！');  
            }
            
            
            
  
            // 定义事件处理程序  
            function handleClick() {  
                alert('按钮被点击了！');  
            }  
  
            // 使用 addEventListener 方法添加点击事件处理程序  
            button.addEventListener('click', handleClick);  
        });  



    </script>  
</head>  
<body>  
    <!-- 这是一个按钮，id为"myButton"，是事件源 -->  
    <button id="myButton">ooo</button>
</body>  
</html>
        
        
        
        
        
        
        
        
        
        
        

// 事件注册有两种方式：传统方式(on方式)    事件监听(addEventListener)
// 区别：传统方式，只能给同一个元素绑定一个事件，多次绑定的话，后边的会覆盖掉前边的
// 事件监听方式，可以同时给同一个元素绑定多个事件
// 例如给#box绑定点击事件
let box = document.getElementById("box")
// 传统方式(on方式)
// box.onclick = function(){
//     alert("哈哈哈哈，我被点击了")
// }
// box.οnclick=function(){
//     alert("你能离我远点吗？")
// }



// // 事件监听方式
box.addEventListener("click",function(){
    alert("我被点击了")
})

box.addEventListener("click",function(){
    alert("我知道了")
})