事件&事件案例

5dom0级事件绑定.png

5dom0级事件绑定2.png

   按钮1
   按钮
   按钮3

5dom事件简介.png

5dom事件时有方法.png

5鼠标事件.png

5窗口事件属性.png

以上这三个都是window对象的方法

5js放在头部会有一些问题.png

代码是从上往下执行的，所以在执行js时找不到dom，这时可以用onload事件

5用onload事件.png

用onresize来做响应式网站很麻烦，用css3来做就简单很多，先试着做响应式：

    
    
        
box
        
box
        
box
        
box
        
box
    
    

onscroll事件并不是window对象独有的方法，div等等出现滚动条也行,
谁出现滚动条监听谁

window.onscroll=function(){}
myDiv.onscroll=function(){}

5表单事件.png

onfocus事件并不是鼠标点击输入框才触发，打开页面按tab键也能获取焦点；

onsubmit事件是在form上监听的，获取form的dom对象进行监听，在用户点击submit按钮提交表单时，触发事件

onchange可以应用到多个元素上

比如checkbox手动勾选或是后期通过程序去改变他，都能触发onchange事件

    
    
        北京
        上海
        天津
    

5表单事件tabindex.png

鼠标事件还有：
onclick
ondblclick
onmousedown-----onmouseup
onmouseenter-----onmouseleave
onmouseover------onmouseout
onmousemove

小练习：点击让div的背景颜色来回切换

原生js实现简单轮播图

        
    
    
        

            
            
            
            
        
        上一张
        下一张
    
    

这样通过obj.style.属性=xxx,这种通过js来改变css样式还是比较麻烦，可以直接在css中写好你想变成的样式，再给他添加类名的方式会比较简单：

.con {
  width:100px;
  height:100px;
}
box.className="con"

原生实现添加和移除类名：

    
box