js中DOM事件常见操作的示例分析

注意上方代码的注释。绑定的时候，是写fn，不是写fn()。fn代表的是整个函数，而fn()代表的是返回值。

方式三：行内绑定

//注意第一行代码，绑定时，是写的"fn()"，不是写的"fn"。因为绑定的这段代码不是写在js代码里的，而是被识别成了字符串。


  function fn() {
    alert("我是弹出的内容");
  }

3、事件驱动程序

 




  var oDiv = document.getElementById("box");
  //点击鼠标时，原本粉色的div变大了，背景变红了
  oDiv.onclick = function () {
    oDiv.style.width = "200px";  //属性值要写引号
    oDiv.style.height = "200px";
    oDiv.style.backgroundColor = "red";  //属性名是backgroundColor，不是background-Color
  }

上方代码的注意事项：

• 在js里写属性值时，要用引号

• 在js里写属性名时，是backgroundColor，不是CSS里面的background-Color。记得所有的像css属性的text-*，line-*、backgroun-*等在js中都写成驼峰

鼠标点击变化颜色：

  
    
    
    
      .box{         /*class*/
        width:100px;
        height:100px;
        background-color:green;
      }
    
  
  
    alex
  
  
    var oDiv = document.getElementById('box');
    var isGreen =true;
    oDiv.onclick=function(){
      console.log(oDiv.style);
    if (isGreen){
      oDiv.style.backgroundColor='red';
      isGreen=false; //通过改变isGreen的值来控制鼠标点击的效果
    }else{
      oDiv.style.backgroundColor='green';
      isGreen=true;
    }
    }
  

/*一个鼠标点击就是一个事件*/

onload事件

当页面加载（文本和图片）完毕的时候，触发onload事件。

  window.onload = function () {
    console.log("完毕"); //等页面加载完毕时，打印字符串
  }

效果：鼠标悬停发生事件，将鼠标放在图片1上面变成了图片2

以上是“js中DOM事件常见操作的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！