DOM 基本操作 - 事件基础

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>

```

注意：