详解Javascript事件驱动编程_javascript技巧

一、基本概述
JS是采用事件驱动的机制来响应用户操作的，也就是说当用户对某个html元素进行操作的时候，会产生一个时间，该时间会驱动某些函数来处理。
PS：这种方式和Java GUI中的事件监听机制很像，都是需要注册监听，然后再处理监听，只不过实现的方式不同而已。

二、事件驱动原理

• 事件源：产生事件的地方(html元素)
• 事件：点击/鼠标操作/键盘操作等等
• 事件对象：当某个事件发生时，可能会产生一个事件对象，该时间对象会封装好该时间的信息，传递给事件处理程序
• 事件处理程序：响应用户事件的代码

案例：

• JS事件分类
  
• 鼠标事件
• click dblclick mousedown mouseout mouseover mouseup mousemove等
• 键盘事件
• keydown keypress keyup等
• HTML事件
• window的onload unload error abort 文本框的select change等
• 其他事件
• 页面中有些特殊对象运行过程中产生的事件
  

案例1：监听鼠标点击事件，并能够显示鼠标点击的位置x,y

点击浏览器之后，显示坐标(有些浏览器可能无效)

案例2：点击按钮，图片变成红色，黑色
方法：JS访问内部css

//js如何访问css属性，来改变外观 
 
   
    

方法：JS访问外部css(这方法不一定适用于所有浏览器)

event2.css
.style { 
  border:1; 
  background-color:red; 
  width:300px; 
  height:300px; 
} 
event2.html
 
   
    

案例3：区分当前浏览器的内核是什么?(区分出ie6/7/8/ 火狐等)

案例4：一个事件可以被多个函数监听

 
   
  function test(e){ 
    window.alert("fss"); 
  } 
  function test1(e){ 
    window.alert("sfdsdf"); 
  } 
   
   
   
     
    

案例5：防止用户通过点击鼠标右键菜单拷贝网页内容，选择网页内容

 
     
    内容