1、直接在html中写js代码

<input type="button" onclick="alert('aaa');"/>

2、定义一个函数赋值给html中元素的on_xxx_属性

<input type="button" onclick="f1();"/>

3、通过javascript注册

document.getElementById('btn').onclick=f1;
document.getElementById('btn').onclick=function(){};

4、特殊事件onload

onload=function(){};//在页面加载后再执行


问题：代码一定在onload中吗？

（1）如果js代码需要操作页面上的元素，则将该代码放到onload里面；因为当页面加载完毕之后页面上才会有相关的元素

（2）如果js代码中没有操作页面元素的语句，则可以将该代码直接写在<script>标签中。例如，声明变量、相加求和等操作

<body>
<!--html标签-->
<script type="text/javascript">
写在这里的代码，由于已经是页面的底部，在执行该代码时，页面的元素已经都加载完毕，
所以可以不放到onload里面，也可以操作页面上的元素。
建议将操作页面元素的代码都放到onload里面。
</script>
</body>



5、关于this

this就是触发事件的对象

只有在“事件响应函数”中才能使用this获得发生事件的控件，在“事件响应函数”调用的函数中不能使用。


示例一：this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Javascript测试</title>
    <script type="text/javascript">
        function f1(){
            alert(this.id);
            alert(this == window);
        }
        onload=function(){
            document.getElementById('btn1').onclick=f1;
        };
    </script>
</head>
<body>
    <input type="button" value="第一个按钮" id="btn1"/><!--btn1,false-->
    <input type="button" value="第二个按钮" id="btn2" onclick="window.f1()"/><!--undefined,true-->
    <input type="button" value="第三个按钮" id="btn3" onclick="f1.apply(document.getElementById('btn1'))"/><!--btn1,false-->
</body>
</html>

效果图

Javascript注册事件的方式_javascript


示例二：走马灯

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Javascript测试</title>
    <script type="text/javascript">
        var sid;
        onload = function () {
            document.getElementById("btnStart").onclick = function(){
                sid = setInterval(function () {
                    var title = document.title;
                    document.title = title.substr(1) + title.charAt(0);
                },500);
            }
            document.getElementById('btnStop').onclick=function(){
                clearInterval(sid);
            }
        };
    </script>
</head>
<body>
    <input type="button" id="btnStart" value="开始"/>
    <input type="button" id="btnStop" value="停止"/>
</body>
</html>

效果图

Javascript注册事件的方式_javascript_02


示例代码三：动起来

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Javascript测试</title>
    <script type="text/javascript">
        var setId;
        onload = function(){
            document.getElementById('btnStart').disabled=false;
            document.getElementById('btnStop').disabled=true;
            document.getElementById('btnStart').onclick=function(){
                //获取层
                var divObj = document.getElementById('div1');
                divObj.style.position = 'absolute';//脱离文档流
                setId = setInterval(function(){
                    divObj.style.left = Math.random() * 100 + 'px';
                    divObj.style.top = Math.random() * 100 + 'px';
                },500);
                this.disabled = true;
                document.getElementById('btnStop').disabled=false;
            };
            document.getElementById('btnStop').onclick=function(){
                clearInterval(setId);
                this.disabled = true;
                document.getElementById('btnStart').disabled=false;
            };
        };
    </script>
</head>
<body>
    <input type="button" id="btnStart" value="开始"/>
    <input type="button" id="btnStop" value="结束"/>
    <div id="div1" style="border:solid 1px red;width:300px;height:150px;"></div>
</body>
</html>

效果图

Javascript注册事件的方式_javascript_03