SOURCE

// 单击事件
function danji(){
    alert('单击事件')
}
// 双击事件
function dblclick(){
    alert('双击事件')
}
// 获取焦点
function onFocus(){
    console.log('获取焦点')
}
// 失去焦点
function onBlur(){
    console.log('失去焦点')
}

// 鼠标移在该位置上 字体颜色变红
function mouseover(){
    var text = document.getElementById('mouse');
    text.style.color = 'red'
    console.log(text.style.color)
}
// 鼠标移开 字体颜色恢复黑色
function mouseout(){
    var text = document.getElementById('mouse');
    text.style.color = 'black'
    console.log(text.style.color)
}
// 鼠标按下键盘 字体大小变小
function down(event){
    var text = document.getElementById('mouse');
    text.style.fontSize='10px'
    console.log('34----'+text.innerHTML)
}
// 鼠标按键松开
function mouseup(){
    var text = document.getElementById('mouse');
    text.style.fontSize='15px'
    console.log('40----'+text.innerHTML)
}

<!-- 常用的事件处理 -->
<div>onclick：用户点击某个对象时调用的事件</div>
<div>ondblclick: 双击某个对象</div>
<div>onchange: 域的内容被改变</div>
<div>onBlur: 元素失去焦点</div>
<div>onFocus: 元素获取焦点</div>
<div>onmouseover: 鼠标移到某元素上</div>
<div>onmouseout: 鼠标从某元素移开</div>
<div>onmousedown: 鼠标按下</div>
<div>onmouseup: 鼠标按键松开</div>
<hr>
<div onclick="danji()">onclick单击事件处理</div>
<div ondblclick="dblclick()">双击点击事件</div>
<input type="text" onBlur="onBlur()" onFocus="onFocus()"  name="content" id="content" value="onBlur失去焦点事件  onFocu获得焦点事件">
<div id="mouse" onmouseover="mouseover()" onmouseout="mouseout()" onmousedown="down(event)" onmouseup="mouseup()">鼠标指在这改变字体颜色 移开恢复颜色 按下字体大小变小 松开字体大小恢复</div>
<input type="text" id="test">