JavaScript鼠标事件3

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>

以下图片实现的功能是:选择什么样的颜色,背景就会变成什么颜色。
JavaScript鼠标事件3_第1张图片

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>

效果如下图所示:
JavaScript鼠标事件3_第2张图片

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>      

你可能感兴趣的