JavaScript事件与元素操作_js 元素事件-CSDN博客

鼠标事件：
- onclick：当用户单击鼠标时运行脚本。
- onmousedown：按下鼠标按钮时运行脚本。
- onmouseup：松开鼠标按钮时运行脚本。
- onmousemove：鼠标指针移动时运行脚本。
- onmouseover：鼠标指针移至元素之上时运行脚本，不可以阻止冒泡。
- onmouseout：鼠标指针移出元素时运行脚本，不可以阻止冒泡。
- onmouseenter：鼠标指针移至元素之上时运行脚本，可以阻止冒泡。
- onmouseleave：鼠标指针移出元素时运行脚本，可以阻止冒泡。
- onmousewheel：转动鼠标滚轮时运行脚本。
- onscroll：滚动元素的滚动条时运行脚本。
键盘事件：
- onkeyup：某个键盘按键被松开时触发（document，window）。
- onkeydown：某个键盘按键被按下时触发，通常不会触发事件冒泡，除非特别处理。
- onkeypress：某个键盘按键被按下时触发，会触发事件冒泡。
表单事件：
- onfocus：表单获得焦点时触发。
- onblur：表单失去焦点时触发。
- oninput：表单每次输入时触发。
- onchange：表单内容发生改变时触发。
- onselect：表单文本被选取时触发。
- onreset：表单重置时触发。
- onsubmit：表单提交时触发。

二、操作元素

JavaScript 的 DOM 操作堪称强大，它赋予我们改变网页内容、结构以及样式的能力。通过 DOM 操作元素，我们能够对元素的内容、属性等进行灵活修改。

（一）改变元素内容

element.innerText：它获取的是从起始位置到终止位置的内容，在这个过程中，会去除 HTML 标签，同时空格和换行也会一并被去掉。
element.innerHTML：能获取从起始位置到终止位置的全部内容，其中包括 HTML 标签，并且会保留空格和换行。

基本使用示例：

<body>

<button>点我切换内容</button>

// 1、获取元素

var btn = document.querySelector("button");

var div = document.querySelector("div");

// 2、绑定事件

// 3、事件处理函数

btn.onclick = function () {

// console.log(div.innerText);

// console.log(div.innerHTML);

// 方式一、操作元素内容--innerText

// div.innerText = "天气凉爽";

// 方式二、操作元素内容--innerHTML

div.innerHTML = "天气凉爽";

};

</script>

</body>

两者区别：

写：innerText不识别 HTML 标签，而innerHTML能够识别 HTML 标签。
读：innerText和innerHTML都可以获取元素内部的内容，但innerText会去除空格、换行和标签，innerHTML则可以获取到元素里面的标签，同时保留空格和换行。

（二）改变元素其他属性

对于元素的src、href、id、alt、title等属性，同样可以进行修改。

示例如下：

<body>

// 1、获取元素

var dog = document.querySelector("#dog");

var cat = document.querySelector("#cat");

var img = document.querySelector("img");

// 2、绑定事件、处理函数

dog.onclick = function () {

img.src = "./img/pic_01.jpg";

img.title = "小狗";

};

cat.onclick = function () {

img.src = "./img/pic_02.jpg";

img.title = "小猫";

};

</script>

</body>

（三）操作表单元素属性

表单元素的type、value、checked、selected、disabled等属性也能通过 JavaScript 进行操作。

例如：

<body>

<!-- 需求：1、点击按钮，更换input里的显示内容为：‘内容被修改了’

需求2:点击按钮，按钮就被禁用了

-->

// 1、获取元素

var btn = document.querySelector("button");

var int = document.querySelector("input");

// 绑定点击事件，处理函数

btn.onclick = function () {

int.value = "内容被修改了";

btn.disabled = true;

};

</script>

</body>

（四）操作样式属性操作

通过 JavaScript，我们可以轻松修改元素的大小、颜色、位置等样式。

element.style行内样式操作：
- 在 JavaScript 里面，样式采用小驼峰命名法，比如fontSize、backgroundColor。
- 使用 JavaScript 修改style样式，会产生行内样式，其 CSS 权重比较高。

element.className类名样式操作：
- 当样式修改较多时，可以采用操作类名的方式来更改元素样式。
- 由于class是保留字，所以使用className来操作元素的类名属性。
- className会直接更改元素的类名，会覆盖原先的类名。如果想保留原先的类名，在添加更改时，需要把原先类名加上。

示例如下：

<body>

// 需求1：点击div，div颜色变色，用行内样式实现

var box = document.querySelector(".box");

box.onclick = function () {

box.style.backgroundColor = "red";

};

// 需求2:鼠标移入，div的宽高发生变化，字体大小变化，字体加粗

box.onmouseover = function () {

// js里有个this的存在，在不同的情况下，指代不同的内容

// 在事件函数里，this指代调用者，也就是指向事件源

this.className = "box1";