DOM的基本操作(一)

事件的过程

/*
*点击操作---->事件，有触发，有响应，有事件源
*按钮经过点击，弹出对话框
*按钮---->事件源
*点击---->事件名字
*经过点击---->触发
*弹出对话框---->响应
* */

基本操作的书写方法

方法一

<!--第一个版本-->
<!--HTML代码，点击按钮弹出对话框,对话框:alert()====>js的代码-->
<!--html代码中嵌入了js的代码,不方便后期的修改和维护-->
<input type="button" value="按钮" onclick="alert('你说前半生就这样吧，还有明天')">
<!--最终的效果:应该把js代码和html分离-->

方法二

<!--第二个版本: js代码很多,但是没有分离html和js该怎么做-->
<script>
    function f1() {
        alert('你说前半生就这样吧，还有明天');
    }
</script>
<input type="button" value="按钮" onclick=f1()>

方法三

<!--第三个版本-->
<input type="button" value="开始分离代码" id="btn" />
<!--html标签中的id属性中存储的值是唯一的,-->
<!--id属性就像人的身份证号码一样,不能重复,页面中的唯一的标识-->
<!--从文档中找到id值为btn的这个标签(元素)-->
<!--document.getElementById("id属性的值");======>返回的是一个元素对象-->
<!--根据id获取这个标签(元素)-->
<script>
    function f2() {
        alert("可能那些都不是真的");
    }
    //根据id获取这个标签(元素)
    var btnObj=document.getElementById("btn");
    //为按钮注册点击事件
    btnObj.onclick=f2;//f2中存储的是函数的代码
</script>

最终版

<!--最终版本-->
<input type="button" value="开始分离代码" id="btn" />
<script>
    //根据id属性的值从整个文档中获取这个元素(标签)
    var obj=document.getElementById("btn");
    //为该元素注册点击事件
    obj.onclick=function () {
        alert("从南向北");
    };
    //简写
    document.getElementById("btn").onclick=function () {
        alert("从南向北");
    };