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 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 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
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
event.srcElement 用法笔记e.target
2009/12/18 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
JSON取值前判断
2014/12/23 Javascript
jQuery知识点整理
2015/01/30 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
简单介绍Python中的struct模块
2015/04/28 Python
python实现矩阵乘法的方法
2015/06/28 Python
python动态加载包的方法小结
2016/04/18 Python
python3 flask实现文件上传功能
2020/03/20 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
python 安装移动复制第三方库操作
2020/07/13 Python
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
仓库组长岗位职责
2014/01/29 职场文书
质量标语大全
2014/06/12 职场文书
党员民主评议个人总结
2014/10/20 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
教导处教学工作总结
2015/08/12 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js