js基本知识 —— js事件（1）

一、事件的组成

    btn.onclick = function () {}
    // btn —— 事件源
    // onclick —— 事件类型click 
    // function () {} —— 事件处理函数

1.左键单击事件

oDiv.onclick = function () { console.log('单击元素时触发') }

2.双击事件

oDiv.ondblclick = function () { console.log('双击元素时触发') }

3.右击事件

oDiv.oncontextmenu = function () { console.log('右击元素时触发') }

4.鼠标按下事件

oDiv.onmousedown = function () { console.log('鼠标按下时触发') }

5.鼠标抬起事件

oDiv.onmouseup = function () { console.log('鼠标抬起时触发') }

6.鼠标移入事件1 (移入子级盒子时, 也会触发)

oDiv.onmouseover = function () { console.log('鼠标移入div时触发') }

7.鼠标移入事件2 (移入子集盒子不会触发)

oDiv.onmouseenter = function () { console.log('鼠标移入div时触发') }

8.鼠标移出事件1 (移出子级盒子, 也会触发)

oDiv.onmouseout = function () { console.log('鼠标移出div时触发') }

9. 鼠标移出事件2 （移出鼠标到子盒子时并不会触发)

oDiv.onmouseleave = function () { console.log('onmouseleave 移出事件触发') }

10. 鼠标移动事件 (鼠标在 oDiv 元素内部移动的时候会触发)

oDiv.onmousemove = function () { console.log('鼠标移动事件触发~~~') }

1.键盘抬起事件

document.onkeyup = function(){ console.log('任意按下一个按键然后抬起') }

2.键盘按下事件

document.onkeydown = function(){ console.log('任意按下一个按键') }

3.键盘按下抬起事件

document.onkeypress = function(){ console.log('任意按下一个按键然后抬起时触发') }

1.获得焦点事件

inp.onfocus = function(){ console.log('当前文本获得焦点') }

2.失去焦点事件

inp.onblur = function(){ console.log('当前文本失去焦点') }

3.文本框内容改变时触发

inp.onchange = function(){ console.log('当前文本框内容发生改变') }

4.文本框输入内容时触发

inp.oninput = function(){ console.log('当前文本框正在输入内容') }