JavaScript

事件event的一些事儿

之前在在试做一个小模块,刚开始做的还挺顺利,到后来开始出现了一些小问题,是关于
Focus和blur的焦点事件.不过写篇文章不是说这个处理结果.因为很多东西都是要必须经常看到.像这些:
先看JS手册里的描述(以下信息来自引用);

event 对象:
代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态。代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态。
比较常见的属性有:
altKey: 设置或获取 Alt 键的状态
altLeft 设置或获取左 Alt 键的状态。
button 设置或获取用户所按的鼠标按钮。
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条.
ctrlKey 设置或获取 Ctrl 键的状态。
ctrlLeft 设置或获取左 Ctrl 键的状态
keyCode 设置或获取与导致事件的按键关联的 Unicode 按键代码。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
shiftKey 设置或获取 Shift 键的状态。
shiftLeft 设置或获取左 Shift 键的状态。
srcElement 设置或获取触发事件的对象。

事件响应
在事件参数问题上,IE和DOM leve-2标准不同,在后者的标准中,event对象是被作为事件接收函数(闭包)的参数传递的,而在IE中则是作为window对象(全局)的属性.所在首先处理兼容;



copycode:
function Fe(event1){
event1=(event1) || window.event;//兼容两种游览器的event参数模式
var target=event1.srcElement || event1.target;//兼容两种游览器的event参数属性
alert(target.type);

}

常见表单中的Enter+ctrl提交
copycode:
<script type="text/javascript">
window.onload=document.getElementById("bb1").onkeydown=function bb(evt){
evt=evt || window.event;
if(evt.keyCode==13 && evt.ctrlKey)//这里你可用shiftKey,altKey来进行一些其它事件模式
{alert("okkk");}}
</script>

禁右键
copycode:
<script>
document.oncontextmenu=function(e){
if(document.all){ return false; }else{ e.preventDefault();}
}
</script>



上面引用event其它属性:


其它应用


Comments(0)

页面的各种尺寸

copycode:
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量


例子详解:



xhtml不支持document.body.scrollTop
当为html文档加上如下头以支持xhtml过渡标准时候，使用document.body.scrollTop值始终为0.这是document.body.scrollTop始终为0,这时需要用document.documentElement.scrollTop才能获得正确的值,而如果不加xhtml的申明,document.documentElement.scrollTop将为0

scrollTop的一些事
用它可以来做一些网页的滚动效果.经常见到的是图片游览.
比如,简单的这个:


看这段代码:
copycode:
function up(){
var a=$("img_scroll_box").scrollTop;
var b=$("img_scroll_box").scrollTop;
while(a>b-58){
a=a-6;
$("img_scroll_box").scrollTop=a;}}

关于scrollTop在前面也已有详解.主要是根据当前的scrollTop的大小来确定下一次scrollTop的大小.根据这一点.可以简单的做一个滚动效果的.如下:


分享一些高手们的技巧
scroll滚动的封装
(1)http://www.css88.com


(2)这个版本是朋友给,没有地址,所以保留作者.
这里有2个封装.很强大.
copycode:
//<!-作者：风飘无影 -->
//参数说明: 要滚动的容器ID,方向r,l,t,b(t,b要注意内容必须是多行),延时速度,宽度，高度
function $(id){return document.getElementById(id);}
function myMarquee(_id,_mode,_speed,_w,_h)
{
this.ID=_id;
this.mode=_mode;
this.speed=_speed;
this.txt=$(_id).innerHTML;
this.width=_w;
this.height=_h;
var s='<div id="'+_id+'content" style="overflow: hidden;height:'+_h+'px;width:'+_w+'px;white-space: nowrap;"><div id="'+_id+'_show" style="display: inline">'+this.txt+'</div><div id="'+_id+'_hide" style="display: inline"></div></div>'
$(_id).innerHTML=s;
}

myMarquee.prototype.run=function()
{

$(this.ID+'_hide').innerHTML=$(this.ID+'_show').innerHTML;
var temp='mymarquee'+this.ID+'=setInterval(\'doing("'+this.mode+'","'+this.ID+'")\','+this.speed+')'
eval(temp)

var _id=this.ID;
var _mode=this.mode;
var _speed=this.speed;
$(this.ID+'content').onmouseover=function()
{
eval('clearInterval(mymarquee'+_id+')')
}
$(this.ID+'content').onmouseout=function()
{
eval('mymarquee'+_id+'=setInterval(\'doing("'+_mode+'","'+_id+'")\',_speed)');
}
}

