万博体育官网网址 Javascript
JavaScript事件处理程序

概观

事件处理程序伴随现有HTML代码或动态生成的内容,并由浏览器或用户事件触发 - 例如页面加载时,用户单击鼠标时或时间晚上8点某些事件处理程序依赖于鼠标或键盘的使用这些被称为设备依赖事件处理程序其他事件处理程序是设备独立并由鼠标和键盘或其他方式触发。

重要

要确保可访问性,请使用与设备无关的事件处理程序(适用于鼠标和键盘的处理程序)或同时使用鼠标依赖项键盘依赖事件处理程序。

鼠标移到目标上的onmouseout

鼠标移到目标上将鼠标光标放在项目上时会触发事件处理程序顾名思义,鼠标移到目标上需要使用鼠标,因此它是一个设备相关事件处理程序和可能引起可访问性问题。鼠标移到目标上和它的同伴,的onmouseout可以使用,只要在不使用鼠标的情况下也可以使用任何重要的内容或功能如果鼠标交互纯粹是装饰性的(例如添加发光或阴影),则可能没有可访问性问题,只要样式更改不指示某些功能(例如指示元素是可点击的)。

如果鼠标交互提供了额外的信息或内容,例如工具提示,导航菜单等,那么这个内容将不会对任何不使用鼠标的人产生影响可访问性需要其他注意事项。

对于屏幕阅读器用户,可以直接以万维体育官网网址的方式提供附加内容,例如通过替代文本,通过ARIA标签或描述,或者可能通过屏幕外文本然而,对于发现只用键盘的用户,必须有一种机制来访问和查看新披露内容或功能。

除了鼠标移到目标上的onmouseout,使用聚焦状态的onblur当键盘用于导航到元素和从元素导航时,将触发这些操作Of course these can only be triggered on keyboard-navigable elements - links and form controls (or perhaps elements withtabindex属性)简单的触发改变标准的链接,使用鼠标和键盘相关的事件处理程序将有助于确保可访问性。

有时,脚本用于呈现复杂的交互,例如下拉菜单或弹出菜单虽然这些可以在技术上做到,但有时候替代方法可能会更加友好。例如,而不是强迫用户浏览一个复杂和漫长的导航菜单,您可以确保菜单系统没有直接键盘万博体育官网网址(或读取屏幕阅读器),但顶层菜单项提供标准的链接功能(例如,“产品”)这个链接将用户提供标准的二级页面的链接通过复杂的菜单提供的页面(例如,一个产品登陆页面,链接到各种产品类别)虽然不是完全相同的交互,鼠标用户可以选择,这样的选择往往是更直观、友好的为所有用户。

聚焦状态的onblur

这些事件处理程序通常使用表单元素,如文本字段、单选按钮、和提交按钮,但是也可以使用链接。聚焦状态当光标放在特定表单元素上或内部时,或者当用户使用键盘“标记”到元素时触发。的onblur当光标离开表单元素或用户“标签”远离它时触发。

这两个事件处理程序是设备无关的,也就是说,他们可以用鼠标,键盘,或其他辅助技术必须分析由于这些事件处理程序而执行的操作,以确定它们是否会导致可访问性问题通常,这些事件不会引起可访问性问题,除非它们修改web浏览器的默认行为或干扰键盘导航在web页面此类问题的示例可能会自动将焦点设置为其他页面区域聚焦状态的onblur内,捕获用户控制的一种形式,动态显示表单控件立即离开(模糊)表单控制用户,等等键盘和屏幕阅读器测试将是必要的,以确保这些交互是以万博体育网络方式构建的。

的onClickonfocus此

的onClick在HTML元素上按下鼠标时触发事件处理程序。的onClick目的是鼠标事件处理程序的依赖吗然而,如果的onClick事件处理程序与键盘导航链接或表单控件一起使用,然后触发大多数主流浏览器和辅助技术的onClick如果输入键被按下时,链接或控制的焦点在这些情况下,的onClick是设备无关的事件处理程序。

不过,输入键不会总是触发的onClick如果它与非链接和非控制元素一起使用,例如纯文本,表格单元格或<DIV>元素,即使他们使用tabindex使键盘可导航或使用脚本进行聚焦在这些情况下,有必要检测输入空间按键时按下它们。

onfocus此事件处理程序与在所选HTML元素上双击鼠标相关联没有设备独立或键盘相当于onfocus此,所以它必须避免。

的onChangeONSELECT

的onChange选择并更改表单元素时触发事件处理程序,例如,最初选择单选按钮时,文本框或文本区域中文本更改时,或选择菜单中的活动项更改时尽管这些事件处理程序是设备无关的,可以激活使用鼠标,键盘,或其他设备,执行的操作由于这些事件处理程序必须进行分析,以确定他们是否引起可访问性问题。

一个常见的用法的onChange在选择菜单触发导航活动选项在菜单时改变了这些菜单可以导致键盘可访问性问题,因为你无法使用键盘没有滚动列表中选择其中一个选项,从而触发的onChange事件某些浏览器(包括Firefox)会覆盖这些跳转菜单,因此在键盘更改时不会激活它们,但只有在使用鼠标选择项目或使用键盘时按Enter键后才会激活它们但是,这些类型的JavaScript“跳转”菜单可以通过删除来制作键盘的onChange并提供一个submit按钮分开的列表选择激活当前选中的项。

使用设备无关事件处理程序

几个事件处理程序与设备无关,包括聚焦状态的onblurONSELECT的onChange,和的onClick(什么时候的onClick与链接或表单元素一起使用)如果可能,请使用设备无关的事件处理程序其他事件处理程序是设备相关,也就是说,他们完全依靠某种类型的输入例如,鼠标移到目标上的onmouseout,和onfocus此依靠使用鼠标还有一些事件处理程序依赖于键盘的使用(onKeyDown的onkeyup等)可以一起使用多个设备相关事件处理程序允许两个鼠标和键盘激活的JavaScript,但这需要测试在不同的浏览器和辅助技术,确保可访问性是不以任何方式限制。