脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js获取/赋值文本值和事件对象属性介绍

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

 更新时间：2019年01月21日 09:54:53   作者：muzidigbig  
今天小编就为大家分享一篇关于js中innerText/textContent和innerHTML与target和currentTarget的区别，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧

一、获取/赋值文本值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>

二、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>

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

总结

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

您可能感兴趣的文章:

相关文章

  • 去除有数组中重复的元素

    去除有数组中重复的元素

    数组 重复采用的是Object的 in 操作符，体现一把它的强大（有更好的办法来实现这个功能，但是这里只是演示 in 操作符）！
    2008-03-03
  • Bootstrap前端开发案例二

    Bootstrap前端开发案例二

    Bootstrap前端开发案例二，这篇文章能够帮助大家更还好的进行前端开发Bootstrap，相信大家会爱上Bootstrap
    2016-06-06
  • js实现简单日历效果

    js实现简单日历效果

    这篇文章主要为大家详细介绍了js实现简单日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Bootstrap基本样式学习笔记之表格(2)

    Bootstrap基本样式学习笔记之表格(2)

    Bootstrap提供了一个清晰的创建表格的布局，这篇文章主要介绍了Bootstrap学习笔记之表格基本样式的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 前端iconfont两种使用方式举例详解

    前端iconfont两种使用方式举例详解

    这篇文章主要介绍了一种流行的网页图标解决方案Iconfont的相关资料,包括创建项目、添加图标、下载代码、在项目中使用Iconfont和自定义图标样式等步骤,需要的朋友可以参考下
    2025-01-01
  • 斜45度寻路实现函数

    斜45度寻路实现函数

    没事写个寻路的，很简单，有需要的朋友可以参考下。
    2009-08-08
  • JavaScript保留关键字汇总

    JavaScript保留关键字汇总

    本篇文章是小编日常收集整理些javascript保留关键字相关知识汇总，需要的朋友参考下
    2015-12-12
  • 解决JS外部文件中文注释出现乱码问题

    解决JS外部文件中文注释出现乱码问题

    中文乱码在Java Web开发中经常出现，这是由于不同的部分编码不一样造成的，一般在开发中，我们把所有能设编码的地方，全部设置成UTF-8，但是有时候还是会出现乱码的情况。下面通过本文给大家分享JS外部文件中文注释出现乱码的解决方案，一起看看吧
    2017-07-07
  • 再论Javascript下字符串连接的性能

    再论Javascript下字符串连接的性能

    这是个老话题了，之所以再拿出来说，是因为浏览器一直在进步，以前最好的方法现在不一定是最好的。
    2011-03-03
  • 一个页面放2段图片滚动代码出现冲突的问题如何解决

    一个页面放2段图片滚动代码出现冲突的问题如何解决

    这是一段调用图片流动的代码？为什么我在首页同时复制出二段代码后图片不能流动显示了？遇此问题很是疑惑，于是搜集整理一些实用技巧以解大伙们的燃眉之急，需要了解的朋友可以参考下
    2012-12-12

最新评论