JS 触发事件整理

2023-11-17

一般事件

onclick IE3、N2鼠标点击时触发此事件

ondblclick IE4、N4鼠标双击时触发此事件

onmousedown IE4、N4按下鼠标时触发此事件

onmouseup IE4、N4鼠标按下后松开鼠标时触发此事件

onmouseover IE3、N2当鼠标移动到某对象范围的上方时触发此事件

onmousemove IE4、N4鼠标移动时触发此事件

onmouseout IE4、N3当鼠标离开某对象范围时触发此事件

onkeypress IE4、N4当键盘上的某个键被按下并且释放时触发此事件.

onkeydown IE4、N4当键盘上某个按键被按下时触发此事件

onkeyup IE4、N4当键盘上某个按键被按放开时触发此事件

页面相关事件

onabort IE4、N3 图片在下载时被用户中断

onbeforeunload IE4、N当前页面的内容将要被改变时触发此事件

onerror IE4、N3 出现错误时触发此事件

onload IE3、N2 页面内容完成时触发此事件

onmove IE、N4浏览器的窗口被移动时触发此事件

onresize IE4、N4当浏览器的窗口大小被改变时触发此事件

onscroll IE4、N浏览器的滚动条位置发生变化时触发此事件

onstop IE5、N浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断

onunload IE3、N2 当前页面将被改变时触发此事件

表单相关事件

onblur IE3、N2当前元素失去焦点时触发此事件

onchange IE3、N2当前元素失去焦点并且元素的内容发生改变而触发此事件

onfocus IE3 、N2当某个元素获得焦点时触发此事件

onreset IE4 、N3当表单中RESET的属性被激发时触发此事件

js的event详解(鼠标的位置及状态、按下的键)

event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。

event对象只在事件发生的过程中才有效。

event的某些属性只对特定的事件有意义。比如,fromElement和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。

例子

下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转。

<HTML>

<HEAD><TITLE>Cancels Links</TITLE>

<SCRIPT LANGUAGE="JScript">

function cancelLink() {

    if (window.event.srcElement.tagName == "A" && window.event.shiftKey)

    window.event.returnValue = false;

}

</SCRIPT>

<BODY οnclick="cancelLink()">

下面的例子在状态栏上显示鼠标的当前位置。

code<BODY οnmοusemοve="window.status = 'X=' + window.event.x + ' Y=' + window.event.y">

属性:

altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX,

screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y

1.altKey

描述:

检查alt键的状态。

语法:

event.altKey

可能的值:

当alt键按下时,值为 TRUE ,否则为FALSE 。只读。

2.button

描述:

检查按下的鼠标键。

语法:

event.button

可能的值:

0 没按键

1 按左键

2 按右键

3 按左右键

4 按中间键

5 按左键和中间键

6 按右键和中间键

7 按所有的键

这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。对其他事件,不管鼠标状态如何,都返回 0(比如onclick)。

3.cancelBubble

描述:

检测是否接受上层元素的事件的控制。

语法:

event.cancelBubble[ = cancelBubble]

可能的值:

这是一个可读写的布尔值:

TRUE 不被上层原素的事件控制。

FALSE允许被上层元素的事件控制。这是默认值。

例子:

下面的代码片断演示了当在图片上点击(onclick)时,如果同时shift键也被按下,就取消上层元素(body)上的事件onclick所引发的showSrc()函数。

code<SCRIPT LANGUAGE="JScript">

function checkCancel() {

    if (window.event.shiftKey)

    window.event.cancelBubble = true;

}

function showSrc() {

    if (window.event.srcElement.tagName == "IMG")

    alert(window.event.srcElement.src);

}

</SCRIPT>

<BODY οnclick="showSrc()">

<IMG οnclick="checkCancel()" src="/sample.gif">

4.clientX

描述:

返回鼠标在窗口客户区域中的X坐标。

语法:

event.clientX

注释:

这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

5.clientY

描述:

返回鼠标在窗口客户区域中的Y坐标。

