onChange="document.location.href=this.value

Posted 2023-05-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了onChange="document.location.href=this.value相关的知识，希望对你有一定的参考价值。

onChange="document.location.href=this.value 能不能一个词一个词的帮我解释一下还有这句 onmouseover="style.backgroundColor='#C86F70'"
我搞不懂的就是 document style在这里的作用
this.value this在这里是什么意思

＃onChange，onmouseover鼠标事件#
# 相关资料：
一般事件
事件浏览器支持描述
onClick html: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击
onDblClick HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 鼠标双击事件
onMouseDown HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 鼠标上的按钮被按下了
onMouseUp HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 鼠标按下后，松开时激发的事件
onMouseOver HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 当鼠标移动到某对象范围的上方时触发的事件
onMouseMove HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 鼠标移动时触发的事件
onMouseOut HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N3 | O3 当鼠标离开某对象范围时触发的事件
onKeyPress HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
onKeyDown HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
onKeyUp HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]
页面相关事件
事件浏览器支持描述
onAbort HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N3 | O 图片在下载时被用户中断
onBeforeUnload HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当前页面的内容将要被改变时触发的事件
onError HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N3 | O 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误
onLoad HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成
onMove HTML: 2 | 3 | 3.2 | 4
Browser: IE | N4 | O 浏览器的窗口被移动时触发的事件
onResize HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 当浏览器的窗口大小被改变时触发的事件
onScroll HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 浏览器的滚动条位置发生变化时触发的事件
onStop HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断
onUnload HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 当前页面将被改变时触发的事件
表单相关事件
事件浏览器支持描述
onBlur HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]
onChange HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]
onFocus HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 当某个元素获得焦点时触发的事件
onReset HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N3 | O3 当表单中RESET的属性被激发时触发的事件
onSubmit HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 一个表单被递交时触发的事件
滚动字幕事件
事件浏览器支持描述
onBounce HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 在Marquee内的内容移动至Marquee显示范围之外时触发的事件
onFinish HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当Marquee元素完成需要显示的内容后触发的事件
onStart HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当Marquee元素开始显示内容时触发的事件
编辑事件
事件浏览器支持描述
onBeforeCopy HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件
onBeforeCut HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件
onBeforeEditFocus HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当前元素将要进入编辑状态
onBeforePaste HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件
onBeforeUpdate HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当浏览者粘贴系统剪贴板中的内容时通知目标对象
onContextMenu HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的<body>中加入onContentMenu="return false"就可禁止使用鼠标右键了]
onCopy HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当页面当前的被选择内容被复制后触发的事件
onCut HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当页面当前的被选择内容被剪切时触发的事件
onDrag HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当某个对象被拖动时触发的事件 [活动事件]
onDragDrop HTML: 2 | 3 | 3.2 | 4
Browser: IE | N4 | O 一个外部对象被鼠标拖进当前窗口或者帧
onDragEnd HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了
onDragEnter HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当对象被鼠标拖动的对象进入其容器范围内时触发的事件
onDragLeave HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当对象被鼠标拖动的对象离开其容器范围内时触发的事件
onDragOver HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当某被拖动的对象在另一对象容器范围内拖动时触发的事件 [活动事件]
onDragStart HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当某对象将被拖动时触发的事件
onDrop HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 在一个拖动过程中，释放鼠标键时触发的事件
onLoseCapture HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当元素失去鼠标移动所形成的选择焦点时触发的事件
onPaste HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当内容被粘贴时触发的事件
onSelect HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当文本内容被选择时的事件
onSelectStart HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当文本内容选择将开始发生时触发的事件
数据绑定
事件浏览器支持描述
onAfterUpdate HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当数据完成由数据源到对象的传送时触发的事件
onCellChange HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当数据来源发生变化时
onDataAvailable HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当数据接收完成时触发事件
onDatasetChanged HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 数据在数据源发生变化时触发的事件
onDatasetComplete HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当来子数据源的全部有效数据读取完毕时触发的事件
onErrorUpdate HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件
onRowEnter HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当前数据源的数据发生变化并且有新的有效数据时触发的事件
onRowExit HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当前数据源的数据将要发生变化时触发的事件
onRowsDelete HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当前数据记录将被删除时触发的事件
onRowsInserted HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当前数据源将要插入新数据记录时触发的事件
外部事件
事件浏览器支持描述
onAfterPrint HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当文档被打印后触发的事件
onBeforePrint HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当文档即将打印时触发的事件
onFilterChange HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当某个对象的滤镜效果发生变化时触发的事件
onHelp HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当浏览者按下F1或者浏览器的帮助选择时触发的事件
onPropertyChange HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当对象的属性之一发生变化时触发的事件
onReadyStateChange HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当对象的初始化属性值发生变化时触发

＃document 是文档对象＃
# 相关资料：

除了前面提到过的文档document对象外，Navigator浏览器中还提供了窗口（Window）对象以及历史（History）和位置（Location）对象。

浏览器对象(Navigator)

提供有关浏览器的信息

窗口对象(Windows)

Window对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性。

位置对象(Location)

Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象。

历史对象(History)

History对象提供了与历史清单有关的信息。

文档对象(Document)

document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。

＃location.href是当前的地址
＃this是当前事件发生的对象
＃value是该对象的值
＃style是一个样式属性
它下面还有很多的东西，还可以“.”下去。如：backgroundColor就是背景颜色，而且“'#C86F70'”是一个String类型，以“＃”开始表示RGB值
＃＃＃总的来说，两句代码的意思是：
onChange="document.location.href=this.value ：当当前对象发生改变时候，当前文档的url等于当前对象的值。
onmouseover="style.backgroundColor='#C86F70'" ：当鼠标悬停在当前对象的时候，当前对象的样式的背景颜色变为#C86F70。

