学习了JS后发现自己还有很多很多不会的东西。对于陌生的语言，从基础开始学习是非常有必要的。

但对于快速的课程而言，就此只针对课上出现过的事件进行学习!

一.getElementById()方法

getElementById()方法可返回拥有指定ID的第一个对象的引用。
语法:

1
document.getElementById(id)

举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)
}
</script>  
</head>
<body>
<h1 id="myHeader" onclick="getValue()">这是标题</h1>
<p>点击标题，会提示出它的值。</p>
</body>
</html>

可以看到代码里监听了”MyHeader”，当id为myHeafer的值被点击时，就触发后面的动作，也就是alert(x.innerHTML)，当我们点击时就触发了。

二.getElementById

是引用他人再做出动作，但是下面的方法就有些不一样了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮创建一个标题</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
    var h=document.createElement("H1");
    var t=document.createTextNode("Hello World");
    h.appendChild(t);
    document.body.appendChild(h);
};

</script>

</body>
</html>

在上面的代码里用到了

1
2
3
4
document.getElementByid("myBtn").addEventListener("click",function()
{
document.getElementByld("demo").innerHTML = "Hello World";
 });

这里的document.getElementByid(“myBtn”).addEventListerner 就不是引用id=myBtn的意思了。作用点在后面的addEventListerner，后面方法的作用是监听前面的id，当点击时满足条件从而去运行下面的函数。在这里有一个新的方法innerHTML。

innerHTML属性设置或返回表格行的开始和结束标签之间的HTML代码。 在这里的意思就是往前面id为demo的标签中间返回后面的“Hello World”代码。 这里代码的意思就是，当myBtn被点击时，则在demo标签的位置显示Hello World。

同理这里的”click”也可以改为”mousemove”，当移动到这个标签上时触发规则输出Hello World。

三.onclick事件

在这里出现了新的句子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function myFunction(){
    document.getElementById("demo").innerHTML="Hello World";
}
</script>
</head>
<body>

<p>单击按钮触发函数。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>

</body>
</html>

在这里出现了一个

1
<button onclick="myFunction()">点我</button>

一般来说这里我们都是些一个id去指定这个按钮。但是这里没有，当我们点击按钮后，这里直接通过onclick事件跳转了。他跳到了onclick=”myFunction()”后面的myFunction()函数处。

在函数中出现了另一个事件。通过引用”demo”这个标签，在ta的html范围内输出“Hello World”。从而这段代码的意思就是当我们点击按钮后在demo的代码范围内输出Hello World。

四.创建节点

下面的js代码是单击按钮将项目添加到列表中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">单击按钮将项目添加到列表中</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
    var node=document.createElement("LI");
    var textnode=document.createTextNode("Water");
    node.appendChild(textnode);
    document.getElementById("myList").appendChild(node);
}
</script>
<p><strong>注意:</strong><br>首先创建一个节点，<br> 然后创建一个文本节点，<br>然后将文本节点添加到LI节点上。<br>最后将节点添加到列表中。</p>

</body>
</html>

每点击一次“点我”，就在列表中增加一个值。

上面的代码执行顺序如下：

首先创建一个Li节点，然后创建一个文本节点，然后将文本节点增加到LI节点上。最后将节点增加到列表中。

createElement就是创建一个节点，createTextNode就是创建一个文本节点，appendChild就是将textnode（创建文本节点）加入到node(创建的节点)中去。

最后引用”myList” id，appendChild(node)将node(节点和文本节点的结合体)加入到

    标签中去。

五.createElement AND createTextNode

继上一个onclick事件之后扩展出另外一个程序。如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮创建一个标题</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
    var h=document.createElement("H1");
    var t=document.createTextNode("Hello World");
    h.appendChild(t);
    document.body.appendChild(h);
};

</script>

</body>
</html>

这里出现了新的事件createElement()，createTextNode()。

createrElement()的作用是创建一个”H1”节点（字体大小），然后createTextNode(“Hello World”)创建一个对象。h.appendChild(t)将t”Hello World”加入加入“H1”中(字体也会相应的变最大)。最后将h对象加入body的最后面。