常见的dom事件

点我试试

<!-- 2，dblclick -->
<button ondblclick="alert('双击了')">双击试试</button>

<!-- 3,mouseenter鼠标进入目标元素内的事件 -->
<div onmuseeter="console.log('hello world')"></div>

<!-- 4,mouseleave鼠标离开目标元素内的事件 -->
<div onmuseleaver="console.log('hello world!!!!!')"></div>

<!-- 5,mousemove鼠标离开目标元素上移动的事件 -->
<div onmusemove="console.log('hello world........')"></div>

<!-- 6,mousedown鼠标离开目标元素下按键的事件 -->
<div onmusedown="console.log('hello world down!')"></div>

<!-- 7,mouseup鼠标在目标元素抬起按键的事件 -->
<div onmouseup="console.log('hello world up!')"></div>

<!-- 8,mousewheel鼠标在目标元素上滚动滚轮的事件。目前部分浏览器可能已经废弃，可以使用onwheel代替 -->
<div onmousewheel="console.log('hello world wheel!')"></div>
<div onwheel="console.log('hello world wheel......')"></div>

<!-- 上边各种事件的写法一般会使用下边的方式代替  -->
<!-- 下边代码的意思是当div被点击之后立即调用myClick的功能代码 -->
<div onclick="myClick()"></div>

<div onclick="myClick2(event)" id="xxx"></div>
<div onclick="myClick2(event)"></div>
<div onclick="myClick2(event)"></div>
<!-- 在调用某一个功能的时候，除了可以把event传递给该功能，还可以传递其他的任意值 -->
<div onclick="myClick2(event,100)"></div>

<script>
    //创建一个myClick的功能(函数)代码。function功能、函数的意思。
    function myClick(){

        alert('div点击了')
    }

    function myClick2(e,x){
       //var div =  document.getElementById('xxx');
       //div.style.backgroundColor = 'blue';
       //e.target用来获取触发该事件的那个目标元素
       console.log(e,e.target,x);
       e.target.style.backgroundColor = 'blue';
    }