js--獲取/賦值文字值innerText/textContent、innerHTML的區別，獲取表單的值；js事件物件屬性target於currentTarget
阿新 • • 發佈：2018-11-04
<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>
若有不足請多多指教！希望給您帶來幫助！