php javascript事件驱动设计,详解Javascript事件驱动编程

一、基本概述

JS是采用事件驱动的机制来响应用户操作的，也就是说当用户对某个html元素进行操作的时候，会产生一个时间，该时间会驱动某些函数来处理。

PS：这种方式和Java GUI中的事件监听机制很像，都是需要注册监听，然后再处理监听，只不过实现的方式不同而已。

二、事件驱动原理

事件源：产生事件的地方(html元素)

事件：点击/鼠标操作/键盘操作等等

事件对象：当某个事件发生时，可能会产生一个事件对象，该时间对象会封装好该时间的信息，传递给事件处理程序

事件处理程序：响应用户事件的代码

案例：

function test1(e){

window.alert("x=" + e.clientX + " y=" + e.clientY);

}

function test2(e){

window.alert("x=" + e.clientX + " y=" + e.clientY);

}

function test3(e){

window.alert(new Date().toLocaleString());

}

function test4(e){

if(e.value == "red"){

div1.style.backgroundColor = "red";

} else if (e.value == "black"){

div1.style.backgroundColor = "black";

}

}

JS事件分类

鼠标事件

click dblclick mousedown mouseout mouseover mouseup mousemove等

键盘事件

keydown keypress keyup等

HTML事件

window的onload unload error abort 文本框的select change等

其他事件

页面中有些特殊对象运行过程中产生的事件

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

function test1(e){

window.alert("x="+e.clientX+"y="+e.clientY);

}

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

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

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

function test3(e){

var pic=document.getElementById("pic");

if(e.value=="红色"){

pic.style.backgroundColor="red";

}

else if(e.value=="黑色"){

pic.style.backgroundColor="black";

}

}

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

event2.css

.style {

border:1;

background-color:red;

width:300px;

height:300px;

}

event2.html

function test3(e){

//取连接的第一个css文件的内容用0

var ocssRules=document.styleSheets[0].rules;

//从ocssRules取出你希望的样式

var style=ocssRules[0];//这里面的0表示event2.css文件中第一个规则

if(e.value=="黑色"){

style.style.backgroundColor="black";

}

else if(e.value=="红色"){

style.style.backgroundColor="red";

}

}

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

if(window.XMLHttpRequest)

{ //Mozilla, Safari, IE7,IE8

if(!window.ActiveXObject)

{ // Mozilla, Safari,

alert('Mozilla, Safari');

}

else

{

alert('IE7 .8');

}

}

else

{

alert('IE6');

}

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

function test(e){

window.alert("fss");

}

function test1(e){

window.alert("sfdsdf");

}

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

function test(){

//window.alert("没有菜单");

return false;

}

function test2(){

//window.alert("全选不行");

return false;

}

内容