js基础语法学习4

最新推荐文章于 2024-09-16 08:47:17 发布

落墨浮觞

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量126

点赞数

文章标签： js javascript css

本文链接：https://blog.csdn.net/cckuangniao/article/details/108227689

版权

本文介绍了JavaScript中的事件绑定方式，包括直接赋值、事件属性设置和addEventListener方法。还详细讲解了不同类型的事件，如onclick、onload等，并探讨了事件对象提供的鼠标和键盘事件信息。此外，还讨论了事件捕获机制及其阻止事件向上冒泡的方法。

摘要由CSDN通过智能技术生成

事件绑定

1）给标签的事件属性赋值（函数的调用） - this是window
2）节点.事件属性 = 函数 - this是事件源
3)节点.addEventLisenner(事件名称, 函数) - 事件名称要去掉on; this是事件源
可以给同一个标签的同一个事件绑定不同的驱动程序（一般在原来的功能已经实现了，需要在原功能的基础上添加新的公能的时候才考虑这个问题）

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
        
        <!-- 1.事件绑定
        1）给标签的事件属性赋值（函数的调用） -   this是window
        2）节点.事件属性 = 函数    -   this是事件源
        3)节点.addEventLisenner(事件名称, 函数)    - 事件名称要去掉on; this是事件源
           可以给同一个标签的同一个事件绑定不同的驱动程序（一般在原来的功能已经实现了，需要在原功能的基础上添加新的公能的时候才考虑这个问题）
         -->
        <button id="btn1" type="button">按钮1</button>
        <button id="btn2" type="button">按钮2</button>
        <script type="text/javascript">
            btn1 = document.getElementById('btn1')
            // 绑定事件
            btn1.addEventListener('click', function(){
    
                console.log(this)
                alert('按钮1被点击') 
            })
            
            // 方式绑定两个驱动程序
            btn2 = document.getElementById('btn2')
            // btn2.onclick = function(){
    
            //     alert('按钮2被点击')
            // }
            // btn2.onclick = function(){
    
            //     alert('按钮2再次被点击')
            // }
            
            btn2.addEventListener('click', function(){
    
                alert('按钮2被点击')
            })
            btn2.addEventListener('click', function(){
    
                alert('按钮2再次被点击')
            })
            
            
            
        </script>
         
 </body>
</html>

事件类型

1.常用事件类型
1）onclick - 标签被点击事件(可以绑定在绝大多数的可见标签上)
2）onload - 页面加载完成对应的事件(一般绑定在window上)
3）onmouseover - 鼠标悬停在标签上对应的事件
4）onmouseout - 鼠标离开标签对应的事件
5）onkeydown - 按下按键对应的事件(可以绑定在表单相关标签上)
6）onchange - 值改变事件（）

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
        <script type="text/javascript">
            // 2)onload - 页面加载完成
            window.onload = function(){
    
                // 这儿的代码会在标签都加载完成后执行
                var p1 =  document.getElementById('p1')
                console.log(p1)
            }
        </script>
 </head>
 <