JS 事件綁定

時間 2019-11-16

標籤事件綁定欄目 JavaScript 简体版

原文原文鏈接

查找標籤：css

直接查找：html

document.getElementById('id'值)； // 返回值必定是標籤對象
document.getElementsByClass('c1');//返回的是標籤對象集合
document.getElementsByTagName('標籤名') //根據標籤名得到標籤集合
document.getElementsByName; //根據name屬性獲取一個標籤集合

導航查找：（依據某個標籤訂位其它標籤）app

element.parentElement //父節點標籤元素
element.children //全部子標籤
element.firstElementChild　　//第一個子標籤元素
element.lastElementChild //最後一個子標籤元素
element.nextElementSibling //下一個兄弟標籤元素
element.previousElementSibling//上一個兄弟標籤元素

標籤操做：this

文本操做：

　　取值操做google

　　　　console.log(ele_p.innerText); 文本 hellospa

　　　　 console.log(ele_p.innerHTML); 標籤文檔 <a herf=''>hello</a>操作系統

賦值操做htm

　　　　　ele_p.innerText='google';
對象

　　　　　ele_p.innerHTML='<a href=''>google</a>blog

屬性操做

　　原生JS方式：

　　element.setAttribute(name,value)

　　element.getAttribute(屬性名)

　　DHTML的簡化方式：

　　　　element.屬性名

　　　　element.屬性名=’值‘

　　class操做：

　　　　<p class='c1 c2'>yuan</p>　　　

　　　　className

　　　　element.classList.add() //添加

　　　　element.classList.remove() //刪除

　　css 樣式操做：

　　　　element.style.css屬性=值

　　value 值：

　　　　element.value

　　　　　　input textarea select

節點操做：

建立節點： document.createElement(標籤名稱）

　　　　　　　　var ele=document.createElement('input')

添加節點：父節點.appendChild(子節點)
刪除節點：父節點.removeChild(子節點)
替換節點: 父節點.replaceChild(新節點，替換節點)
拷貝節點：element.cloneNode(true)

事件綁定：

<div onclick='foo(this)'>DIV</div>

function foo(self){

　　self //事件觸發標籤

}

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p onclick="foo(this)">hello</p> <script> function foo(self){ alert(self.innerHTML) } </script> </body> </html>

　　　2.標籤對象.on事件=function(){

　　 this //事件觸發標籤

　　　　　　　　}

　　　for (var i=o;i<eles.length;i++){

　　　　　　eles[i].onclick=function(){}

　　　　　　}

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p id="p1">hello</p> <ul> <li class="item">111</li> <li class="item">222</li> <li class="item">333</li> </ul> <script> var ele_p=document.getElementById('p1'); ele_p.onclick=function(){ // alert(123) console.log(this) //打印的標籤 }

JS事件：

操做系統：對下管理全部的硬件對上提供接口

event對象：保存的是與此次觸發事件相關的具體信息

事件委派：

做用域鏈：