900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > JavaScript的对象属性和方法和点击事件

JavaScript的对象属性和方法和点击事件

时间:2024-06-01 17:57:37

相关推荐

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="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>

运行结果如下:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。