事件

最新推荐文章于 2024-07-25 21:56:24 发布

SOALIN

最新推荐文章于 2024-07-25 21:56:24 发布

阅读量213

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： js

本文链接：https://blog.youkuaiyun.com/SOALIN228/article/details/89873463

前端专栏收录该内容

31 篇文章

订阅专栏

这篇博客探讨了DOM2级事件的使用，包括如何实现事件绑定和解绑，特别是针对IE的兼容处理。内容涉及冒泡与捕获的概念，以及事件对象的属性和方法，如event.preventDefault()用于阻止默认行为，event.stopPropagation()阻止事件传播。同时，介绍了如何在不同浏览器间实现事件处理的兼容性代码。

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

DOM2级事件

可以绑定多个事件，松耦合

<div id="btn">我是btn</div>
var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
    alert("btn被触发了");
});
btn.addEventListener("click", function(){
    alert("btn2被触发了");
});

事件解绑

var btn = document.getElementById("myBtn");
var handler = function () {
  alert(this.id);
}
btn.addEventListener("click", handler, false);

btn.removeEventListener("click", handler, false); // 解绑

IE事件解绑

ie8及以下

var btn = document.getElementById("myBtn");
var handler = function(){
  alert(this.id);
}
btn.attachEvent("click", handler);

btn.detachEvent("click", handler);

兼容代码

var EventUtil = {
  addHandler: function(element, type, handler){
    if(element.addEventListener){
      element.addEventListener(type, handler, false);
    }else if(element.attachEvent){
      element.attachEvent("on" + type, handler);
    }else{
      element["on"+type] = null
    }
  },
  removeHandler: function(element, type, handler){
    if(element.removeEventListener){
      element.removeEventListener(type, handler, false);
    }else if(element.detachEvent){
      element.detachEvent("on" + type, handler);
    }else{
      element["on"+type] = null
    }
  }
}

var btn = document.getElementById("myBtn");
var handler = function(){
  alert("Clicked");
}
EventUtil.addHandler(btn, "click", handler);
EventUtil.removeHandler(btn, "click", handler);

冒泡和捕获

addEventListener() 第三个参数默认是false，是冒泡，改为true是捕获

事件代理，原理就是利用冒泡

<ul id="ul">
  <li id="one">item1</li>
  <li id="two">item2</li>
</ul>
<script>
  var ul = document.getElementById("ul");
  ul.addEventListener("click", function (event) {
    if (event.target.id == 'one') {
      alert(1);
    } else if (event.target.id == 'two') {
      alert(2)
    }
  })
</script>

事件对象

event.type 事件类型，如click
event.target 返回点击的元素
event.currentTarget 返回事件绑定的元素
event.preventDefault(); 阻止默认行为
event.stopPropagation(); 阻止事件的冒泡和捕获
event.clientY 浏览器导航栏底部到执行位置的距离
event.pageY 浏览器导航栏底部到执行位置的距离，会加上滚动条的距离
event.screenY 屏幕顶部到执行的位置

IE事件对象

window.event.returnValue = false; IE浏览器中阻止默认事件
window.event.cancelBubble = true; IE阻止事件冒泡
event.srcElement 和target一样

跨浏览器写法

// 跨浏览器的事件对象
var EventUtil = {
  addHandler: function (element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent("on" + type, handler);
    } else {
      element["on" + type] = null
    }
  },
  getEvent: function (event) {
    return event ? event : window.event;
  },
  getTarget: function (event) {
    return event.target || event.srcElement;
  },
  preventDefault: function (event) {
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  },
  removeHandler: function (element, type, handler) {
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      element.detachEvent("on" + type, handler);
    } else {
      element["on" + type] = null
    }
  },
  stopPropagation: function (event) {
    if (event.stopPropagation) {
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
  }
}

btn.onclick = function (event) {
  var event = EventUtil.getEvent(event);
  var target = EventUtil.getTarget(event);
}

btn.onclick = function (event) {
  var event = EventUtil.getEvent(event);
  EventUtil.preventDefault(event);
}

btn.onclick = function (event) {
  alert("Clicked");
  var event = EventUtil.getEvent(event);
  EventUtil.stopPropagation(event);
}

document.body.onclick = function (event) {
  alert("Body clicked");
}