事件的概念
- JavaScript使我们有能力创建动态页面,网页中的每个元素都可以产生某些可以触发JavaScript 函数的事件。我们可以认为事件是可以被JavaScript 侦测到的一种行为。
事件流
- 事件流主要分为冒泡型事件和捕获型事件。IE浏览器目前只支持冒泡型事件,而支持标准DOM的浏览器比如火狐、Chrome等两者都支持。
使用返回值改变HTML元素的默认行为
- HTML 元素大都包含了自己的默认行为,例如:超链接、提交按钮等。我们可以通过在绑定事件中加上return false 来阻止它的默认行为。
通用性的事件监听方法
- 绑定HTML元素属性
<input type="button" value="clickMe" onclick="check(this)"/>
- 绑定DOM对象属性
document.getElementById("btn1").onclick = test;
- 实例:
a href="http://www.iotek.com.cn" onclick="return false" target="_blank">点击我</a>
<input type="button" value="测试1" id="mytest1" onclick="test1()">
<button type="button" id="test2"><b>测试2</b></button>
<script>
function test1() {
alert("绑定HTML元素属性");
}
function test2() {
alert("绑定DOM对象属性");
}
document.getElementById("test2").onclick = test2;
</script>
IE中的事件监听方法
[object].attachEvent("事件类型","处理函数"); // 添加监听
[object].detachEvent("事件类型","处理函数"); // 取消监听
标准DOM中的事件监听方法
[object].addEventListener("事件类型","处理函数","冒泡事件或捕获事件");
[object].removeEventListener("事件类型","处理函数","冒泡事件或捕获事件");
**提示:**IE监听方法中的事件类型和标准DOM监听方法中的事件类型写法有点不同,前者事件类型“on” 开头,比如:“onclick”,“onmousemove”等。而后者不需要去掉“on”,就是“click”,“mousemove”等
- 实例:
input type="button" value="测试1" id="test1">
<button id="test2"><b>测试2</b></button>
<script>
// 以下代码只能在ie浏览器测试
// function show() {
// alert("hello ie");
// }
// document.getElementById("test1").attachEvent("onclick",show);
// document.getElementById("test2").onclick = function() {
// document.getElementById("test1").detachEvent("onclick",show);
// }
// 以下代码是标准DOM中的事件监听
var test1 = document.getElementById("test1");
var test2 = document.getElementById("test2");
test1.addEventListener("click", show, false);
// test2.onclick = function(){
// test1.removeEventListener("click", show, false);
// } // 也可以写成下面的形式
test2.addEventListener("click",function(){
test1.removeEventListener("click", show, false);
},false)
function show() {
alert("hello chrome");
}
</script>