DOM事件模型四（Event对象）

最新推荐文章于 2024-10-29 13:34:40 发布

yanAHeng

最新推荐文章于 2024-10-29 13:34:40 发布

阅读量379

点赞数

分类专栏：学习不止文章标签： javascript

本文链接：https://blog.csdn.net/weixin_40005545/article/details/111657291

版权

学习不止专栏收录该内容

18 篇文章 0 订阅

订阅专栏

MouseEvent（鼠标事件）

在这里插入图片描述

KeyboardEvent（键盘事件对象）

在这里插入图片描述

阻止默认事件/冒泡

1. stopPropagation() – 阻止冒泡/捕获

document.body.addEventListener('click', function(e){
	console.log('bubble body')
});
document.querySelector('div').addEventListener('click', function(e){
	e.stopPropagation();	// 阻止冒泡
    console.log('bubble div')
});
document.querySelector('div').addEventListener('click', function(e){
    console.log('bubble div2')
});

点击div，打印如下：
在这里插入图片描述

div上的处理函数均正常执行，body上绑定的click事件没有被触发。

2. stopImmediatePropagation() – 阻止冒泡/捕获

document.body.addEventListener('click', function(e){
	console.log('bubble body')
});
document.querySelector('div').addEventListener('click', function(e){
	e.stopImmediatePropagation();	// 阻止冒泡
    console.log('bubble div')
});
document.querySelector('div').addEventListener('click', function(e){
    console.log('bubble div2')
});

点击div，打印如下：
在这里插入图片描述
我们在div上绑定了两个click的处理函数，而我们在第一个处理函数中使用了stopImmediatePropagation方法后，发现div上绑定的其他click的处理函数并未执行，同样的body上绑定的click事件也没有被触发。

3. cancelBubble属性 – 阻止冒泡/捕获

document.body.addEventListener('click', function(e){
	console.log('bubble body')
});
document.querySelector('div').addEventListener('click', function(e){
	e.cancelBubble = true;	// 阻止冒泡
    console.log('bubble div')
});
document.querySelector('div').addEventListener('click', function(e){
    console.log('bubble div2')
});

点击div，打印结果如下：
在这里插入图片描述
div上的处理函数均正常执行，body上绑定的click事件没有被触发。

4. preventDefault() – 阻止默认行为

 <a href="abc.com">abc</a>
 <script>
 document.querySelector('a').addEventListener('click', function(e){ 
 	e.preventDefault();
    console.log('click link')
});
</script>

点击a链接，打印结果如下：
在这里插入图片描述
a链接绑定的click事件正常执行，但链接并未跳转。

5. returnValue属性 – 阻止默认行为

 <a href="abc.com">abc</a>
 <script>
 document.querySelector('a').addEventListener('click', function(e){ 
 	e.returnValue = false;
    console.log('click link')
});
</script>

点击a链接，打印结果如下：
在这里插入图片描述
a链接绑定的click事件正常执行，但链接并未跳转。

自定义事件

1. 触发内置事件

<body>
  <a href="http://www.baidu.com" target="_blank"></a>
  <script>
  	// 生成事件对象实例
    const evt = new MouseEvent('click');
    // 触发事件
    document.querySelector('a').dispatchEvent(evt);
  </script>
</body>

2. 自定义事件名

<body>
  <a href="http://www.baidu.com" target="_blank"></a>
  <script>
  	// 生成事件
    const evt = new Event('build');
    // 监听事件
    document.querySelector('a').addEventListener('build',function(e){
      console.log(123);
    }, false);
    // 触发事件
    document.querySelector('a').dispatchEvent(evt);
  </script>
</body>

css对样式的影响

1. pointer-events:none;（IE6-10不支持）

此属性表示，该元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

<style>
  #parent {
    width: 300px;
    height: 300px;
    padding: 50px;
    margin: 50px;
    background: #f00;
  }
  #child {
    width: 200px;
    height: 200px;
    padding: 50px;
    background: #ff0;
    pointer-events: none;
  }
  #subChild {
    width: 100px;
    height: 100px;
    background: #00f;
  }
</style>
<body>
  <div id="parent">
    <div id="child">
      <div id="subChild">
      </div>
    </div>
  </div>
</body>
<script>
  let parent = document.getElementById("parent");
  let child = document.getElementById('child');
  let subChild = document.getElementById('subChild');
  // 均在冒泡阶段绑定事件处理函数
  parent.addEventListener("click", function (event) {
    console.info('parent', event.offsetX);
  });
  child.addEventListener("click", function (event) {
    console.info('child', event.offsetX);
  });
  subChild.addEventListener("click", function (event) {
    console.info('subChild', event.offsetX);
  });
</script>

当鼠标点击在subChild或child范围内时，event对象的target始终是parent，并且只会触发parent绑定的事件监听，而不会触发其本身或子元素上绑定的事件监听。
当给subChild加上样式pointer-events: auto;后，再次点击在subChild上时，subChild、child和parent上的事件监听会依次触发。

2. touch-action: none;

当触控事件发生在元素上时，不进行任何操作。

IE事件兼容

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] = handler;
    }
  },
  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;
    }
  } 
};