theme: smartblue
一、事件概述
JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为。
简单理解: 触发---响应机制。
网页中的每个元素都可以产生某些可以触发JavaScript的事件,例如,我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作。
事件由三部分组成: 事件源,事件类型,事件处理程序
```
<script>
//点击一个按钮,弹出对话框
//事件是有三部分组成: 事件源、事件类型、事件处理程序,我们也称为事件三要素
//(1)事件源事件被触发的对象谁按钮
var btn = document.getElementById('btn');
//(2)事件类型如何触发什么事件,比如鼠标点击(onclick)还是鼠标经过 还是键盘按下
//(3)事件处理程序通过一个函数赋值的方式完成
btn.onclick= function(){
alert("clicked")
}
</script>
```
二、 常见鼠标事件
三、 操作元素
3.1 改变元素内容
element.innerText
从起始位置到终止位置的内容,但它去除 html标签,同时空格和换行也会去掉
element.innerHTML
起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行
```
<div id="div1"></div>
<div id="div2"></div>
<script>
// 写
var div1 = document.querySelector("#div1")
var div2 = document.querySelector("#div2")
div1.innerText = "<strong>innerText</strong>"
div2.innerHTML = "<strong>innerHTML</strong>"
// 读
console.log(div2.innerText)
console.log(div2.innerHTML)
</script>
``` innerText和innerHTML的区别
- innerText不识别html标签非标准 去除空格和换行
- innerHTML 识别html标签 W3C标准 保留空格和换行的
这两个属性是可读写的, 可以获取元素里面的内容
3.2 改变属性内容
1.innerrext、innerHTM 改变元素内容
2.src、href
3.id、alt、title
```
<img src = "./1.jpg">
<button id="btn">change image</button>
<script>
var btn = document.querySelector("#btn")
var img = document.querySelector("img")
btn.onclick = ()=>{
img.src = "./2.jpg"
}
</script>
```
3.3 改变表单的属性
利用 DOM 可以操作如下表单元素的属性:
type、value、checked、selected、disabled
```
<input type="text" value="please input">
<button id="change">change value</button>
<button id="disable">change value</button>
<script>
// 获取元素
var changeBtn = document.querySelector("#change")
var disableBtn = document.querySelector("#disable")
var input = document.querySelector("input")
// 注册事件,处理程序
changeBtn.onclick = ()=>{
input.value = "changed"
}
disableBtn.onclick = ()=>{
input.disabled = true
}
</script>
```
3.4 改变样式属性
我们可以通过JS 修改元素的大小、颜色、位置等样式.
1.element.style行内样式操作
2.element.className 类名样式操作
```
<button id="change">change</button>
<script>
// 获取元素
var changeBtn = document.querySelector("#change")
var div = document.querySelector("div")
changeBtn.onclick = ()=>{
div.style.backgroundColor = 'black'
div.style.width = '250px'
div.className= 'change div'
}
</script>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
div{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
```
注意:
- Js 修改 style 样式操作, 产生的是行内样式,css 权重比较高
- Js 里面的样式采取驼峰命名法 比如 fontsize、backgroundcolor
- className 会直接更改元素的类名,会覆盖原先的类名; 如果想保留原先的类名,可以做多类名选择器