dom自带了很多事件,常见的如下所示
当触发这些事件的时候,我们可以执行自定义的各种函数。
一般说来,绑定事件有3种方法。
第一种方法,直接在标签上面绑定,比如
1
2
3
4
|
<input id=
'i1'
type=
'button'
onclick=
'ClickOn(this)'
>
function
ClickOn(self){
}
|
第二种方法,是先获取Dom对象,然后进行绑定。比如
1
2
3
4
5
|
<input id=
'i1'
type=
'button'
>
document.getElementById(
'i1'
).conclick=
function
ClickOn(){
}
|
第三种,则是通过 addEventListener() 绑定,这种方式可以绑定多个事件到一个点击操作上。他的第一个参数是click,第二个是匿名函数,第三个true表示从执行顺序从外到内,false表示从内到外
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
</head>
<style>
#main{
background-color: red;
width:300px;
height:400px;
}
#content{
background-color: pink;
width:150px;
height:200px;
}
</style>
<body>
<div id=
"main"
>
<div id=
"content"
></div>
</div>
<script>
var
mymain = document.getElementById(
"main"
);
var
mycontent = document.getElementById(
"content"
);
mymain.addEventListener(
"click"
,
function
(){console.log(
"main"
)},
true
);
mycontent.addEventListener(
"click"
,
function
(){console.log(
"content"
)},
true
);
</script>
</body>
</html>
|
当我们编写页面的时候,一个基本原则是行为(js) 样式(css) 和结构(html)都需要分离,因此第一种直接在标签上绑定样式和事件的方式应该尽量避免使用。
最后,再看看JavaScript的词法分析过程。
比如说,执行下面的函数,他的输出结果是首先输出function,然后27和27
1
2
3
4
5
6
7
8
|
function
t1(age){
console.log(age);
// function age()
var
age = 27;
console.log(age);
// 27
function
age(){}
console.log(age);
// 27
}
t1(3);
|
为什么会这样了,他的词法分析是三部分:
-
形式参数:这里首先创建AO.age=‘undefined’,然后AO.age=3;
-
局部变量:如果有AO.age了 不做改变,如果没有AO.age=undefined; 这里已经有了,因此不做改变
-
函数申明:优先级最高,直接age=function()
-
执行函数t1
经过3步之后,age直接变成优先级最高的函数,接下来age变成27,然后因为没有执行function age(),因此age不变。
本文转自 beanxyz 51CTO博客,原文链接:http://blog.51cto.com/beanxyz/1926582,如需转载请自行联系原作者