dom元素的事件基础

  JS中dom的事件基础：

事件由三部分：

1、事件源：

先找到元素，绑定事件，事件的执行函数function(){}(匿名函数)

2、事件类型：

鼠标时间：

鼠标左击事件：  onclick

鼠标经过：         onmouseover

鼠标离开：         onmouseout

获得鼠标焦点：  onfocus

失去鼠标焦点：  onblur

鼠标移动：         onmousemove

鼠标按下：         onmousedown

鼠标弹起：         onmouseup

 

案例：

#bb{
width: 200px;
height: 200px;
background-color: #0000FF;
transition: 2s;
}

<div id="aa">变化</div>
<div id="bb"></div>
<div id="cc">恢复</div>

var aa = document.getElementById("aa")
var bb = document.querySelector("#bb")
var cc = document.getElementById("cc")
aa.onfocus = function(){
bb.style.width = "300px"
bb.style.height = "300px"
bb.style.backgroundColor = "red"
}
cc.onfocus = function(){
bb.style.width = "200px"
bb.style.height = "200px"
bb.style.backgroundColor = "blue"
}

3、事件处理程序：

执行的函数功能：

如：var txt = document.getelementbyid();

txt.onclick = function(){}