属性操作与事件

本文详细介绍了JavaScript中的各种事件,包括鼠标事件、键盘事件和浏览器事件,以及事件的监听、事件对象、元素坐标和事件冒泡。同时,讨论了如何阻止默认事件,特别是阻止a链接跳转的三种方法。此外,还讲解了元素属性的操作,如获取、设置和移除属性,以及设置元素样式的多种方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.新事件

(1)、鼠标事件

onmouseover鼠标移入事件:在鼠标指针移动到元素上时触发。

onmouseout 鼠标移出事件:在鼠标指针移出元素后触发

onmouseenter鼠标进入事件:在鼠标指针进入到元素上时触发。

onmouseleave 鼠标离开事件:在鼠标指针离开元素后触发

onfocus获取焦点事件:在鼠标光标获取输入框焦点时触发

onblur失去焦点事件:在鼠标光标失去焦点时触发。

onclick单击事件:在鼠标指针单击时触发

ondblclick双击事件:在鼠标光标双击时触发。

(2)、键盘事件

onkeydown:键盘按下

onkeyup:键盘抬起  

(3)、浏览器事件

onload:浏览器加载完成执行

onscroll:滚动浏览器滚动条时触发

2、事件进阶

执行事件的步骤:获取元素、绑定事件、书写事件驱动程序

(1)、监听事件

绑定监听事件 addEventListener("事件的类型",事件的处理程序)

box1.addEventListener("click", myFunc)

 解绑监听事件removeEventListener("事件的类型",事件的处理程序)

 box1.removeEventListener("click", myFunc);

(2)、事件对象

任何事件都有内置对象event,事件对象的兼容性写法为

(3)、元素的坐标

1、clientX与clientY

clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。客户区指的是当前窗口。

clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(客户区)的垂直坐标。 客户区指的是当前窗口。

2、pageX与e.pageY

pageX/Y:相对于文档边缘,包含滚动条距离

clientX/Y:相对于当前页面且不包含滚动条距离

有兼容性问题 从IE9以后才支持,pageY = clientY + 页面滚动出去的距离

(4)、事件冒泡

假设一个元素div,它有一个下级元素p。
<div>
  <p>元素</p>
</div>
这两个元素都绑定了,如果用户点击了p,它在div和p上都触发了

4.阻止默认事件

(1)、阻止事件冒泡

        

阻止事件默认行为

什么元素有默认行为呢?如链接<a>,提交按钮<input type=”submit”>等。当Event 对象的 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。

5.阻止a链接跳转

(1)、单return

<!-- 第一种方法 -->

  <a href="https://www.baidu.com" οnclick="fn1(); return false">百度两下</a>

 function fn1() {

    alert("单击链接了哈");

  }

第一种缺点:代码不分离,不符合低耦合,高内聚的规范

(2)、双return

<!-- 第二种方法 -->

  <a href="https://www.baidu.com" οnclick="return fn2();">百度三下</a>

 function fn2() {

    alert("单击百度三了哈!");

    return false;

  }

第二种代码 缺点同上

(3)、先获取再绑定

<!-- 第三种方法 -->

  <a href="https://www.baidu.com" id="link">百度四下</a>

  document.getElementById("link").onclick = function () {

    alert("单击百度四了哈!");

    return false;

  }

第三种  行为与结构分离

6.元素的属性操作

获取属性

getAttribute("属性的名字")

getAttribute("属性"):不仅可以获取元素本身的属性的属性值,还可以获取元素自定义的属性的属性值

设置属性

setAttribute("属性的名字","属性的值");

元素的属性的设置:不仅可以设置元素本身的属性,还可以设置元素自定义的属性

 移除属性

 removeAttribute("属性"):不仅可以移除元素本身的属性,还可以移除元素自定义的属性

7.元素样式设置的几种方式

  1. 对象.style

  2.  对象.className

  3. 对象.setAttribute("style")

  4. 对象.setAttribute("class")

  5. 对象.style.setProperty("CSS属性","CSS属性值")

  6. 对象.style.cssText

        

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值