e.target和this的区别/js触发事件的方式有哪些

 区别： e.target返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素） e.currentTarget 当前绑定事件的元素

在JavaScript中，e.target和this有着不同的含义和用途。

e.target通常是在事件处理程序中使用的，它表示触发事件的元素。例如，如果你在一个按钮上设置了一个点击事件，那么当你点击这个按钮时，e.target将会指向这个按钮。它的主要用途是获取到事件发生的源头，以便于执行针对该元素的操作。

而this则是指向当前对象，它通常在对象的方法中使用。在事件处理程序中，如果你是在一个对象上设置的事件处理程序，那么this将会指向这个对象。例如，如果你有一个名为myObject的对象，并在其上设置了一个点击事件，那么在该事件处理程序中，this将会指向myObject。

 以下是一个简单的示例来说明二者的区别：

let myButton = document.getElementById('myButton');  
  
myButton.addEventListener('click', function(e) {  
  console.log(e.target); // 输出的是触发点击事件的元素（这里是按钮）  
  console.log(this); // 输出的是绑定事件的当前元素（这里是button元素）  
});

在这个示例中，当你点击按钮时，e.target会指向按钮（即触发事件的元素），而this则会指向button元素本身（即绑定事件的元素）

<div class="box">box盒子</div>
<ul class="list">
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ul>
<script>
    var oBox = document.getElementsByClassName('box')[0];
    var oList = document.getElementsByClassName('list')[0];
    oBox.onclick = function(e){
      console.log(this); // div
      console.log(e.target); // div
    }
    oList.onclick = function(e){
      // e.target指向的是被点击的对象，谁触发了这个事件，就是谁，li能够拥有点击事件，是因为事件冒泡
      console.log(this);  // ul
      console.log(e.target); // li
    }
</script>

js触发事件的方式

方法一：

在js获取元素/标签

元素.事件名=匿名函数/function(){};

var oBox = document.querySelector('.box');
oBox.onclick = function(){
    console.log(oBox);
}

方法二：

元素.事件名=函数名

var oBox = document.querySelector('.box');
oBox.onclick = changeColor;
function changeColor(){
    oBox.style.backgroundColor = 'red';
}

方法三：

在HTML中触法 οnclick=“代码段/函数调用” 如果是函数的调用，可以传递一个参数，this（表示的是当前的标签）

<div class="box" onclick="changeColor(this,'green')"></div>
<script>
function changeColor(getThis,color1){
    console.log(getThis);
    getThis.style.backgroundColor = color1;
}
</script>