## 查找 HTML 元素
通常,通过 JavaScript,您需要操作 HTML 元素。
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
* 通过 id 找到 HTML 元素(getElementById)
* 通过标签名找到 HTML 元素(getElementsByTagName)
* 通过类名找到 HTML 元素(getElementsByClassName)
## 改变 HTML 内容
* 如需改变 HTML 元素的内容,请使用这个语法:
> document.getElementById(*id*).innerHTML=*新的 HTML*
* 如需改变 HTML 元素的属性,请使用这个语法:
> document.getElementById(*id*).*attribute=新属性值*
## 改变 HTML 样式
如需改变 HTML 元素的样式,请使用这个语法:
> document.getElementById(*id*).style.*property*\=*新样式*
```
[Visibility](https://www.php.cn/try/try--filename-trydhtml_visibility.html)
Visibility:控制元素隐藏和显示
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />
```
* * *
## DOM 事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
* 当用户点击鼠标时
* 当网页已加载时
* 当图像已加载时
* 当鼠标移动到元素上时
* 当输入字段被改变时
* 当提交 HTML 表单时
* 当用户触发按键时
*****
## onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
## onchange 事件
onchange 事件常结合对输入字段的验证来使用
## onmouseover 和 onmouseout 事件(鼠标事件)
当指针移动到元素上方时,改变其颜色;当指针移出文本后,会再次改变其颜色。
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
## onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
## onload 事件
页面加载完成以后触发
## onfocus 事件
当输入字段获得焦点时,改变其背景色。
## addEventListener() 方法(事件监听事件)
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。
addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。
* * *
## 语法
*element*.addEventListener(*event, function, useCapture*);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
> 注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。
```
//监听多个事件
var manyMatter\=document.getElementById('text3');
manyMatter.addEventListener('mouseover',myFunction3);
manyMatter.addEventListener('click',myFunction4);
manyMatter.addEventListener('mouseout',myFunction5);
function myFunction3(){
console.log('鼠标移入');
}
function myFunction4(){
console.log('您点击了哟');
}
function myFunction5(){
console.log('鼠标移出');
}
```
## 向 Window 对象添加事件句柄
```
<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。(改变浏览器窗口大小)</p>
<p id="demo"></p>
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = Math.random();
});
```
## 事件冒泡或事件捕获?
事件传递有两种方式:冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 元素插入到 元素中,用户点击 元素, 哪个元素的 "click" 事件先被触发呢?
在 *冒泡* 中,内部元素的事件会先被触发,然后再触发外部元素,即: 元素的点击事件先触发,然后会触发 元素的点击事件。
在 *捕获* 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: 元素的点击事件先触发 ,然后再触发 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:
addEventListener(*event*, *function*, *useCapture*);
默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。
- 空白目录
- CSS相关知识
- 透明度
- 鼠标样式
- 盒子隐藏
- 背景图
- 文本
- 字体
- 链接
- 列表样式
- 边框border
- 轮廓outline
- 外边距Margin
- 内填充Padding
- Css综合
- css分组和嵌套
- css尺寸
- CSS鼠标样式
- 显示与隐藏 display
- 定位
- Vue2
- Vue的核心原理
- vue的拦截原理
- vue的模板语法
- 数据绑定
- MVVM
- 事件处理
- 计算属性与监视
- class与style的绑定
- 条件渲染
- 列表渲染
- 收集表单
- 内置指令
- vue的生命周期
- 单文件组件
- vue脚手架
- 基础知识
- ref和props
- mixin混入
- 插件
- scoped样式
- 缓存WebStorage
- 组件的通信
- 消息的发布于订阅
- 全局事件总线
- 组件自定义事件
- nextTick
- vue封装的过渡于动画
- Vue脚手架配置代理
- 插槽
- Vuex
- 搭建vuex环境
- 基本使用
- getters的使用
- 四个Map的使用
- 模块化+命名空间
- 路由
- route基本使用
- 注意点
- 多级路由
- query参数
- 命名路由
- params参数
- 路由的props配置
- route-link的replace属性
- 编程式路由导航
- 缓存路由文件
- 两个生命周期钩子(路由)
- 路由守卫
- 路由器的两种工作方式
- Vue常用UI库
- JavaScript相关知识
- 基础知识
- Js常用表达式
- Js常见的事件
- Js的重要公共方法
- Js数据类型
- Js字符串
- Js数组
- Js布尔类型
- Js的类型转换
- Js算数
- Js的日期处理
- Js的循环
- Js正则匹配
- Js的DOM篇
- Js的DOM1
- Js的DOM2
- Js高级教程
- Js的BOM
- Js之Window
- Js之Window Screen
- Js之Window Location
- Js之Window History
- Js之Navigator
- Js之弹框
- Js之计时
- Js之Cookies
- Js库-框架篇
- jquery
- prototype
- Vue3