（笔记）鼠标移动到一个元素上所触发的事件

最新推荐文章于 2025-03-25 21:42:58 发布

舍得JIUJIU

最新推荐文章于 2025-03-25 21:42:58 发布

阅读量1.8w

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/qq_14961511/article/details/47209435

版权

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了HTML元素上触发的事件序列，如mouseover、mousemove、mouseout等，以及用户交互如点击和双击时的事件顺序。讨论了DOM0级和DOM2级事件处理程序的区别，包括addEventListener和removeEventListener方法，强调了事件处理程序的作用域和this的引用。还提及了IE的attachEvent和detachEvent方法作为对比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.1.js" type="text/javascript"></script>
</head>
<body>
<!-- 通过直接在html元素上面的与相应事件同名的 元素属性 来定义的时间处理程序  为html事件处理程序-->
<!--<input type="button" id="btn" value="查看点击事件属性" onclick="alert(&quot;asdasd&quot;)"/>-->
<!---->
<br>
<input type="button" id="btn" value="查看点击事件属性" onclick="try{clickMe();}catch (e){}" ondblclick="dbClick()" onmousemove="mouseMove()" onmousedown="mouseDown()" onmouseup="mouseUp()" onmouseover="mouseOver()" onmouseout="mouseOut()" onmousewheel="mouseWheel()" />
</body>
<script>
    //利用html事件处理程序 也就是直接在html元素上面加上 事件处理程序  这样this值 默认为 事件的目标元素  onclick="alert(this.value)"
  /*  try{clickMe();}catch (e){} 由于存在一个时差问题。用户可能会在
    HTML 元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。假设 showMessage()函数是在按钮下方、页面的最底部定义的。如果用户在页面解
    析 clickMe()函数之前就单击了按钮，就会引发错误。或者因为网速问题 加载顺序问题 还没有解析到clickMe()方法的时候。为此，很多 HTML 事件处理程序都会被封
    装在一个 try-catch 块中，以便错误不会浮出水面*/

    var btn = document.getElementById("#btn");

    function clickMe(){
        //alert("btn被点击,这是html事件处理程序 某个元素支持的每种事件，都可以用一个与相应事件处理程序同名的html元素属性（特性）来指定");
        //事件处理程序会自动传进来一个局部变量event
        //console.log("this",this);
        console.log("click");
        //console.log("event.target:",event.currentTarget,"btn.val():",$("#btn").attr("id"));
    }
    function dbClick(){
        console.log("dbclick");
    }
    function mouseMove(){
        console.log("mouseMove");
    }
    function mouseDown(){
        console.log("mouseDown");
    }
    function mouseUp(){
        console.log("mouseUp");
    }
    function mouseOver(){
        console.log("mouseOver");
    }
    function mouseOut(){
        console.log("mouseOut");
    }
    function mouseWheel(){
        console.log("mouseWheel");
    }

</script>

</html>

//当鼠标开始移动到按钮上一直到移除会依次出发 mouseover ->mousemove ->mouseout

//如果移动到按钮上面再点击一下在移出按钮范围的话，事件触发顺序为 mouseover->mousemove->mousedown(可能会有mousemove)->mouseup->click->mousemove->mouseout

//mousemove事件是mouse鼠标只要在按钮上面移动，就会触发的事件。所以在上面的过程中，就算是鼠标按下了之后有鼠标的移动也会触发mousemove

//一般点击的事件都是从鼠标按下又抬起之后才开始算的，也就是click事件触发时。

有双击的事件时如下图

html中指定事件处理程序有两个缺点首先，存在一个时差问题。因为用户可能会在 HTML 元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件，另一个缺点是，这样扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。不同 JavaScript 引擎遵循的标识符解析规则略有差异，很可能会在访问非限定对象成员时出错。

//DOM0级事件处理程序

//通过 JavaScript 指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种为事件处理程序赋值的方法是在第四代 Web 浏览器中出现的，而且至今仍然为所有现代浏览器所支持。原因一是简单，二是具有跨浏览器的优势。要使用 JavaScript 指定事件处理程序，首先必须取得一个要操作的对象的引用。

//使用 DOM0 级方法指定的事件处理程序被认为是元素的方法。因此，这时候的事件处理程序是在元素的作用域中运行；换句话说，程序中的 this 引用当前元素。来看一个例子。 var btn = document.getElementById("myBtn"); btn.onclick = function(){ alert(this.id); //"myBtn" };

DOM2级事件处理程序

//“ DOM2 级事件” 定义了两个方法，用于处理指定和删除事件处理程序的操作： addEventListener() 和 removeEventListener()。所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。

//通过 addEventListener()添加的事件处理程序只能使用 removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过 addEventListener()添加的匿名函数将无法移除，(两次调用的匿名函数不是相同的函数)如下面的例子所示。
//IE 实现了与 DOM 中类似的两个方法： attachEvent()和 detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。由于 IE8 及更早版本只支持事件冒泡，所以通过 attachEvent()添加的事件处理程序都会被添加到冒泡阶段。