js之事件
2021-06-12 08:02
标签：出错 alert on() ges 它的 top 绑定 span 选择 在js中有许多的事件绑定。比如鼠标点击事件、双击事件、键盘事件等等。 其实我相信大多数人都用过很多的事件绑定的方法，js事件参考如下: 当我们需要一个通用的方法去封装我们需要的事件的时候，我们该怎么封装呢？通过名字去调用吗，我们有一个添加事件监听的方法，叫addEventListenner()。我们通过这个来进行事件的注册监听。那么我们是不是要想一想有没有浏览器的兼容性的问题呢，答案是当然有，在低版本的IE中我们使用attachEvent()来进行事件的监听。但是现在对于IE低版本的占有率已经很低了，所以对于IE低版本的兼容我们了解即可。 其实在addEventListener这个方法还有第三个参数，是用来决定在冒泡阶段还是在捕获阶段执行的： 事件冒泡是什么呢？当我们点击一个元素的时候，这个元素并没有绑定事件，但是呢，在它的父节点上我们绑定了一个事件，这时候在父节点上的事件会被触发。 当我们点击p标签的时候，没有触发事件，但是通过事件冒泡。div元素接收这个事件，然后进行了响应，如果我们在body上也注册了一个事件，那么这个事件也会被触发。 那我们怎么去阻止冒泡的呢?我们有一个方法叫stopPropatation()，这个方法能够阻止冒泡。 那么我们了解了事件的冒泡机制之后，我们就来谈一谈这个东西的应用。在我们实际的工作当中，事件代理也是会用到的，那么我们需要用到事件代理的情景是怎样的呢？在一个父元素中，有很多的子元素，他们都有一个触发事件，比如点击，当我们要频繁的去添加、更改子元素的时候，我们就要去为每一个子元素添加事件，这时候频繁的操作就可能会出错，同时也带来了一定的复杂度，比如博客里面下拉加载照片，我们需要为每一个图片添加事件，这时候，我们可以选择的解决办法就是使用事件代理。 我们会发现，当我们这样写就能够对这个标签里的所有的a元素进行处理，不仅仅能使代码简介，同时我们还能减少内存的占用，这就是事件代理的作用，快试试吧。 js之事件 标签：出错 alert on() ges 它的 top 绑定 span 选择 原文地址：http://www.cnblogs.com/zhangjuke/p/7277380.html一、js事件
1 // 我们使用一个函数来封装一下这个addEventListener
2 var listen = function(el, event, fn) {
3 el.addEventListener(event, fn);
4 }
5
6 var btn = document.getElementById("btn");
7 listen(btn, "click", function(e) {
8 e.preventDefault(); // 阻止a标签的默认事件
9 alert("我被点击了");
10 });
事件的冒泡
1 div>
2 p>xsxap>
3 div>
1 var _div = document.getElementsByTagName("div")[0];
2 _div.addEventListener(‘click‘, function() {
3 alert(‘div‘);
4 })
事件代理(委托)
1 div id="pics">
2 a href="../">图片1a>
3 a href="../">图片2a>
4 a href="../">图片3a>
5 a href="../">图片4a>
6
7 div>
1 var pic = document.getElementById("pics");
2
3 // 使用上面封装的方法
4
5 listen(pic, "click", function(e) {
6 var target = e.target; // 获取被点击的标签
7 if (target.nodeName === "A") {
8 alert(target.innerHTML);
9 }
10 });