function doing(mode,ID)
{
// alert(ID)
switch(mode) {
case 'l':
if($(ID+'_show').offsetWidth-$(ID+'content').scrollLeft<=0)
$(ID+'content').scrollLeft-=$(ID+'_show').offsetWidth
else{
$(ID+'content').scrollLeft++
}
break;
case 'r':
if($(ID+'content').scrollLeft<=0)
$(ID+'content').scrollLeft+=$(ID+'_show').offsetWidth
else{
$(ID+'content').scrollLeft--
}
break;
case 't':
if($(ID+'_hide').offsetTop-$(ID+'content').scrollTop<=0)
$(ID+'content').scrollTop-=$(ID+'_show').offsetHeight
else{
$(ID+'content').scrollTop++
}
break;
case 'b':
if($(ID+'_show').offsetTop-$(ID+'content').scrollTop>=0)
$(ID+'content').scrollTop+=$(ID+'_hide').offsetHeight
else{
$(ID+'content').scrollTop--
}
break;
}
}

实例2应用下载:下载
Comments(0)

缓冲效果

菜鸟版代码如下:
理解这段代码就基本上掌握了
copycode:
function f_s() {
var obj = document.getElementById("top");
obj.style.display = "block";
obj.style.height = "1px";

var sw = function () {
var s_width = parseInt(obj.style.height);
if (s_width < 350) {
obj.style.height = (s_width + Math.ceil((350 - s_width) / 15)) + "px";
}
else {
clearInterval(st);
}
}
var st = window.setInterval(sw, 1);
}



中级版本
http://bbs.blueidea.com/viewthread.php?tid=2843406&page=1#pid3929392
copycode:
/*
函数名称: Scroll
Scroll(obj, h, s)
参数说明:
obj,[object] id值或对象. 必需
h,[height] 展开后的高度. 可选(默认为200px)
s,[speed] 展开速度,值越小展开速度越慢. 可选(默认为1.2){建议取值为1.1到2.0之间[例如:1.17]}.
函数返回值:
true 展开(对象的高度等于展开后的高度)
false 关闭(对象的高度等于原始高度)
*/
function Scroll(obj, h, s){
if(obj == undefined){return false;}
var h = h || 200;
var s = s || 1.2;
var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
var status = obj.getAttribute("status")==null;
var oh = parseInt(obj.offsetHeight);
obj.style.height = oh;
obj.style.display = "block";
obj.style.overflow = "hidden";
if(obj.getAttribute("oldHeight") == null){
obj.setAttribute("oldHeight", oh);
}else{
var oldH = Math.ceil(obj.getAttribute("oldHeight"));
}
var reSet = function(){
if(status){
if(oh < h){
oh = Math.ceil(h-(h-oh)/s);
obj.style.height = oh+"px";
}else{
obj.setAttribute("status",false);
window.clearInterval(IntervalId);
}
}else{
obj.style.height = oldH+"px";
obj.removeAttribute("status");
window.clearInterval(IntervalId);
}
}
var IntervalId = window.setInterval(reSet,10);
return status;
}



高级版本
这个很全,不过,我是没有看懂的.- -!!
http://www.cnblogs.com/cloudgamer/



附高级版本:下载
Comments(1)

getBoundingClientRect() 来获取页面元素的位置

http://www.cnblogs.com/qieqing/archive/2008/10/06/1304399.html
document.documentElement.getBoundingClientRect

下面这是MSDN的解释：

Syntax
oRect = object.getBoundingClientRect()
Return Value
Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.
Remarks
This method retrieves an object that exposes the left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. In Microsoft Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.

还是实际解释下，该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。也不好理解，下面用图说明下。

该方法已经不再是IE Only了，FF3.0+和Opera9.5+已经支持了该方法，可以说在获得页面元素位置上效率能有很大的提高，在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。
按此在新窗口浏览图片
按此在新窗口浏览图片
下面的代码举了个简单的例子，可以滚动滚动条之后点红色区域看各个值的变化:


有了这个方法，获取页面元素的位置就简单多了

