onchange:域的内容改变时,页面随之发生改变
<script type="text/javascript">
//页面加载
window.onload = init;
//初始化
function init(){
//获取下拉菜单
var menu = document.getElementById("bgselect");
//给菜单绑定change事件,一般作用于select,radio,checkox
bgselect.onchange = function() {
//获取当前选中的值
var bgc = menu.options[menu.selectedIndex].value;
if(bgc=="") return;
//设置背景色
document.body.style.background = bgc;
}
}
</script>
</head>
<body>
<div class ="box">
请选择你喜欢的背景色:
<select name = "" id = "bgselect">
<option value = "red">红色</option>
<option value = "green">绿色</option>
<option value = "blue">蓝色</option>
<option value = "pink">粉色</option>
<option value = "yellow">黄色</option>
<option value = "purple">紫色</option>
</select>
</div>
</body>
以下图片实现的功能是:选择什么样的颜色,背景就会变成什么颜色。
onsubmit:单中的确认按钮被点击时发生。
onmousedown:鼠标按钮在元素上按下时触发。
onmousemove:在鼠标指针移动时发生
onmouseup:在元素上松开鼠标按钮时触发
<style>
.box{
width:200px;
height:200px;
background:#f00;
}
</style>
</head>
<body>
<div class = "box" id = "box">拖动</div>
<script type="text/javascript">
var box = document.getElementById("box");
//绑定按下的事件
box.onmousedown = function() {
console.log("我被按下了");
}
//绑定移动的事件
box.onmousemove = function() {
console.log("我被移动了");
}
box.onmouseup = function() {
console.log("我被松开了");
}
box.onclick = function() {
console.log("我被点击了");
}
</script>
</body>
效果如下图所示:
onresize:当调整浏览器窗口的大小时触发
onscroll:拖动滚动条时触发
<style>
body{
height:5000px;
}
.box{
width:200px;
height:200px;
background:#f00;
overflow:auto;
}
</style>
</head>
<body>
<div class = "box" id = "box">
<p>我爱你</p>
<p>我爱你</p>
<p>我爱你</p>
<p>我爱你</p>
<p>我爱你</p>
<p>我爱你</p>
<p>我爱你</p>
<p>我爱你</p>
<p>我爱你</p>
<p>我爱你</p>
<p>我爱你</p>
<p>我爱你</p>
</div>
<script>
//浏览器窗口尺寸发生变化时触发
window.onresize = function() {
console.log("我的尺寸被改变了");
}
// 拖动滚动条
box.onscroll = function() {
console.log("我被拖动了");
<script>