js中innerText/textContent和innerHTML與target和currentTarget的區別

來源：懂視網責編：小采時間：2020-11-27 22:01:44

js中innerText/textContent和innerHTML與target和currentTarget的區別

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

推薦度：

點擊下載本文 文檔為doc格式

導讀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

一、獲取/賦值文本值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>