1. 事件概述

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

简单理解： 触发--- 响应机制。

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。
  1. 事件三要素
  • 事件源（谁）：触发事件的元素
  • 事件类型（什么事件）： 例如 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 常见的鼠标事件

 鼠标事件    	  触发条件

onclick  	鼠标点击左键触发

onmouseover 鼠标经过触发

onmouseout 鼠标离开触发

onfocus 获得鼠标焦点触发

onblur 失去鼠标焦点触发

onmouseup 鼠标弹起触发

onmousemove 鼠标移动触发

onmousedown 鼠标按下触发

事件--JavaScript的更多相关文章

  1. 鼠标单击事件--JavaScript

    <html> <head> <title></title> </head> <script type="text/javas ...

  2. 鼠标移动事件--JavaScript

    鼠标移动事件 <html> <head> <title>鼠标移动事件</title> </head> <style type=&quo ...

  3. 读书笔记(05) - 事件 - JavaScript高级程序设计

    HTML依托于JavaScript来实现用户与WEB网页之间的动态交互,接收用户操作并做出相应的反馈,而事件在此间则充当桥梁的重要角色. 日常开发中,经常会为某个元素绑定一个事件,编写相应的业务逻辑, ...

  4. 使用Raphael 画图(三) 事件 (javascript)

    这章展示事件例子. 下图是官方API的事件: 例子: var butt1 = paper.set(); var a1 = paper.circle(24.833, 26.917, 26.667).at ...

  5. 自定义事件javascript

    自定义事件 1.event构造函数自定义事件 /* * 自定义一个名为build的事件 * bubbles :事件是否冒泡 * cancelable:是否阻止事件的默认操作 * composed:指示 ...

  6. JavaScript事件概览

    JavaScript事件 JavaScript是单线程,在同一个时间点,不可能同时运行两个"控制线程". 事件句柄和事件对象 1.注册事件句柄 标准和非标准 var button= ...

  7. javascript事件大全4

    javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...

  8. 5、JavaScript进阶篇②——函数、事件、内置对象

    一.函数 1. 什么是函数 函数的作用,可以写一次代码,然后反复地重用这个代码. 如:我们要完成多组数和的功能. var sum; sum = 3+2; alert(sum); sum=7+8 ; a ...

  9. JAVASCRIPT事件详解-------原生事件基础....

    javaScirpt事件详解-原生事件基础(一)   事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...

随机推荐

  1. 【第一篇】spring boot 快速入门

    1.开发环境 开发工具:IDEA2018.2.1 JDK:1.9 Maven : 3.3.9 操作系统:window 7 / window 10 2.项目结构 3.详细步骤 3.1 使用IDEA新建M ...

  2. 使用python发生邮箱

    1.在使用邮箱登陆需要在邮箱内开启SMTP服务 2.注意在代码中登陆程序使用的密码为第三方授权登陆码,QQ邮箱为系统提供的授权码 网易邮箱为自己设置的授权码 QQ邮箱模拟 import smtplib ...

  3. poj - 1860 Currency Exchange Bellman-Ford 判断正环

    Currency Exchange POJ - 1860 题意: 有许多货币兑换点,每个兑换点仅支持两种货币的兑换,兑换有相应的汇率和手续费.你有s这个货币 V 个,问是否能通过合理地兑换货币,使得你 ...

  4. CSS3 04. 伸缩布局、设置主轴，侧轴方向、主／侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items；控制子元素顺序、web字体、突变字体

    CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...

  5. Springboot源码分析之代理对象内嵌调用

    摘要: 关于这个话题可能最多的是@Async和@Transactional一起混用,我先解释一下什么是代理对象内嵌调用,指的是一个代理方法调用了同类的另一个代理方法.首先在这儿我要声明事务直接的嵌套调 ...

  6. Day003_linux基础_系统启动过程及系统安装后优化

    Linux系统启动过程: 打开电源开关开机 BIOS自检 MBR引导 grub内核菜单选择 加载内核kernel 运行init进程,系统初始化 然后读取/etc/inittab 配置文件,当前系统所在 ...

  7. 【LeetCode】56-合并区间

    题目描述 给出一个区间的集合,请合并所有重叠的区间. 示例 1: 输入: [[1,3],[2,6],[8,10],[15,18]] 输出: [[1,6],[8,10],[15,18]] 解释: 区间 ...

  8. dropwizard-core模块和应用启动分析

    简介 Dropwizard是一款开发运维友好.高效.RESTful web服务的框架.Dropwizard将稳定.成熟的java生态系统中的库整合为一个简单的.轻量级的包,即跨越了库和框架之间的界限, ...

  9. Go语言标准库之strconv

    Go语言中strconv包实现了基本数据类型和其字符串表示的相互转换. strconv包 strconv包实现了基本数据类型与其字符串表示的转换,主要有以下常用函数: Atoi().Itia().pa ...

  10. (转)java程序调用内存变化过程分析（详细）

    原博地址: https://blog.csdn.net/Myuhua/article/details/81385609 (一)不含静态变量的java程序运行时内存变化过程分析 代码: package ...