js中innerText/textContent和innerHTML与target和currentTarget的区别


Posted in Javascript onJanuary 21, 2019

一、获取/赋值文本值innerText/textContent、innerHTML

<body>
  <div id="box_text">
    <p style="color:hotpink;">muzidigbig</p>
    <p style="color:pink">lovely</p>
  </div>
  <input type="text" id='getValue' placeholder="输入值">
  <br>
  <button id="changeText">更改innerText</button>
  <button id="changeHTML">更改innerHTML样式</button>
</body>
<script>
  window.onload = function () {
    var textObj = document.getElementById('box_text');
    var changeText = document.getElementById('changeText');
    var changeHTML = document.getElementById('changeHTML');
    var getValue = document.getElementById('getValue');
    /*
    innerText获取的是纯文本值不含html标签
    //获得元素的里的纯文字内容(ie浏览器都可以用)
    var innerText = textObj.innerText;
    // 获得非ie里的文字内容
    var innerText = textObj.textContent;
    */
    // 短路写法(在兼容IE和非IE浏览器的写法)
    var innerText = textObj.innerText || textObj.textContent;
    //innerHTML获取的是含有html标签的文本值
    var innerHTML = textObj.innerHTML;
    console.log(innerText);
    console.log(innerHTML);
    changeText.onclick = function(){
      textObj.innerText = '木子大大';
    }
    changeHTML.onclick = function(){
      textObj.innerHTML = '<h1>可爱的</h1>';
    }
    getValue.onchange = function(){
      //value属性获得表单值
      console.log(getValue.value)
    }
  }
</script>

js中innerText/textContent和innerHTML与target和currentTarget的区别

二、event对象中 target和currentTarget 属性的区别。

首先本质区别是:

  • event.target返回触发事件的元素对象
  • event.currentTarget返回绑定事件的元素对象

js中的preventDefault()方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作),比如阻止表单提交,阻止链接跳转。

<body>
  <ul id="ul">ul
    <li>li<a href="">a</a></li>
    <li>li<a href="">b</a></li>
    <li>li<a href="">c</a></li>
  </ul>
</body>
<script>
  var ul = document.getElementById("ul");
  ul.onclick = function(event){
    var tar = event.target;
    console.log(tar);
    var tagName = tar.innerText;
    console.log("你点击了:"+tagName);
    var currentTarget = event.currentTarget;
    console.log(currentTarget);
    var currentName = currentTarget.innerText;
    console.log("你点击了:"+currentName);
    // js中的preventDefault()
// 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作),比如阻止表单提交,阻止链接跳转。
    event.preventDefault();
  }
</script>

js中innerText/textContent和innerHTML与target和currentTarget的区别

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
jQuery选择器实例应用
Jan 05 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
Vue 表情包输入组件的实现代码
Jan 21 #Javascript
JS实现将对象转化为数组的方法分析
Jan 21 #Javascript
vue中过滤器filter的讲解
Jan 21 #Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 #Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 #Javascript
js中实例与对象的区别讲解
Jan 21 #Javascript
详解vue挂载到dom上会发生什么
Jan 20 #Javascript
You might like
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
JavaScript 事件记录使用说明
2009/10/20 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
Python玩转Excel的读写改实例
2019/02/22 Python
如何在Django项目中引入静态文件
2019/07/26 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
北京华建集团SQL面试题
2014/06/03 面试题
毕业生的自我鉴定
2013/10/29 职场文书
致全体运动员广播稿
2014/02/01 职场文书
本科毕业生专业自荐书范文
2014/02/05 职场文书
金融管理应届生求职信
2014/02/20 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
转让协议书范本
2014/09/13 职场文书
员工旷工检讨书
2015/08/15 职场文书
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers