一文解读JavaScript事件对象和表单对象

简介: 一文解读JavaScript事件对象和表单对象

前言


相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。


1.事件对象(Event)


1).事件对象常量

bubbles         事件是否是起泡事件类型 cancelable      事件是否可确定可取消的默认动作currentTarget   事件监听器触发该事件的元素 eventPhase      事件传播的当前阶段 target          触发此事件的元素(事件的目标节点),srcElement(IE)timeStamp       事件生成的日期和时间type            当前Event对象表示的事件的名称 initEvent()     初始化新创建的 Event 对象的属性preventDefault() 不执行默认动作stopPropagation()   停止冒泡 cancelBubblex,y             元素的 x 坐标和 y 坐标returnValue     设置或获取事件的返回值fromElement  在IE中用于mouseover和mouseout 事件,可以引用移出鼠标的元素。toElement  在IE中用于mouseover和mouseout 事件,该属性引用移入鼠标的元素。returnValue 设置或获取事件的返回值keyCode(IE) 键盘码 which()  charCodeoffsetX,offsetY 事件在源元素的中的x坐标和y坐标。

这在后面的其它操作中我都有举例子,大家可以仔细看看。

2).键盘鼠标事件

altKey          判断"ALT" 是否被按下 button          判断哪个鼠标按钮被点击 clientX         判断鼠标指针的水平坐标clientY         判断鼠标指针的垂直坐标ctrlKey         判断"CTRL" 键是否被按下keyIdentifier   按键的标识符  keyLocation     按键在设备上的位置 metaKey         判断"meta" 键是否被按下relatedTarget   与事件的目标节点相关的节点screenX         判断鼠标指针的水平坐标screenY         判断鼠标指针的垂直坐标shiftKey        判断"SHIFT" 键是否被按下

这个在后面也会提到,比如获取鼠标坐标:

image.png


2.表单对象


1).Form对象

document.forms['表单名']['text'].value #获取表单中的文本框的值acceptCharset       服务器字符集 action              设置或返回表单的actionenctype             设置或返回表单用来编码内容的MIME类型 length              返回表单中的元素数目method              设置或返回将数据发送到服务器的 HTTP 方法name                设置或返回表单的名称target              设置或返回表单提交结果的Frame或Window

image.png

2).Button对象(submit,hidden与它方法差不多)

b.accessKey                 设置或返回访问按钮的快捷键b.alt                       设置或返回当浏览器无法显示按钮时供显示的替代文本 b.disabled=true|false       设置或返回是否禁用按钮b.form                      返回对包含该按钮的表单对象的引用b.id                        设置或返回按钮的 idb.name                      设置或返回按钮的名称 b.tabIndex='3'              设置或返回按钮的 tab 键控制次序 b.type                      返回按钮的表单元素类型 b.value                     设置或返回在按钮上显示的文本

image.png

3).Checkbox 对象(Radio与它方法差不多)

和上面的对象差不多,唯一不同的便是多了一个默认值选中值:“defaultChecked”。

4).Select 对象

s.options  返回下拉列表数组s.selectedIndex=num    设置或返回下拉列表中被选选项的索引号s.multiple=true|false  设置或返回是否可有多个选项被选中s.size                 设置或返回下拉列表中一次显示显示的选项数s.add()       向下拉列表添加一个选项s.remove()    从下拉列表中删除一个选项

image.png


总结


这篇文章主要介绍了JavaScript的事件对象和表单对象。下一篇文章,我们继续介绍JavaScript,敬请期待!

相关文章
|
2月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
2月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
2月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
30 1
JavaScript中对象的数据拷贝
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
61 5
|
2月前
ractive.js联系表单动画效果源码
一款ractive.js联系表单动画效果,很有创意的发送邮件、联系内容等表单,基于ractive.js实现的动画效果,以发送信件的方式。
27 1
|
2月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
55 3
|
2月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
3月前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
61 6
|
3月前
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
63 4
|
3月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
55 1