dom事件的新认识

  • dom事件都是针对元素来说的，都要绑定在指定元素上，如果你希望所有元素都绑定，即不区分在那个元素上，都触发事件

比如当我们希望移动鼠标或者按下某个按键的时候事件被触发，这个时候我们显然不希望指定某个元素，希望整个页面任何位置都适用，这个时候要将事件绑定在document上 即document.onmousemove = function(){}  document.onkeydown  = function(){}

  • 事件中的this和 e.target 并不一定相等，e.target指的是触发事件的最近一级的dom元素，this指的是事件绑定的dom对象
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击一个段落。一个警告框将警报触发事件的元素。</p>
<script>
    document.getElementsByTagName('p')[0].onclick = myFunction;
    function myFunction(e){ 
        console.log(this === window);  //false
        console.log(this === e.target)  //true
        console.log(e.target)          //'<p onclick="myFunction(event)">点击一个段落。一个警告框将警报触发事件的元素。</p>'
    }
</script>

</body>
</html>
    ps：当使用行内式定义事件的时候，this指向window对象
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p onclick="myFunction(event)">点击一个段落。一个警告框将警报触发事件的元素。</p>
<script>
    function myFunction(e){ 
        console.log(this === window);  //true
        console.log(e.target)          //'<p onclick="myFunction(event)">点击一个段落。一个警告框将警报触发事件的元素。</p>'
    }
</script>

</body>
</html>

     

posted @ 2022-06-03 23:13  大哥成  阅读(38)  评论(0)  编辑  收藏  举报