事件基础

1. 事件概述

JavaScript 使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为。

简单理解: 触发--- 响应机制

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件,例如,我们可以在用户点击某按钮时产生一个 事件,然后去执行某些操作。

2. 事件三要素

  • 事件源(谁):触发事件的元素
  • 事件类型(什么事件): 例如 click 点击事件
  • 事件处理程序(做啥):事件触发后要执行的代码(函数形式),事件处理函数

案例代码

<body>
    <button id="btn">唐伯虎</button>
    <script>
        // 点击一个按钮,弹出对话框
        // 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
        //(1) 事件源 事件被触发的对象   谁  按钮
        var btn = document.getElementById('btn');
        //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        //(3) 事件处理程序  通过一个函数赋值的方式 完成
        btn.onclick = function() {
            alert('点秋香');
        }
    </script>
</body>

3. 执行事件的步骤

1.获取事件源 2.注册事件(绑定事件) 3.添加事件处理程序(采取函数赋值形式)

案例代码

<body>
    <div>123</div>
    <script>
        // 执行事件步骤
        // 点击div 控制台输出 我被选中了
        // 1. 获取事件源
        var div = document.querySelector('div');
        // 2.绑定事件 注册事件
        // div.onclick 
        // 3.添加事件处理程序 
        div.onclick = function() {
            console.log('我被选中了');
        }
    </script>
</body>

4. 常见的鼠标事件

5. 分析事件三要素

  • 下拉菜单三要素
  • 关闭广告三要素

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 移动端常用开发插件和框架

    移动端要求的是快速开发,所以我们经常会借助于一些插件来帮我完成操作,那么什么是插件呢?

    清出于兰
  • 事件高级

    eventTarget . addEventListener (type, listener[, useCapture] )

    清出于兰
  • 系统模块

    Node运行环境提供的API.因为这些API都是以模块化的方式进行开发的,所以我们又称Node运行环境提供的API为系统模块

    清出于兰
  • C#基础知识回顾--委托事件

    在上一篇看到他我一下子就悟了---委托,被人狂喷。说写的太空,没有什么内容之类的。所以准备在这里重写下,不过还是按着以前的方式尽量简单的写。这里我们以打篮球为...

    hbbliyong
  • JavaScript的事件

    javascript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

    小小鱼儿小小林
  • JavaScript事件对象与事件处理程序

    事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息。既然event是事件对象,那么它必然存在属性

    小蔚
  • C#语法——事件,逐渐边缘化的大哥。

    事件最常见的比喻就是订阅,即,如果你订阅了我的博客,那么,当我发布新博客的时候,你就会得到通知。

    Kiba518
  • 斯坦福吴恩达团队提出NGBoost:用于概率预测的自然梯度提升

    自然梯度提升(NGBoost / Natural Gradient Boosting)是一种算法,其以通用的方式将概率预测能力引入到了梯度提升中。预测式不确定性...

    机器之心
  • 斯坦福吴恩达团队提出NGBoost:用于概率预测的自然梯度提升

    自然梯度提升(NGBoost / Natural Gradient Boosting)是一种算法,其以通用的方式将概率预测能力引入到了梯度提升中。预测式不确定性...

    Datawhale
  • JQuery之内置函数响应事件

    今天给大家介绍一下on函数中events的种类和用法。 具体我把它分为:键盘事件,鼠标事件,input事件,还有一个是基础事件(例如:滚动,界面大小变化等等之类...

    林老师带你学编程

扫码关注云+社区

领取腾讯云代金券