JavaScript的对象属性和方法和点击事件
JavaScript的Event对象用来描述JavaScript事件,Event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态。一旦事件发生,便会生成Event对象。主要属性和方法:
- type:事件的类型,就是HTML标签属性中,没有on前缀之后的字符串,例如Click就代表点击事件;
- srcElement:事件源,就是发生事件的元素。比如是事件发生的源头,也就是该事件的srcElement(非IE中用target);
- button:声明了被按下的鼠标键,是一个整数。0代表没有案件,1代表鼠标左键,2代表鼠标右键,4代表鼠标的中间件,如果按下了多个鼠标键,就把这些值加起来;
- clientX/cleintY:是指事件发生的时候,鼠标的横、纵坐标,返回的是整数,它们的值是相对于包容窗口的左上角生成的;
- offsetX/offsetY:鼠标指针相对于源元素位置,可确定单击Image对象的哪个像素;
- altKey、ctrlKey、shiftKey:分别指鼠标事件发生的时候,是否同时按住了Alt、Ctrl或者Shift键,返回一个布尔值;
- keyCode:返回keydown和keyup事件发生的时候,按键的代码以及keypress事件的Unicode字符。比如event.keyCode=13代表按下了Enter键;
- fromElement、toElement:前者是指mouseover事件移动过的文档元素,后者是指mouseout事件中鼠标移动到的文档元素;
- cancelBubble:一个布尔值,把它设置为true时,将停止事件进一步起到包容层次的元素,它用于监测是否接受上层元素的事件控制。true代表不被上层元素的事件控制,false代表允许被上层元素的事件控制;
- returnValue:一个布尔值属性,设置为false的时候可以阻止浏览器执行默认的事件动作;
- attachEvent() 和detachEvent()方法:为制定DOM对象事件类型注册多个事件处理函数的方法,它们有两个参数,第一个是事件类型,第二个是事件处理函数。在attachEvent()事件执行的时候,this关键字指向的是window对象,而不是发生事件的那个元素。
JavaScript元素属性操作方法,包括获取属性,修改元素,删除属性
本篇记录JS元素属性的操作的方法。其中包含获取属性两个方法,修改属性两个方法,删除属性一个方法
获取属性
element.属性
该方法通常获取自带属性,例如src href id title alt 等属性
<body><div id="demo" ></div><script>var div = document.querySelector('div');// 获取元素的属性值// element.属性console.log(div.id);</script>
</body>
element.getAttribute(‘属性’)
该方法通常获取自定义属性。
<body><div id="demo" index="1" ></div><script>var div = document.querySelector('div');// 获取元素的属性值// element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 indexconsole.log(div.getAttribute('index'));</script>
</body>
修改属性
element.属性=‘值’
该方法通常用来修改自带属性,例如src href id title alt 等属性。一般采用element.属性进行修改
以src为例来记录元素属性修改的方法。
具体代码如下所示
<body><button id="Revin1">Revin1</button><button id="Revin2">Revin2</button> <br>< img src="data:images/Revin1.jpg" alt="" title="Revin1"><script>// 修改元素属性 src// 1. 获取元素var Revin1 = document.getElementById('Revin1');var Revin2 = document.getElementById('Revin2');var img = document.querySelector('img');// 2. 注册事件 处理程序Revin2.onclick = function() {img.src = 'images/Revin2.jpg';img.title = 'Revin2';}Revin1.onclick = function() {img.src = 'images/Revin1.jpg';img.title = 'Revin1';}</script>
</body>
element.setAttribute(‘属性’, ‘值’)
该方法通常针对自定义属性的修改,例如下面例子中的index就是自定义的属性,可以通过该方法进行属性修改
具体实现如下
<body><button id="Revin1" index="1">Revin1</button><button id="Revin2" index="2">Revin2</button> <br><script>// 1. 获取元素var Revin1 = document.getElementById('Revin1');var Revin2 = document.getElementById('Revin2');// 2. 注册事件 处理程序Revin2.onclick = function() {Revin1.setAttribute('index', 3);console.log(Revin1.getAttribute('index'));}Revin1.onclick = function() {Revin2.setAttribute('index', 4);console.log(Revin2.getAttribute('index'));}</script>
</body>
运行结果如下:
删除属性
removeAttribute(属性)
删除元素的属性,自带属性与自定义属性均可删除
<body><div id="demo" index="1" class="nav"></div><script>var div = document.querySelector('div');console.log(div.id);console.log(div.index);console.log(div);// 移除属性 removeAttribute(属性) div.removeAttribute('index');div.removeAttribute('id');console.log(div.id);console.log(div.index);console.log(div);</script>
</body>
运行结果如下:
JavaScript的对象属性和方法和点击事件相关推荐
- JavaScript 访问对象属性和方法及区别
这篇文章主要介绍了浅析JavaScript访问对象属性和方法及区别的相关资料,仅供参考 属性是一个变量,用来表示一个对象的特征,如颜色.大小.重量等:方法是一个函数,用来表示对象的操作,如奔跑.呼吸. ...
- JavaScript原生对象属性和方法详解——String对象
length length 属性可返回字符串中的字符数目. length 是根据字符串的UTF-16编码来获取长度的,空字符串长度为0.length 不可修改. charAt() charAt() 方 ...
- javascript Navigator对象属性和方法
Navigator对象 Navigator 对象包含的属性描述了正在使用的浏览器.可以使用这些属性进行平台专用的配置.虽然这个对象的名称显而易见 的是 Netscape 的 Navigator 的浏览 ...
- JavaScript原生对象属性和方法详解——Array对象
原文地址:http://www.feeldesignstudio.com/2013/09/native-javascript-object-properties-and-methods-array l ...
- JavaScript原生对象属性和方法详解——Date对象
创建 Date 对象的语法: //Date 对象会自动把当前日期和时间保存为其初始值. new Date();//value-毫秒:代表自世界协调时1970年1月1日00:00:00开始的数值. ne ...
- javaScript删除对象属性总结方法
一.删除js中对象中属性 1.使用delete运算符 例: 1) 使用点属性访问器删除: delete object.property; 在属性访问器上应用delete运算符时,运算符会从对象中删除相 ...
- JavaScript之Ajax-1 Ajax(Ajax原理、Ajax对象属性和方法)
一.Ajax原理 Ajax简介 - Asynchronous JavaScript And Xml 异步的 JavaScript 和 Xml - Ajax 是一种用来改善用户体验的技术,其实质是,使用 ...
- JavaScript对象属性及方法
JavaScript对象属性及方法 1.对象属性 JavaScript对象时属性变量的容器,以键值对name:value的形式存在,访问方式为 name.value name[value] 2.对象方 ...
- javascript数组的属性、方法和清空-最全!!!(必看)
今天经理要我从新看一遍js,当我再看<精通js和jquery>这本书时,发现关于数组的这章节讲的很少,于是想自己总结一下数组的常用方法. 定义数组: var arr = new Array ...
最新文章
- WMI技术介绍和应用——查询桌面信息
- 第二章 MCS-51单片机硬件结构与工作原理
- mac 强制退出程序_强行退出Mac上应用程序的6 种方法
- java web 页面提速
- 免费网络研讨会:Java应用程序中的吞咽异常
- 打印到类阵列的给定序列的所有排列的n皇后问题
- 比特币交易平台软件开发:比特币和以太坊有什么区别?
- 【华为设备命令最全大合集,快快收藏】
- UVM中drain_time使用
- 利用CRISPR基因编辑高效靶向诱变玉米农作物/植物核糖蛋白复合物的研究
- java setbounds无效_为什么即使将setLayout()设置为null后,setBounds()方法也不起作用? - java...
- Excel日期显示为数字,不能正常显示为日期
- STM32使能/屏蔽外部中断
- python中文件的导入与导出
- 动态规划法——常见题型及算法思路
- 【实用算法教学】——教你使用决策树算法预测NBA获胜球队
- 数学建模常用算法—优劣解距离法(TOPSIS)
- 虚拟机系列之-ubuntu系统克隆相同ip调整办法
- C++11新式洗牌std::shuffle与老式洗牌函数std::random_shuffle的区别
- Lotus的2008
热门文章
- R语言数据表三元组(长数据)格式与宽数据格式转换
- java 反射机制详解
- 塔漫的服务器在维修吗,天下第一塔——开封铁塔,您知道是怎么维修的吗?
- JS打砖块,童年的回忆
- STM32F4 RTC精密数字校准与同步
- OpenCV OAK相机双目校准(Windows简易版)
- js window.print() 打印图片,图片有时候不显示
- Ubuntu Linux 下可以玩的游戏
- list indexof java_Java List indexOf()用法及代码示例
- 基于保角形变换的电磁波导波结构设计