若不够详尽，请与我交流。参考技术A 我来解释解释吧

先给你解释下this
有如下代码：
<input id="ss" type="text" value="haha" onclick="alert(this.value);" />
当你用鼠标点击文本框的时候，将会谈出一个对话框，内容为“haha”
this用在这里，就是代表这个<input />标签本身，等同于this的代码为：
document.getElementById("ss");//获得id=ss的标签对象的引用
如:<input id="ss" type="text" value="haha" onclick="alert(document.getElementById("ss").value);" />
效果是一样的
所以this.value等同于document.getElementById("ss").value
在不同的地方，this代表的对象引用不同，如果用在某某html标签内，那么它代表的就是这个标签本身，如果用在function内，则代表函数本身，如果用在全局作用于内，例如：
<script language="javascript" type="text/javascript">
this.window.close();
</script>
则代表浏览器本身
*************************************************************
onChange="document.location.href=this.value
猜测一下，你这个代码应该是放在<select>中吧，你value后面少个引号
onChange是改变事件，当你操作的对象改变时（如：选择一个不同的下拉列表项时），将执行此方法指向的函数或代码段
document.location.href如同前面的解释，就是一个internate转向，等于号后面的值，即为要转到的网址。this在这里则是这个标签的value属性中给出的内容
*************************************************************
onmouseover="style.backgroundColor='#C86F70'"
onmouseover鼠标经过事件，当鼠标放在那上面的时候，将会执行等于号右面的代码段或函数引用
style代表样式表，其中包含n多属性
backgroundColor则是style中的一个属性，他控制的是背景颜色
style.backgroundColor='#C86F70'等于号右面的则是一个颜色的值，代表一个颜色。配色方案好像是有4中，这个属于rgb的，还有类似于255.255.0这样的，还有4各参数的，100.100.100.0，最后一个控制透明度。具体的记不清了
这里为什么没有用this.style.backgroundColor？
是因为这里的缺省值（即默认值）就是this，所以可以不用。就像你在全局范围内输入alert("xxxx");一样，this都是缺省的，但在某些情况下需要特殊指出，如this.value 参考技术B onChange:当内容有改变的时候,触发该事件.
document.location.href:就是对你访问的网页的网址进行操作(一般写成window.location.href)
this.value:就是绑定了onChange事件的html控件的值.
onmouseover:鼠标经过就触发该事件(类似于上面的onchange)
style:这里是简写,应该是this.style.意思是本对象的样式,后跟css属性.
backgroundColor:js操作css属性,意思为背景颜色,在css中为:background-color
#C86F70:16进制rgb颜色值.

----------------------------
lz既然有兴趣了解这些,为什么不去从基础开始好好学习一下呢,如果你什么基础都不去学的话,想直接了解这些,肯定是不会懂的.没有查看你的资料,估计你年纪不大,有时间找我,我教你. 参考技术C onChange是指当对象改变时候触发的事件.
onmouseover是当鼠标移动到某对象范围的上方时触发的事件
html页面是标签语言写的,比如<table></table><tr></tr>等,这样的每对标签都是一个对象,document就是整个页面的文档对象,他可以获得html中的每个标签对象和他们的属性. 参考技术D document文档意识是，你写的全文范围
location位置比document小的范围
href是个连接
value是值
onChange="document.location.href=this.value
是按下鼠标时文本框连接到this.value中的页

style风格设置 backgroundColor背景颜色是要设置背景颜色的
前面加onmouseover="style.backgroundColor='#C86F70'"是鼠标放在这上面时背景色发生改变，变成#C86F70色，在颜色表里能查出

Ant 设计 Form validateTrigger 动态从“onBlur”变为“onChange”

【中文标题】Ant 设计 Form validateTrigger 动态从“onBlur”变为“onChange”【英文标题】：Ant design Form validateTrigger change dynamically from "onBlur", to "onChange" 【发布时间】：2019-03-14 01:21:03 【问题描述】：

默认情况下，Ant 设计会在 'onChange' 事件上验证错误，这意味着用户在第一次输入时会收到错误，这是一种糟糕的 UI 体验。

validateTrigger 可以更改为 'onBlur'，但它总是会在模糊时验证，这更糟糕。

预期：用户开始输入 - 未显示错误用户结束输入和模糊 - 显示错误从那时起，错误会在用户输入时显示\隐藏。

无法通过状态将 validateTrigger 从“onBlur”动态更改为“onChange”。我试过了，但是失败了。

用户输入时显示错误的示例链接：https://codesandbox.io/s/jxqyjy293

另一个库（Formik）的示例链接，它可以正常工作 https://codesandbox.io/s/lp904qlj1q

我原来的 github 问题 https://github.com/ant-design/ant-design/issues/12542

【问题讨论】：

【参考方案1】：

这种类型的验证对我有用：

<FormItem
      ...formItemLayout
      label="E-mail"
      hasFeedback
    >
      getFieldDecorator('email', 
        rules: [
          type: 'email', message: 'The input is not valid E-mail!',
        , 
          required: true, message: 'Please input your E-mail!',
        ],
      )(
        <Input />
      )
    </FormItem>

来源：https://2x.ant.design/components/form/#components-form-demo-register

【讨论】：

以上是关于onChange="document.location.href=this.value的主要内容，如果未能解决你的问题，请参考以下文章

select中onchange的用法

HTML 动态创建select，然后添加onChange，如何添加onChange函数成功啊？

hidden类型的input控件onchange事件为何不起作用？

Javascript：“onchange”事件不适用于“文本输入”对象中的“值”更改

onChange="document.location.href=this.value

更改表单选择上的样式表 onChange="change()"