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 相关文章推荐
定时器(setTimeout/setInterval)调用带参函数失效解决方法
Mar 26 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
Nov 26 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
Express结合Webpack的全栈自动刷新
May 23 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
聊天室php&amp;mysql(五)
2006/10/09 PHP
理解php原理的opcodes(操作码)
2010/10/26 PHP
php使用session二维数组实例
2014/11/06 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
JS中Object对象的原型概念基础
2018/01/29 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
css3 transform属性详解
2014/09/30 HTML / CSS
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
实习护士自我鉴定
2013/10/13 职场文书
高校毕业生自我鉴定
2013/10/27 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
英文求职信写作小建议
2014/02/16 职场文书
加多宝凉茶广告词
2014/03/18 职场文书
事假请假条范文
2014/04/11 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
解除租赁合同协议书
2016/03/21 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python