js学习第5天：事件监听
2019-11-29 本文已影响0人
mapg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- 冒泡事件 从内而外，依次响应同名事件-->
<!-- 捕获型事件 从外到内 IE不支持-->
<!-- attach/removeEvent IE -->
<!-- add/removeEventListener 标准BOM浏览器-->
<script type="text/javascript">
window.onload = function() {
//加载完后加载
//alert('windows.onload()')
var mbody = document.getElementById('mbody');
var mdiv = document.getElementById('mdiv');
var mp = document.getElementById('mp');
//false：冒泡 p->div>body
//true：捕获 body->div->p
mbody.addEventListener('click', function() {
show('body<br/>')
}, true); //body
mdiv.addEventListener('click', function() {
show('div<br/>')
}, true); //body div
mp.addEventListener('click', function() {
show('p<br/>')
}, true); //body div p
<!-- bom对象属性绑定-->
var img = document.getElementsByTagName('img')[0];
img.onclick = handle;
}
function testFunction() {
alert("元素绑定");
}
function test1() {
alert("bom对象属性绑定")
}
//冒泡事件 从内而外
function show(sText) {
var oDiv = document.getElementById('display')
oDiv.innerHTML += sText;
}
//捕获型事件
function handle(oEvent) {
if (window.event) {
//oEvent = window.event;//IE
}
var oTaget;
if (oEvent.srcElement) {
oTaget = oEvent.srcElement; //IE
} else {
oTaget = oEvent.target;
}
alert(oTaget.tagName);
}
</script>
<!-- onclick="show('body<br/>');" -->
<!-- onclick="show('div<br/>');" -->
<!-- onclick="show('p<br/>');" -->
<body id="mbody">body点我呀
<div id="mdiv">div点我呀
<p id="mp">p点我呀</p>
</div>
<div id="display">
<img src="Snipaste_2019-11-25_15-25-23.png" border="0" /><br /><br/>
<!-- 阻止点击事件 -->
<a href="http://www.baidu.com" onclick="return false">惦记我跳转</a><br/><br/>
<!-- 元素绑定 -->
<input type="button" value="测试" id="testButton" onclick="testFunction()" /><br/><br/>
<!-- bom对象属性绑定 下面的js代码为他绑定了事件 -->
<button type="button" id="btn1">
<b>测试</b>
</button>
</div>
<!-- 按顺序执行 -->
<script type="text/javascript">
document.getElementById("btn1").onclick = test1;
</script>
</body>
</html>
