JS中事件基础笔记

一、事件
        事件的作用：为html的元素添加动作(行为)

        1.1 鼠标事件
   鼠标单击事件     onclick

   鼠标双击事件     ondbclick

   鼠标滑过事件     onmouseover

   鼠标移出事件     onmouseout

   鼠标穿过事件     

        1.2 表单事件
​    获得焦点(聚焦)事件   onfocus

​    失去焦点事件      onblur

​    内容改变事件     onchange

        1.3 键盘事件
​    键盘按下事件    onkeydown

​    键盘弹起事件     onkeyup

​    键盘按压事件     onkeypress

        1.4 其他事件
​    页面加载事件    onload

​    页面卸载事件     onbeforeunload

一、DOM对象
        1.1 DOM对象
什么是DOM对象？

     document   object   model    文档对象模型

​        文档： html文档

​        模型： DOM树

DOM对象可以干什么？

​    可以操作html标签的内容、属性、样式

        1.2 获取html的标签元素
​    **a. 通过标签的id属性值来获取元素**

​        document.getElementById(id属性值)

```html
<a href="#" id="test1">百度1</a>
<script>
// 通过id的方式获取dom元素
var obj = document.getElementById('test1')
</script>
```

**注意：** 在同一个html文档中id的值不能重复

​             如果id值重复了，谁先出现就获取谁

**b. 通过标签的类名来获取元素**

​    document.getElementsByClassName(类名)

```html
<a href="#" class="demo">百度2</a>
<span class="demo">span标签</span>
<script>
 // 通过class(类名的方式)获取dom元素
 var obj1 = document.getElementsByClassName('demo')
</script>
```

**注意：**获取到的是一个html元素集合

**c. 通过标签名称获取元素**

   document.getElementByTagName(标签名)

**d. 通过标签的name属性来获取元素**

     document.getElementByName(name属性值)

        1.3 样式修改的对象
**语法：** dom对象.style.css属性名=值

```html
<script>
// 修改样式   dom对象.style.css属性名称 = 值
obj.style.color='red'
</script>
```

注意：一次只能修改一个属性值，适用于修改少量样式的时候

​            如果需要修改的样式比较多，不建议使用这种方法去修改，推荐使用设置类名的方式去修改

```html
<script>
var obj2 = document.getElementById('test2')
 obj2.className +=' yushe'
</script>    
```

        1.4  内容
​    **a. 普通标签设置内容和获取内容**

​        dom对象.innerHTML

​        dom对象.innerText

​    **b. 标签标签的内容设置和获取**

​        dom对象.value

        1.5 属性
​      dom对象.getAttribute(标签属性的名称)

```html
 <div id="con" name="mydiv">上课别<b>玩游戏</b></div>
<script>
// 通过id的方式来获取元素
        var conObj = document.getElementById('con');
    // 获取属性值
        var attr = conObj.getAttribute('name')
        console.log(attr);
</script>
```

​      dom对象.setAttribute(标签属性的名称,值)  

```html
<script>
// 设置属性值
 conObj.setAttribute('name','new')
</script>
```

设置图片的路径

dom对象.src

设置单选按钮和复选框选中

dom对象.checked = true   // 选中