今天详细讲解JavaScript中的常用事件类型和功能。

一    鼠标事件

  1,  click:点击事件

  等同于mousedown+mouseup,不管这两个事件间隔多久,都会触发一次click事件。

  2,  mousedown:鼠标按下事件

  3,  mouseup:鼠标弹起事件

  4,  mouseover/mouseenter:鼠标移入事件

  5,  mouseout/mouseleave:鼠标移出事件

    注意:ES5添加的mouseenter和mouseleave阻止了事件冒泡。

  6,  mouseover:鼠标移动事件

  7,  contextmenu:右键出现菜单事件

  小技巧:通过事件对象的button属性可以判断鼠标左右键,0:左键;1滚轮;2,:右键。另外,click事件只能由左键触发,只有mousedown和mouseup可以触发右键点击事件。

二    键盘事件

1,keydown:按键按下事件

    可以检测所有按键,但不会返回字符编码。

         2,keypress:按键按下事件

    只能响应字符类按键,可以返回字符的编码,charCode属性。

         3,keyup:按键弹起事件

三    输入框事件

  1,  input

  每输入一次就会触发一次,即只要输入框的内容有变化都会触发该事件。

  2,  change

  聚焦和失去焦点两个时刻内容不同才触发。

  3,  focus,获取焦点

  当输入框获取焦点时触发

  4,  blur,失去焦点

  当输入框失去焦点时触发

  DOM事件处理函数的绑定和使用与click事件基本一致,本篇就不一一举例了。使用时注意他们的特点即可。

DOM之事件(二)的更多相关文章

  1. 《高性能javascript》 领悟随笔之-------DOM编程篇(二)

    <高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

  2. jquery技巧之让任何组件都支持类似DOM的事件管理

    本文介绍一个jquery的小技巧,能让任意组件对象都能支持类似DOM的事件管理,也就是说除了派发事件,添加或删除事件监听器,还能支持事件冒泡,阻止事件默认行为等等.在jquery的帮助下,使用这个方法 ...

  3. js自定义事件、DOM/伪DOM自定义事件

    一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...

  4. 节点操作,节点属性的操作及DOM event事件

    ##1. 节点操作 createElement(标签名) 创建一个指定名称的元素 someone.appendChild(new_node) 追加一个子节点(作为最后的子节点) someone.ins ...

  5. 10-JavaScript之DOM的事件操作

    JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...

  6. 前端 ----关于DOM的事件操作

    关于DOM的事件操作   一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for ...

  7. JavaScript Dom 绑定事件

    JavaScript  Dom 绑定事件 // 先获取Dom对象,然后进行绑定 document.getElementById('xx').onclick document.getElementByI ...

  8. JavaScript学习 - 基础(七) - DOM event(事件)

    DOM event(事件) 定义事件: // 定义事件: //方式一,直接在标签上定义事件 // 方式二: var a11 = document.getElementsByName('a11')[0] ...

  9. python 全栈开发,Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)

    昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2. ...

  10. 漫谈js自定义事件、DOM/伪DOM自定义事件

    一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...

随机推荐

  1. HuffmanTree

    /* 例如,对于数列{pi}={5, 3, 8, 2, 9},Huffman树的构造过程如下: 1. 找到{5, 3, 8, 2, 9}中最小的两个数,分别是2和3,从{pi}中删除它们并将和5加入, ...

  2. offsetX、clientX、screenX、pageX、layerX

    pageX/Y 原点相对于文档窗口左上角. offsetX/Y 原点相对于触发事件元素的左上角,需要注意的是,offset是有负值的,如果你的元素有边框,那么offset会是负值. (黑色为鼠标点击点 ...

  3. vscode同步插件 sync(gist,token)

    网上很多同步教程,按照教程操作upload时一直报错:sync:invalid gist ID 查找问题很久才知道 gist和token是两个东西.下面重新梳理下: 一.下载安装插件 Setting ...

  4. Educational Codeforces Round 42 D. Merge Equals (set + pll)

    CF962D 题意: 给定一个数列,对于靠近左端的两个相同大小的值x可以合并成一个点.把x 乘以2 放在第二个点的位置,问最后的数列大小和每个位子的值. 思路: 利用set 配上 pair 就行了,感 ...

  5. D-query

    SPOJ - DQUERY 题意 求区间内出现一共有几种数字. 上次写了一个主席树,这次用一下莫队,莫队是离线询问的一种操作,将询问分块,如果在同一个块内就按照右端点排序,如果不在同一个块内就按照块的 ...

  6. CodeForces 367 C Sereja and the Arrangement of Numbers 欧拉回路

    Sereja and the Arrangement of Numbers 题解: ummm. 在一副图中,如果全部点的度数是偶数/只有2个点是奇数,则能一笔画. 考虑图的点数k为奇数的时候,那么每个 ...

  7. .net core Webapi +EF

    开发工具 Vs2017 +MSsqlsever 打开VS2017,新建web项目 点击确认,生成项目,在项目中增加文件夹Model,在Model中增加类TodoItem public class To ...

  8. Unity 3D,地形属性

    Terrain Width 地形高度 Terrain Height 地形宽度 Terrain Lenght 地形长度 HeughtMap Resolution  地形高度图的分辨率 Detail Re ...

  9. 15 个有用的 MySQL/MariaDB 性能调整和优化技巧

    MySQL 是一个强大的开源关系数据库管理系统(简称 RDBMS).它发布于 1995 年(20年前).它采用结构化查询语言(SQL),这可能是数据库内容管理中最流行的选择.最新的 MySQL 版本是 ...

  10. 从原理层面掌握@InitBinder的使用【享学Spring MVC】

    每篇一句 大魔王张怡宁:女儿,这堆金牌你拿去玩吧,但我的银牌不能给你玩.你要想玩银牌就去找你王浩叔叔吧,他那银牌多 前言 为了讲述好Spring MVC最为复杂的数据绑定这块,我前面可谓是做足了功课, ...