学习记录_javaScript_事件处理

1. javaScript事件处理

• [1. javaScript事件处理]
  • [1.1 在页面body加载事件]
  • [1.2 鼠标在对象中的事件处理]
  • [1.3 鼠标事件应用——表格绑定鼠标事件,颜色变化效果]
  • [1.5 页面加载的时候进行加载事件处理]
  • [1.6 页面加载的时候 对对象进行事件的监听绑定处理]
  • [1.7 监听按钮事件，显示图片]
  • [1.8 做一个图片浏览器]
  • [1.9 写一个定时器,每一秒更新一次时间]
  • [1.10 实现图片浏览器的自动滚动]

1.1 在页面body加载事件

在页面上任何的操作都可能被称为事件源；而每一个事件都可进行自定义的处理方式。
所有的事件在javascript里都以"onXxx"的形式命名
只在元素里面进行处理的两个事件：
1.页面加载事件：onload
2.页面卸载事件：onunload

    
    
    
    
 

    
你好，世界！

1.2 鼠标在对象中的事件处理

onmousedown(鼠标按下时触发）
onmouseover（鼠标进入时触发）
onmouseout（鼠标移开时触发）
onmouseup（鼠标弹开时触发）
onmousemove（鼠标移动时触发）

    
    
    
    


    
点击
    
    
移动
    
    
移开
    
    
进入时触发
    
    
按下后放开
    
    
你好，世界！
    button   

1.3 鼠标事件应用——表格绑定鼠标事件,颜色变化效果

    
    
    
    


    
    

        

            
部门编号
            
部门名称
            
部门位置
        
        

            
01
            
开发部
            
上海
        
        

            
01
            
设计部
            
北京
        
    
    
你好，世界

1.5 页面加载的时候进行加载事件处理

    
    
    
    


    
你好，世界

1.6 页面加载的时候 对对象进行事件的监听绑定处理

[object].addEventListener("事件类型","处理函数","冒泡事件或捕获事件");
[object].removeEventListener("事件类型","处理函数","冒泡事件或捕获事件");

IE监听方法中的事件类型："on"开头，例"onclick","onmousemove"…
标准DOM监听方法中的事件类型：不需要"on"（去掉），即"click","mousemove"…

当整个HTML页面都加载完毕之后，再执行函数---window.onload
所有的动态设置的事件都可以在onload里面进行动态的配置；若要配置，必须能取得一个明确的元素对象：使用方式document.getElementById(元素ID)的操作方式取得元素对象

    
    
    
    


    
    
你好，世界

整个javascript事件的处理分为：事件的触发过程和冒泡过程。触发时都会设置为false，表示在事件的触发过程进行处理，阻止事件的冒泡。

1.7 监听按钮事件，显示图片

    
    
    
    


    
    显示图片
    
你好，世界

1.8 做一个图片浏览器

    
    
    
    


    
        
    
    

        上一张
        下一张
    
    
你好，二哈

1.9 写一个定时器,每一秒更新一次时间

    
    
    


    hello

    

1.10 实现图片浏览器的自动滚动