1、直接在html中写js代码
<input type="button" οnclick="alert('aaa');"/>
2、定义一个函数赋值给html中元素的on_xxx_属性
<input type="button" οnclick="f1();"/>
3、通过javascript注册
document.getElementById('btn').οnclick=f1; document.getElementById('btn').οnclick=function(){};
4、特殊事件onload
οnlοad=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);
}
οnlοad=function(){
document.getElementById('btn1').οnclick=f1;
};
</script>
</head>
<body>
<input type="button" value="第一个按钮" id="btn1"/><!--btn1,false-->
<input type="button" value="第二个按钮" id="btn2" οnclick="window.f1()"/><!--undefined,true-->
<input type="button" value="第三个按钮" id="btn3" οnclick="f1.apply(document.getElementById('btn1'))"/><!--btn1,false-->
</body>
</html>
效果图
示例二:走马灯
<!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').οnclick=function(){
clearInterval(sid);
}
};
</script>
</head>
<body>
<input type="button" id="btnStart" value="开始"/>
<input type="button" id="btnStop" value="停止"/>
</body>
</html>
效果图
示例代码三:动起来
<!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').οnclick=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').οnclick=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>
效果图
转载于:https://blog.51cto.com/lsieun/1844567