鼠标相关事件执行顺序

与 onmousedown 事件相关连得事件发生次序( 鼠标左侧/中间 按钮):

  1. onmousedown
  2. onmouseup
  3. onclick

与 onmousedown 事件相关连得事件发生次序 (鼠标右侧按钮):

  1. onmousedown
  2. onmouseup
  3. oncontextmenu

区别拖拽和点击

通过鼠标按键间隔来区分

var firstTime = 0;
var lastTime = 0;
var key = false;
document.mousedown = function(){
firstTime = new Date().getTime();
drap...;//执行拖拽
} document.onmouseup = funciton(){
lastTime = new Date().getTime();
if(lastTime - firstTime < 300){
key = true;
}
}
document.onclick = function(){
if(key){
console.log('click');
key = false;
}
}

mousedown&mouseup与click的小差别

mousedown和mouseup的event对象可以通过button属性区分鼠标左中右键。而click无法区分右键,因为右键无法触发click事件。

键盘相关事件执行顺序

与 onkeydown 事件相关联的事件触发次序:

  1. onkeydown
  2. onkeypress
  3. onkeyup

keydown和keypress的小区别

  • keydown可以响应任意键盘按键,keypress只可以响应字符类键盘按键。

  • keypress返回ASCII码,可以转换为相应字符。

如果监听字符类按键并且要区分大小写,用keypress

document.onkeypress = function(){
console.log(String.fromCharCode(e.charCode));
}

如果操作类按键就用keydown

oninput和onchange

oninput通过内容变化来触发

onchange通过聚焦和失焦两个状态下input的value值是否有差别来触发。

JS事件细分的更多相关文章

  1. JS DOM属性+JS事件

    DOM属性 console.log(ele.attributes) 获取ele元素的属性集合 ele.attributes.getNamesItem(attr).nodeValue 获取指定属性值 e ...

  2. js——事件循环

    JS-事件循环 js运行的环境称之为宿主环境. 执行栈 :call stack ,一个数据结构,用于存放各种函数的执行环境,每一个函数执行之前他的相关信息会加入到执行栈中,函数调用之前,创建执行环境, ...

  3. dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  4. 什么是JS事件冒泡?

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...

  5. js事件技巧方法整合

    window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...

  6. js事件浅析

    js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...

  7. js 事件大全

    Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...

  8. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  9. JS事件

    JS事件:  声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event;      所以在下面用到 event 的地方都用 oEvent 代替  1)doucument的 ...

随机推荐

  1. 在Azure DevOps Server (TFS) 中修改团队项目名称

    概述 [团队项目]: 在Azure DevOps Server (原名TFS)中,团队项目(Team Project)是一个最基本的数据组织容器,包含了一个团队或者信息系统中的所有信息,包括源代码.文 ...

  2. 在每页(分页)报表中重复显示标题 - SQL Server Reporting Service (SSRS)

    问题描述 TFS系统提供多种报表,有图表(Chart).Web面板(Dashboard).SharePoint面板.Excel报表,SQL Server Reporting Serivce(SSRS) ...

  3. LeetCode137:Single Number II

    题目: Given an array of integers, every element appears three times except for one. Find that single o ...

  4. Checkpoint--实现步骤

    Checkpoint 实现步骤: 1.将CheckPoint标记写入日志(标记中包含当前数据库中活动的事务信息),并将Log Block写入持久化存储 2.将Buffer Pool中所有的脏页写入磁盘 ...

  5. C# 控件绘制

    绘制方法: 1.在控件的paint事件中绘制 2.绘制成图片,然后作为背景图或图片贴到工作区. Bitmap bmp = new Bitmap(IWidth, this.Height); Graphi ...

  6. docker rpm 下载地址

    http://yum.dockerproject.org/repo/main/centos/7/Packages/

  7. CentOS 7 - 安装Eclipse

    注意问题:Eclipse官方网站提供的tar文件有可能有问题,我今天下载的一个tar文件,在Windows下解压缩,随后放到CentOS 7里面不行,随后我又重新下载一份,还是不行,最终我下载了另外一 ...

  8. 通过网站统计或系统监视器查看IIS并发连接数

    如果要查看IIS连接数,最简单方便的方法是通过“网站统计”来查看,“网站统计”的当前在线人数可以认为是当前IIS连接数;如果要想知道确切的当前网站IIS连接数的话,最有效的方法是通过windows自带 ...

  9. 用layui遇到过的问题

    1.报错“layui.form is not a function”问题 把代码中这一串修改一下:form = layui.form(); 括号去掉就行: form = layui.form; 如果你 ...

  10. python的super用法及含义

    注释:以下都是在python2.7版本验证的 总括:1.python解决二义性问题,经历了深度优先算法.广度优先算法.拓扑排序算法,目前python的版本都是使用拓扑算法(C3)    2.严谨sup ...