语法:

event.clientY

注释:

这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

6.ctrlKey

描述:

检查ctrl键的状态。

语法:

event.ctrlKey

可能的值:

当ctrl键按下时,值为 TRUE,否则为 FALSE 。只读。

7.fromElement

描述:

检测 onmouseover 和onmouseout 事件发生时,鼠标所离开的元素。 参考:18.toElement

语法:

event.fromElement

注释:

这是个只读属性。

8.keyCode

描述:

检测键盘事件相对应的内码。

这个属性用于 onkeydown, onkeyup, 和 onkeypress 事件。

语法:

event.keyCode[ = keyCode]

可能的值:

这是个可读写的值,可以是任何一个Unicode键盘内码。如果没有引发键盘事件,则该值为0 。

9.offsetX

描述:

检查相对于触发事件的对象,鼠标位置的水平坐标

语法:

event.offsetX

10.offsetY

描述:

检查相对于触发事件的对象,鼠标位置的垂直坐标

语法:

event.offsetY

11.propertyName

描述:

设置或返回元素的变化了的属性的名称。

语法:

event.propertyName [ = sProperty ]

可能的值:

sProperty是一个字符串,指定或返回触发事件的元素在事件中变化了的属性的名称。

这个属性是可读写的。无默认值。

注释:

你可以通过使用onpropertychange 事件,得到 propertyName 的值。

例子:

下面的例子通过使用onpropertychange 事件,弹出一个对话框,显示 propertyName 的值。

code<HEAD>

<SCRIPT>

function changeProp(){

    btnProp.value = "This is the new VALUE";

}

function changeCSSProp(){

    btnStyleProp.style.backgroundColor = "aqua";

}

</SCRIPT>

</HEAD>

<BODY>

<P>The event object property propertyName is

used here to return which property has been

altered.</P>

<INPUT TYPE=button ID=btnProp οnclick="changeProp()"

VALUE="Click to change the VALUE property of this button"

onpropertychange='alert(event.propertyName+" property has changed value")'>

<INPUT TYPE=button ID=btnStyleProp

οnclick="changeCSSProp()"

VALUE="Click to change the CSS backgroundColor property of this button"

onpropertychange='alert(event.propertyName+" property has changed value")'>

</BODY>

12.returnValue

描述:

设置或检查从事件中返回的值

语法:

event.returnValue[ = Boolean]

可能的值:

true 事件中的值被返回

false 源对象上事件的默认操作被取消

例子见本文的开头。

13.screenX

描述:

检测鼠标相对于用户屏幕的水平位置

语法:

event.screenX

注释:

这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

14.screenY

描述:

检测鼠标相对于用户屏幕的垂直位置

语法:

event.screenY

注释:

这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

15.shiftKey

描述:

检查shift键的状态。

语法:

event.shiftKey

可能的值:

当shift键按下时,值为 TRUE,否则为 FALSE 。只读。

16.srcElement

描述:

返回触发事件的元素。只读。例子见本文开头。

语法:

event.srcElement

17.srcFilter

描述:

返回触发 onfilterchange事件的滤镜。只读。

语法:

event.srcFilter

18.toElement

描述:

检测 onmouseover 和onmouseout 事件发生时,鼠标所进入的元素。 参考:7.fromElement

语法:

event.toElement

注释:

这是个只读属性。

例子:下面的代码演示了当鼠标移到按钮上时,弹出一个对话框,显示“mouse arrived”

code<SCRIPT>

function testMouse(oObject) {

    if(oObject.contains(event.toElement)) {

        alert("mouse arrived");

    }

}

</SCRIPT>

:

<BUTTON ID=oButton οnmοuseοver="testMouse(this)">Mouse Over This.</BUTTON>

19.type

描述:

返回事件名。

语法:

event.type

注释:

返回没有“on”作为前缀的事件名,比如,onclick事件返回的type是click

只读。

20. x

描述:

返回鼠标相对于css属性中有position属性的上级元素的x轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。

语法:

event.x

