js-07-事件
一、js事件綁定在對象上的三種方法
a:將事件綁定在元素標簽的屬性上
<h3 onclick="console.log('奧特曼打怪獸')">海綿寶寶歷險記</h3>
b:將事件作為屬性添加到對象上
<h4>海綿寶寶歷險記2</h4>
window.onload = function(){
var h4 = document.getElementsByTagName('h4')[0];
h4.onclick = function(){
console.log('奧特曼第二次打怪獸');
}
}
c:將事件作為方法添加到對象上。 方法名稱：addElementListener（）→ 向指定元素添加事件
<h4>海綿寶寶歷險記3</h4>
window.onload = function(){
var h4 = document.getElementsByTagName('h4')[0];
var fyh=function(){
console.log('奧特曼第三次打怪獸');
}
h4.addEventListener('click',fyh,false);
//事件名稱、處理程序（回調(diào)方法）、false以冒泡方式處理
h4.removeEventListener('click',fyh,false);
//將次方法移除；方法名稱：removeEventListener
}
事件監(jiān)聽→ 事件監(jiān)聽移除
true 的觸發(fā)順序總是在 false 之前；
如果多個均為 true，則外層的觸發(fā)先于內(nèi)層；
如果多個均為 false，則內(nèi)層的觸發(fā)先于外層。
二、冒泡事件和捕獲事件
//捕獲事件發(fā)生過程：window-document-body-div-button （從大到小）
//冒泡事件發(fā)生過程:div-body-document-window （從小到大）
a：冒泡事件
<h2>中國</h2>
<ul>
<li>1111111111</li>
<li>2222222222</li>
<li>3333333333</li>
</ul>
<script>
window.onload = function(){
var li= document.getElementsByTagName('li');
var ul= document.getElementsByTagName('ul')[0];
document.body.onclick=function(m){
alert('我是body');
}
ul.onclick=function (m){
alert('我是ul');
}
for (var i=0;i<li.length;i++){
li[i].onclick=function (m){
alert('我是li');
//冒泡攔截
m.cancelBubble=true; //攔截冒泡
m.stopPropagation();
}
}
}
</script>
注：a：輸出結果由內(nèi)往外彈出我是li/ul/body
b：cancelBubble=true{true為攔截冒泡，默認值是false}
stopPropagation()
倆個同為攔截冒泡的方式，寫在一起是為了瀏覽器兼容使用。
b：捕獲事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div2{width:200px;height:200px;background:#f00;} </style>
</head>
<body>
<div id="div2">
<div id="div1">點我</div>
</div>
<script>
//事件的捕獲
var div2=document.getElementById('div2');
var div1=document.getElementById('div1');
div2.addEventListener('click', function(event){console.log("A");}, false);
// div2.addEventListener('click', function(event){console.log("B");});
div1.addEventListener('click', function(event){console.log("C");}, false);
// div2.addEventListener('click', function(event){console.log("D");}, true);
</script>
</body>
</html>
注：返回結果為C、A
三、addEventListener綁定click與直接寫onclick的區(qū)別
<body>
<!--addEventListener綁定click與直接寫onclick的區(qū)別-->
<ul id="difference">
<li id="add_event">11111111</li>
<li id="on_click">22222222222</li>
</ul>
<script>
var on_click = document.getElementById('on_click');
on_click.onclick=function(){
// alert('click1');
};
on_click.onclick=function(){
// alert('click2');
};
//onclick綁定了兩次，由于click在同一時間只能指向唯一對象，所以當對象綁定了多次，只會出現(xiàn)最后一次綁定。 var add_event = document.getElementById('add_event');
add_event.addEventListener('click',function(){
alert('add_event1');
},false);
add_event.addEventListener('click',function(){
alert('add_event2');
},false); //多次事件綁定的運行時使用
</script>
</body>
四、onchange事件（HTML元素被改變）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase(); //獲取X內(nèi)的值，將input框內(nèi)元素被
改變。
}
</script>
<body>
輸入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>當你離開輸入框后，函數(shù)將被觸發(fā)，將小寫字母轉(zhuǎn)為大寫字母。</p>
</body>
</html>
五、onkeydown（用戶按下鍵盤按鍵）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function myFunction(){
alert("你在輸入欄內(nèi)按下一個鍵");
}
</script>
</head>
<body>
<p>當你在輸入框內(nèi)按下一個按鍵是函數(shù)被觸發(fā)</p>
<input type="text" onkeydown="myFunction()">
</body>
</html>
六、onmouseover（用戶把鼠標移到HTML上）和onmouseout（用戶把鼠標移開HTML上）
{示例參考w3c}
總結
- 上一篇： web 小程序 ch3 小程序框架
- 下一篇： web 小程序 ch4 小程序组件