JS事件细分
鼠标相关事件执行顺序
与 onmousedown 事件相关连得事件发生次序( 鼠标左侧/中间 按钮):
- onmousedown
- onmouseup
- onclick
与 onmousedown 事件相关连得事件发生次序 (鼠标右侧按钮):
- onmousedown
- onmouseup
- 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 事件相关联的事件触发次序:
- onkeydown
- onkeypress
- 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事件细分的更多相关文章
- JS DOM属性+JS事件
DOM属性 console.log(ele.attributes) 获取ele元素的属性集合 ele.attributes.getNamesItem(attr).nodeValue 获取指定属性值 e ...
- js——事件循环
JS-事件循环 js运行的环境称之为宿主环境. 执行栈 :call stack ,一个数据结构,用于存放各种函数的执行环境,每一个函数执行之前他的相关信息会加入到执行栈中,函数调用之前,创建执行环境, ...
- dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- 什么是JS事件冒泡?
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...
- js事件技巧方法整合
window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...
- js事件浅析
js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...
- js 事件大全
Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- JS事件
JS事件: 声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event; 所以在下面用到 event 的地方都用 oEvent 代替 1)doucument的 ...
随机推荐
- 在Azure DevOps Server (TFS) 中修改团队项目名称
概述 [团队项目]: 在Azure DevOps Server (原名TFS)中,团队项目(Team Project)是一个最基本的数据组织容器,包含了一个团队或者信息系统中的所有信息,包括源代码.文 ...
- 在每页(分页)报表中重复显示标题 - SQL Server Reporting Service (SSRS)
问题描述 TFS系统提供多种报表,有图表(Chart).Web面板(Dashboard).SharePoint面板.Excel报表,SQL Server Reporting Serivce(SSRS) ...
- LeetCode137:Single Number II
题目: Given an array of integers, every element appears three times except for one. Find that single o ...
- Checkpoint--实现步骤
Checkpoint 实现步骤: 1.将CheckPoint标记写入日志(标记中包含当前数据库中活动的事务信息),并将Log Block写入持久化存储 2.将Buffer Pool中所有的脏页写入磁盘 ...
- C# 控件绘制
绘制方法: 1.在控件的paint事件中绘制 2.绘制成图片,然后作为背景图或图片贴到工作区. Bitmap bmp = new Bitmap(IWidth, this.Height); Graphi ...
- docker rpm 下载地址
http://yum.dockerproject.org/repo/main/centos/7/Packages/
- CentOS 7 - 安装Eclipse
注意问题:Eclipse官方网站提供的tar文件有可能有问题,我今天下载的一个tar文件,在Windows下解压缩,随后放到CentOS 7里面不行,随后我又重新下载一份,还是不行,最终我下载了另外一 ...
- 通过网站统计或系统监视器查看IIS并发连接数
如果要查看IIS连接数,最简单方便的方法是通过“网站统计”来查看,“网站统计”的当前在线人数可以认为是当前IIS连接数;如果要想知道确切的当前网站IIS连接数的话,最有效的方法是通过windows自带 ...
- 用layui遇到过的问题
1.报错“layui.form is not a function”问题 把代码中这一串修改一下:form = layui.form(); 括号去掉就行: form = layui.form; 如果你 ...
- python的super用法及含义
注释:以下都是在python2.7版本验证的 总括:1.python解决二义性问题,经历了深度优先算法.广度优先算法.拓扑排序算法,目前python的版本都是使用拓扑算法(C3) 2.严谨sup ...