注释:

如果事件触发后,鼠标移出窗口外,则返回的值为-1

这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

21. y

描述:

返回鼠标相对于css属性中有position属性的上级元素的y轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。

语法:

event.y

注释:

如果事件触发后,鼠标移出窗口外,则返回的值为-1

这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JS 触发事件整理 的相关文章

  • 如何在Keystone.js List Map中指定多个字段?

    想知道如何在 Keystone js List Map 中指定多个字段 例如 基于 Keystone 数据模型文档 http keystonejs com docs database http keystonejs com docs dat
  • Leaflet.js setMaxBounds 忽略南界

    Using 传单 js http leafletjs com reference html对于开源地图项目 但我需要设置用户无法超越的特定界限 地图对象的 maxBounds 属性在北 东 西方向上按预期工作 但它让我永远向南滚动 在小提琴
  • 如何从主体上的 onClick 事件获取鼠标单击的绝对位置?

    我试图获取鼠标单击相对于浏览器 主体的绝对位置 顶部和左侧 not主体内的任何父元素 我有一个绑定到 body 的侦听器 但 e pageX 和 e pageY 为我提供了相对于 div 的位置 请注意 我可以利用 jQuery 和 YUI
  • 如何构建 ImageButton 控件适配器(或者更一般地说,如何构建一个简单的控件适配器)?

    我对这个问题的灵感是我发现了非常烦人的默认样式 border width 0px 在 ImageButton Web 控件上 简单的解决方案是通过向控件添加您自己的样式来覆盖它 例如Style border width 2px 无论如何 如
  • 封装的闭包与类?

    我是 JS 来自 C etc 的新手 我突然想到闭包似乎是比类更简单 更方便的处理封装的方法 这段代码似乎给出了一种处理封装的简单方法 function addProperty o var value o get function retu
  • 如何将 PHP 变量获取到 AJAX?

    我认为我没有在单独的 PHP 和 AJAX 文件之间以正确的方式传递变量 我正在通过触发第二个条件来调试它 status info 在我的 PHP 文件中 现在 status出现为 未定义 alert data status 注册进程 ph
  • ReactJs / Typescript:如何扩展状态接口

    我有以下内容 interface EditViewState
  • 如何将 !important 添加到 CSS-in-JS (JSS) 类属性?

    我正在尝试使用一些 CSS in JS 类这个答案 https stackoverflow com questions 54525334 how can i change the label size of a material ui te
  • -moz-background-clip:text 在 Firefox 中不起作用

    我正在尝试用图像填充 h1 标签中的文本内容 根据我的理解 我在 html 中执行以下操作 div class image clip h1 MY WONDERFULL TEXT h1 div 并在 css 文件中 image clip ba
  • Mustache javascript:如何处理布尔值

    我有一个 JavaScript 对象obj键的值可以是true or false 该值被传递给 Mustache 模板 JavaScript 对象 obj like true or false 模板 span like span 现在我希望
  • 在 JavaScript 中给变量字符串加上引号

    我有一个 JavaScript 变量 var text http example com 文本可以是多个链接 如何在变量字符串周围放置 例如 我希望字符串看起来像这样 http example com var text http examp
  • HTML5:从存储的二进制字符串播放视频

    我正在尝试使用 FileReader readAsBinaryString Blob File 将视频文件的内容作为二进制字符串读取 如示例中所示http www html5rocks com en tutorials file dndfi
  • 批量删除如何工作?

    我尝试使用bulkDelete让我的机器人删除其消息 但我收到此错误 node 5724 UnhandledPromiseRejectionWarning Unhandled promise rejection rejection id 1
  • JavaScript 排序列表

    Javascript 或 jQuery 中有排序列表吗 我有一个巨大的列表 随着时间的推移 插入操作很少 每次添加单个项目时 我无法为整个列表调用 object sort 我需要插入 o log n 不 没有 你拥有的只是Array sor
  • 带条件的 Array.join()

    我该如何使用Array join 有条件的函数 例如 var name aa bb var s name join 输出是 aa bb 我想添加一个条件 仅显示不为空的单词 aa bb 您可以使用Array filter https dev
  • 常见的 Web UI 样式

    在接下来的几天里 我必须向我的一位客户展示一个 Web 应用程序的原型 问题是我不太擅长 CSS 最糟糕的是我几乎对得到的结果不满意 编写业务逻辑对我来说没有任何挑战 但 UI 设计却占用了我 80 以上的时间 我不需要什么令人惊叹的东西
  • 针对 Woocommerce 中多个产品类别计数的 ajax 添加到购物车的 JS 警报

    在 Woocommerce 中 当达到特定产品类别的购物车中的产品的特定数量时 我尝试显示 JavaScript 甜蜜警报 并在达到二级类别的产品的特定数量时显示另一个警报 商品通过 AJAX 添加到购物车 这就是我想使用 JavaScri
  • 脚本和链接标签的简写 http:// 为 // ?有人以前看过/用过这个吗?

    问题如下 如果您使用 addthis 共享按钮 查看任何网站 一旦您浮动在 addthis 按钮上 并且加载了所有必需的资源 请使用 firebug 或 chrome 检查器查看文档的正文 不是源代码 而是屏幕上的实际文档 对象检查器 你会
  • 反应本机中的“未知命名模块”错误

    我正在使用 React Native 创建一个应用程序 但某些导入会引发标题中的错误 Unknown named module 两个包都会发生这种情况 react native material design and react nativ
  • Dojo 是否可以与其他 JS 框架结合?

    我们使用 Dojo 1 9 3 作为构建单页面应用程序的 JS 框架 然而 我们在 Dojo 的怪癖上花费了太多时间 因此即使是简单的任务也需要很长时间才能实现 由于缺乏适当的文档 我们经常不得不求助于阅读源代码 然后实施解决方法 我觉得如

