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. 选择排序&冒泡排序&折半查找

    //选择排序 void test2(int a[],int len){ //每次找出一个最小值,最小值依次与原数组交换位置,通过下标来完成交换,最小值下标每次都在变,变量存储 //    假如第一个是 ...

  2. c# autofac结合WebApi的使用

    一.下载相关类库引用 install-package Autofac install-package Autofac.Mvc4 install-package Autofac.WebApi2 二.配置 ...

  3. 牛客小白赛5 无关(relationship) 容斥原理（计算因子数的模板）

    链接:https://www.nowcoder.com/acm/contest/135/A来源:牛客网 若一个集合A内所有的元素都不是正整数N的因数,则称N与集合A无关.   给出一个含有k个元素的集 ...

  4. CF934A A Compatible Pair

    A Compatible Pair time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  5. Net Core DocXCore 实现word模板导出

    实际工作中,往往有这样的需求,需要导出word,还有各种各样的样式,于是有了word模板导出. 实现以下几个需求: 1.表单导出 2.表格导出 3.表单表格混合导出 4.实际用例测试 解决方案: 实现 ...

  6. Java连载27-有返回值的方法注意点

    一.方法注意点 (1)方法的调用不一定再main方法中,可以在其他方法中进行调用,只要是程序执行到的位置,都可以去调用其他方法. (2)方法调用的时候,实参和形参要求个数对应相同,数据类型对应相同,方 ...

  7. 【Offer】[29] 【顺时针打印矩阵】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字. 例如,如果输入如下矩阵:  则依次打印出数字1,2,3,4,8,12, ...

  8. 带你深入了解NPM——NPM初学者指南

    前段时间,我们邀请了我们“城内”(葡萄城)资深开发工程师刘涛为大家分享了一次干货满满的关于Electron线上公开课,在课程过程中有不少同学对于NPM的概念和用法有一些疑问,所以这次我们希望通过这篇文 ...

  9. Go 语言基础——变量常量的定义

    go语言不支持隐式类型转换,别名和原有类型也不能进行隐式类型转换 go语言不支持隐式转换 变量 变量声明 var v1 int var v2 string var v3 [10]int // 数组 v ...

  10. Nginx 反向代理基本框架

    全局配置指令:user nginx; 模块配置段 # 事件驱动模块,提供并发响应功能events{......}# http模块,提供web请求处理,可嵌套其他重要模块http{.......#ser ...