微信商家收款 resultMap https go installation struct 抖音 pagination wso2 后台管理模板 打印缩放怎么设置 mysql增删改查语句 matlab停止运行 java集合转数组 java文件重命名 java线程中断 javaenum linux系统教程 python下载教程 abaqus最新版本 考试练习系统 位置不可用 华为动态照片 快手规则 暗黑3挂机plusready 骰子gif 超过响应缓冲区限制 qq浏览器手机版 氤氲之息哪里爆率高 苹果手机怎么微信双开 鼠标速度怎么调 lol改皮肤软件 shellif android模拟器下载 cf兑换券 php文件用什么打开 大虫子天赋 决战者加点 21天学通C语言 mysql注释
当前位置: 首页 > 学习教程  > 

每日一条js之原生事件(监听、冒泡、事件委托)

2020/10/16 18:03:51 文章标签: js原生点击事件

收集了一些比较偏僻的js原生事件和注意点 一、click和onclick的区别 当我们在使用点击事件的时候会用到这两个点击事件,但是有时候能成功有时候却失败。 原因是因为click不能作用在动态加载的元素上,onclick可以。 图省事往后原生js全用onclick了哈哈…

收集了一些比较偏僻的js原生事件和注意点

一、click和onclick的区别

当我们在使用点击事件的时候会用到这两个点击事件,但是有时候能成功有时候却失败。

原因是因为click不能作用在动态加载的元素上,onclick可以。

图省事往后原生js全用onclick了哈哈。

动态加载的元素比如说原生ajax请求到的数据后的回调函数中要将动态数据渲染到页面上时插入html代码。

二、prenentDefault()阻止冒泡事件

有一些业务场景可能会发生这种情况:父元素有一个点击事件,子元素也有一个点击事件并且子元素的位置在父元素正上方。这时候如果我们点击了子元素,点击事件会沿着子元素往上查找所有父、祖元素的点击事件并触发,但是我们的目标只是子元素的点击事件。这时候我们就要用到阻止冒泡事件。

下面是阻止冒泡事件的兼容写法  

if (e) {              
    e.stopPropagation();              
    e.preventDefault();            
} else {              
    window.event.returnValue = false;              
    window.event.cancelBubble = true;            
  }          
}

三、addEventListener()添加监听事件

方法:nodeName.addEventListener('click',fn(),false)

上面代码的意思是监听到nodeName一个节点对象的DOM点击事件,后执行fn()函数,false不进行冒泡捕捉。

监听事件通常和事件委托还有冒泡事件挂钩,其应用场景如下:

比如你从后端得到了一个需要循环展示的数据并且每条循环展示的数据都有一个对应的点击事件。这样的情况下如果ajax的回调中for循环给每一条数据都加上一条单独的点击事件这会对性能产生很大的影响(数据越多影响越大,少的话可能感觉不出来)。因此这里就需要用到事件委托、冒泡事件、监听事件。

思路如下:

1.每条信息的点击事件冒泡到父元素。

2.父元素监听到子元素的冒泡事件获取到点击事件得到的参数。

3.子元素将点击事件委托给父元素执行。

代码如下:

var oUl = document.getElementById("ul");
oUl.onclick = function(e){
  var e = e || window.event;
  var target = e.target || e.srcElement;
  if(target.nodeName.toLowerCase() == 'li'){
    alert('点到了li元素上才执行');
  }
}

这样就不用给每条数据加点击事件,直接在父元素上执行子元素的点击事件节省了大量的性能损耗。因为我急于求成js基础不好就去看了vue框架这个过程有点类似前端框架中的组件传值。个人觉得理解这个思路对往后一些前端主流框架的学习有很大的帮助。

 


本文链接: http://www.dtmao.cc/news_show_300360.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?