随机推荐

  • 【100%通过率 】【华为OD机试c++】人数最多的站点【2023 Q1

    华为OD机试 题目列表 2023Q1 点这里 2023华为OD机试 刷题指南 点这里 题目描述 关注公园园区提供小火车单向通行 从园区站点编号最小到最大通行如1 2 3 4 1 然后供员工在各个办公园区穿梭 通过对公司N个员工调研统计到每个
  • cloudflare解析域名+CDN

    cloudflare解析域名 CloudFlare 是一家全球知名的 CDN 服务商 并且提供了免费的 CDN 套餐 还不限流量 所以我们完全不需要花一分钱就能使用它的 CDN 服务 接下来我就说明如何注册并使用 CloudFlare 1
  • C/C++中的数据结构对齐,#pragma pack() 和 __attribute__

    C C 中的数据结构对齐 总览 数据结构对齐是指在计算机内存中排列和访问数据的方式 它包含三个独立但相关的问题 数据对齐 data alignment 数据结构填充 data structure padding 和打包 packing 当数
  • Servlet传送对象给Applet使用

    前日 一位朋友与我谈论Servlet与Applet共享Java对象的问题 现发表出来与大家分享 文中瑕癖 之处甚多 望各位指教 朋友谈论的需求是这样的 他想通过页面上一个Applet呼叫一个服务器Servlet 而从Servlet产生 一个
  • Anaconda3安装TensorFlow2.0.0镜像并且配置好Jupyter Notebook

    我们安装TensorFlow1 2 1但是后面又要安装Tensorflow2 0 0 那么我们就需要让Tensorflow两个版本在windows电脑下进行共存 首先 我们先下载了anacoda3和配置好了清华镜像 我们打开anaconda
  • 从零开始编译OpenWrt固件

    从零开始编译OpenWrt固件 前言 进来阅读这篇文章的相信都是对OpenWrt有一定的了解的 对于OpenWrt的介绍这里就不再赘述 可以自行查找相关百科了解 OpenWrt是适合于嵌入式设备的一个Linux发行版 可以通过其提供的相关工
  • Docker使用基础命令(记录贴)

    Docker使用基础命令 基础命令 拉取 推送镜像 docker run命令 基础操作 保存镜像并压缩 基础命令 docker images grep xxx docker ps a grep xxx 导入容器 docker load i
  • vue+antD 表格中使用input

    vue antD 表格中使用input 在这里插入代码片
  • 【编程与算法基础】数据结构——时间复杂度与空间复杂度

    文章目录 算法的时间复杂度和空间复杂度 一 前言 1 算法的效率 2 复杂度的表示方法 大O渐进表示法 3 大O渐进表示法的规则 二 时间复杂度 1 时间复杂度的概念 2 简单时间复杂度计算举例 3 复杂时间复杂度的计算举例 三 空间间复杂
  • C++实践之Qt学习(六):Qt设计器之常用控件、布局和样式

    文章目录 常用控件 按钮 普通按钮 单选按钮 多选按钮 其他的按钮 显示控件 标签 其他显示控件 输入控件 数据项控件 容器控件 布局 Qt布局介绍 设置布局的方式 样式 外部样式表 常用控件 按钮 Buttons分类中包含了Qt中常用的按
  • Appium使用教程(七)——获取appPackage和appActivity

    appPackage和appActivity 进行appium自动化测试非常重要的两个参数 我们所测试的APP不同 这两个参数肯定也是不一样的 那如何快速的获取这APP的这两个参数呢 我这里介绍五个方法 方法一 最简单有效的方法 通过cmd
  • Ubuntu 之 docker 无法下载镜像

    问题 使用 docker pull 命令拉取镜像出现如下错误 解决方案 1 在 etc docker 中创建 daemon json 文件 vim etc docker daemon json 2 写入 registry mirrors h
  • Android 夜间模式(白/夜间模式的切换)

    在项目研发中 我们避免不了需求中会应用到夜间模式 这里对它做一些总结以及封装 从API 23后 Android就有自带的api能够实现夜间模式与白天模式的切换 Support Library 23 2 应用于API14 推出了适合Andro
  • 逐点比较法实现直线圆弧插补[数控机床]

    逐点比较法实现不同象限直线 圆弧插补 一 原理介绍 1 1 简介 1 2 逐点比较法偏差计算 直线 1 2 1 第一象限逐点比较法思路 1 2 2 四象限逐点比较法实现思路 1 3 逐点比较法偏差计算 圆弧 1 3 1 第一象限逐点比较法思
  • 笔记:快速上手shell编程

    SHELL学习笔记 变量赋值 赋值 A 10 不允许 赋值时不允许在等号两侧出现空格 A 10 允许 A 10 不允许 A 10 允许 当赋值时需要填充多个空格 可以使用 环境变量 root localhost gitee echo PWD
  • tf1.x和tf2.x查看TFRecord数据的方法

    Tensorflow 1 x和Tensorflow 2 x读取tfrecord方法略有不同 下面分别记录两段代码 Tensorflow 1 x for example in tf python io tf record iterator p
  • React基础之Refs的理解与使用

    目录 为什么会用到Refs 何时使用Refs Refs有哪些使用方式 字符串形式的refs 回调形式的refs createRef的使用 为什么会用到Refs 我们在使用React写代码的时候对Refs的使用比较少 因为我们很少直接操作底层
  • 常用DOC命令

    copy con 123 bat 创建批处理 color 改变cmd颜色 ping t l 65550 ip 死亡之ping ipconfig 查看ip ipconfig release 释放ip ipconfig renew 重获ip s
  • arm下蜂鸣器测试代码

    首先还是看内核蜂鸣器的实现 如下图 这个和led一样 都是比较简单的字符驱动 代码如下 include
  • JS 触发事件整理

    一般事件 onclick IE3 N2鼠标点击时触发此事件 ondblclick IE4 N4鼠标双击时触发此事件 onmousedown IE4 N4按下鼠标时触发此事件 onmouseup IE4 N4鼠标按下后松开鼠标时触发此事件 o