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的区别

1. innerText不识别html标签非标准 去除空格和换行
2. 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>

```

注意：

1. Js 修改 style 样式操作, 产生的是行内样式，css 权重比较高
2. Js 里面的样式采取驼峰命名法 比如 fontsize、backgroundcolor
3. className 会直接更改元素的类名，会覆盖原先的类名; 如果想保留原先的类名，可以做多类名选择器