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 相关文章推荐
使用正则替换变量
May 05 Javascript
JavaScript 题型问答有答案参考
Feb 17 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
javascript中的继承实例代码
Apr 27 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
Web开发之JavaScript
Mar 29 Javascript
浅析JavaScript中的typeof运算符
Nov 30 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
js实现九宫格布局效果
May 28 Javascript
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图像处理类代码分享
2012/01/19 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
vue中锚点的三种方法
2018/07/06 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
python黑魔法之编码转换
2016/01/25 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
Python 加密与解密小结
2018/12/06 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
什么是lambda函数
2013/09/17 面试题
产品销售员岗位职责
2013/12/18 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
教师业务学习材料
2014/12/16 职场文书
违纪检讨书
2015/01/27 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android