• 事件的写法

    本课标题：事件初始与事件写法

    引入话术：咱们上节课讲了获取元素的几种方式，一共几种方式啊，分别是什么说出来。咱们看下这节课我们的内容，打开word文档，事件初识，

    事件

    就是触发=>响应机制，打开京东网页看下效果。点击轮播，小点，告诉同学什么是触发=>响应，

    事件的三要素，

    1、事件源：触发的元素，

    2、事件类型：事件触发的方式（鼠标事件，浏览器事件，键盘事件）;

    3、事件的处理程序:事件触发后要执行的代码（函数形式），

    这三要素缺一不可，缺少任何一个，都不能叫做事件，这是重点，大家一定要记住，咱获取元素，是不是有六种方法，通过id，通过className,但是大家想一下，我就想单独获取某一个元素，大家觉得应该用什么，是不是应该用id获取，因为id是唯一的，对吧，但是并不是说别的不可以用，只是说用id的比较好。咱们在页面写一个按钮，给他一个id名，然后获取一下它，咱们在页面看下是不是获取到了，既然获取到了我们就可以进行我们的下一步操作了，绑定事件，第三个知识点，绑定事件 ，事件源.事件类型=事件的处理程序，事件源，就是咱们刚才定义的按钮，比如咱们一会要讲的的单机事件onclick就属于鼠标事件，咱们后面会讲的详细一些，这里知道它是鼠标事件就可以，接下来我们套用这个公式就行了，事件源就是我们的按钮，事件类型就是单击事件onclick，事件处理程序就是一个函数，function(),比如我点一下这个按钮，想让它打印一个你点我了，是不是可以在函数里面写上console.log（‘你点我了’），咱们在页面看下效果，是不是我点击了才能触发，不点击不能触发，咱么看下上面的事件，是不是只有触发了它，它才能响应，不触发不能响应，所以咱们的事件是异步的，如果是同步的是不是应该是1,2,3，但是咱们看下效果，看是不是异步的，咱们还说过定时器SetTimeout也是异步的吧，咱们再看下怎么绑定事件，分三步，咱们再在里面打印一下this,看下它的指向问题，咱们到现在讲过几种this的指向啊，普通函数，对象函数，构造函数，实例化对象，现在又多了一个，在事件函数中，this指向事件源。咱们的第六个知识点、

    事件的写法，分为三种，

    1、内部写法，在script标签中书写，

    2.行内写法，在标签中书写，

    3、外部写法，在外部js中书写，

    第一种就是咱们刚才的写法，

    咱们看第二种，行内书写，

    我们再写个button,写上别点我，我现在想给他绑定个事件 ，但是我不想再script里面写，我想在便签里面写，应该怎么写呢？我们要在标签里面加一个属性，这个属性名就是咱们刚才说的事件类型，比如单机就是οnclick=等于什么呢，咱们刚说、刚才说了是不是等于处理程序，咱们就在里面写上函数名，比如写个fn并且调用一下它，,这个函数咱们还没有定义吧，所以在下面声明一个函数，它的函数名就是点击事件里面的函数名，我单机这个按钮让他打印一下，就点你，看看是不是触发了，咱们刚才说了，在事件函数中，this指向事件源对吧，咱们在里面打印下this看下，咱们看他是不是没有指向事件源，为什么呢，因为这个函数是个普通函数所以他指向了window,那咱们的事件函数是谁，是不是上面这个，对吧，咱们在里面写上this，这是不是实参，在fn函数里面接收一下这个参数，打印一下，看下效果。这就是第二种写法，

    我们看下第三种写法，外部书写法，

    咱们再写个button按钮写上我是一个按钮，咱们创建一个js文件夹，在创建一个js文件，咱们的html是不是应该和js有一个关联，要不是不是无效的，然后把js文件引入，咱们怎么测试一下引入还是没有引入，在js里面直接打印，引入了，我们要获取元素是不是应该获取元素，对吧，获取下元素，咱们看下获取到了么，没有吧？没有获取到怎么绑定，不能绑定对吧。咱们想一下，为什么没有获取到呢？咱们看下控制台，是不是先执行了js,然后在执行body里面的内容，咱们第一种解决办法就是把js放到body的后面，既然拿到了是不是就可以绑定事件了，公式，第二种方法;咱们想下  为什么出现这种问题，是不是因为，咱们浏览器还没有加载完body里面的东西，就开始执行js文件里面的内容了，所以他拿到的是空，所以我们的解决办法就是先让浏览器把bodyl里面的内容加载完，再去执行js,咱们就要介绍下浏览器事件下面的一个方法，咱们浏览器的顶级对象是window,它下面的一个方法onload完成的意思，浏览器加载完成事件，

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>事件初识title>
    9.     
    10. head>
    11.  
    12. <body>
    13.     <button id="btn">快点我button>
    14.     <button onclick="fn(this)">别点我button>
    15.     <button class="btn1">我是外部的按钮button>
    16. body>
    17. <script src="./js/btn.js">script>
    18. <script>
    19.     // 一、事件：触发--->响应
    20.     // 二、事件的三要素 （重点）
    21.     /*
    22.     1、事件源：触发的对象
    23.     2、事件类型：事件触发的方式 （鼠标事件，键盘事件，浏览器事件）
    24.     3、事件处理程序：事件触发后要执行的代码（函数）
    25.     */
    26.     // 三、绑定事件 事件源.事件类型 = 事件处理程序
    27.     // onclick  单击事件  鼠标事件
    28.     // 四 事件是异步的
    29.     // 五、函数中this的指向 事件函数this指向事件源
    30.     // 六、事件的写法
    31.     /* 
    32.     1、内部书写：在script标签写
    33.     2、行内书写：在标签中书写
    34.     3、外部书写：在外部js文件中书写
    35.     */
    36.     var btn = document.getElementById('btn')
    37.     console.log(btn);
    38.     console.log(1);
    39.     btn.onclick = function () {
    40.         console.log("点到我了");
    41.         console.log(2);
    42.         console.log(this);
    43.     }
    44.     console.log(3);
    45.     function fn(that) {
    46.         console.log(that);
    47.         console.log("就点你");
    48.         console.log(this);
    49.     }
    50. script>
    51.  
    52. html>

  • 相关阅读:
    BinLog和RedoLog区别
    【Axure教程】雷达扫描动态效果（航空信息可视化案例）
    SystemVerilog-（按）位运算符
    李宏毅生成式AI课程笔记（持续更新
    Kotlin第二弹：Kotlin基本数据类型
    感冒会引发腺样体肥大吗？
    2023-09-12 mysql-代号m-添加字段且字段非空出错-问题分析
    前端项目：基于Nodejs+vue开发实现酒店管理系统
    转载 | 自动驾驶开源数据集总结
    CONTINUOUS CONTROL WITH DEEP REINFORCEMENT LEARNING
  • 原文地址：https://blog.csdn.net/weixin_47619284/article/details/126257441