var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;

var Y=this.getBoundingClientRect().top+document.documentElement.scrollTop;
Comments(0)

IE与Firefox在JavaScript上的7个不同句法

http://www.happinesz.cn/archives/1097/
尽管那需要用长串的、沉闷的不同分支代码来应付不同浏览器的日子已经过去，偶尔还是有必要做一些简单的区分和目标检测来确保某块代码能在用户的机器上正常运行。在这篇文章中，作者介绍了7个在IE和Firefox中不同的JavaScript句法。

1. CSS "float" 值

访问一个给定CSS 值的最基本句法是：object.style.property，使用驼峰写法来替换有连接符的值，例如，访问某个ID为"header"的<div>的 background-color值，我们使用如下句法：
document.getElementById("header").style.backgroundColor= "#ccc";

但由于"float"这个词是一个JavaScript保留字，因此我们不能用 object.style.float来访问，这里，我们可以在两种浏览器中这么做：

在IE中这样写：
document.getElementById("header").style.styleFloat = "left";


在Firefox中这样写：
document.getElementById("header").style.cssFloat = "left";


2. 元素的推算样式
JavaScript可以使用object.style.property句法，方便地在外部访问和修改某个CSS样式，但其限制是这些句法只能取出已设的行内样式或者直接由JavaScript设定的样式。并不能访问某个外部的样式表。为了访问元素的"推算"样式，我们可以使用下面的代码：

在IE中这样写：
var myObject = document.getElementById("header");
var myStyle = myObject.currentStyle.backgroundColor;


在Firefox中这样写：
var myObject = document.getElementById("header");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;


3. 访问元素的"class"
像"float"一样，"class"是JavaScript的一个保留字，在这两个浏览器中我们使用如下句法来访问"class"。

在IE中这样写：
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");


在Firefox中这样写：
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");


This syntax would also apply using the setAttribute method.
4. 访问<label>标签中的"for"

就第3点中所提到的，我们同样需要使用不现的句法区分来访问<label>标签中的"for"：
在IE中这样写：
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");


在Firefox中这样写：
var = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");


5. 获取鼠标指针的位置
计算出鼠标指针的位置对你来说可能是非常少见的，不过当你需要的时候，在IE和Firefox中的句法是不同的。这里所写出的代码将是最最基本的，也可能是某个复杂事件处理中的某一个部分。但他们可以解释其中的异同点。同时，必须指出的是结果相对于Firefox，IE会有更在的不同，这种方法本身就是有BUG的。通常，这种不同可以用"拖动位置"来得到补偿，但，那是另外一个主题的文章了: ) !

在IE中这样写：
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX;
myCursorPosition[1] = event.clientY;


在Firefox中这样写：
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.pageX;
myCursorPosition[1] = event.pageY;


6. 获取可见区域、窗口的大小
有时，我们会需要找到浏览器的可视位置的大小，通常我们称之为"可见区域"。

在IE中这样写：

var myBrowserSize = [0, 0];
myBrowserSize[0] = document.documentElement.clientWidth;
myBrowserSize[1] = document.documentElement.clientHeight;


在Firefox中这样写：
var myBrowserSize = [0, 0];
myBrowserSize[0] = window.innerWidth;
myBrowserSize[1] = window.innerHeight;

7. Alpha 透明
好吧，这并不是一个JavaScript句法问题，而是源自于CSS的Alpha透明。但当某个物体需要淡入/出则需要JavaScript来表现，这是通过访问CSS的Alpha透明设置来完成的，通常在一个循环中完成。你需要通过来修改的JavaScript的代码如下：:

在IE中这样写：
#myElement { filter: alpha(opacity=50); }


在Firefox中这样写：
#myElement { opacity: 0.5; }


在IE中这样写：

var myObject = document.getElementById("myElement");
myObject.style.filter = "alpha(opacity=80)";


在Firefox中这样写：
var myObject = document.getElementById("myElement"); myObject.style.opacity = "0.5";


还有什么不同的吗?
这是作者（via: 7 JavaScript Differences Between Firefox & IE）个人根据自己的经验整理的，而sofish在JavaScript上依然是一个新手。如果还有更多的不同，欢迎大家提出来，分享出来，共同学习！
Comments(0)

page:1/3页上一页 1 2 3 下一页