JS事件基础

事件对象
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
什么时候会产生Event 对象呢?
例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象.
事件通常与函数结合使用,函数不会在事件发生前被执行!

A、只有当事件发生的时候才产生,只能在处理函数内部调用
B、处理函数运行结束后自动销毁

二、如何获取事件对象

IE:window.event
FF:对象.on事件=function(e){}

事件:
鼠标
onclick 当用户点击某个对象时调用的事件句柄。
oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发
ondblclick 当用户双击某个对象时调用的事件句柄。
onmousedown 鼠标按钮被按下。

键盘
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
框架/对象(Frame/Object)事件 表单事件 剪贴板事件.......

三、事件对象的属性

A、关于鼠标事件的事件对象
1. 相对于浏览器位置的
clientX--当鼠标事件发生时相,鼠标相对于浏览器X轴的位置
clientY--当鼠标事件发生时相,鼠标相对于浏览器Y轴的位置
2.相对于屏幕的位置的
3.相对于事件源的位置

B、关于键盘事件的事件对象

1、keyCode——获得键盘码
2、altKey,ctrlKey,shiftKey--判断这几个键是否被按下,按下为true,否则为false
3、type--用来检测事件的类型,主要用于多个事件通用一个事件处理程序的时候

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

1.eg:overflow:hidden;
如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。
因此,有可能即使元素框中可以放下所有内容也会出现滚动条。

visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

2.border-bottom-width 规定下边框的宽度。
border-bottom-style 规定下边框的样式。
border-bottom-color 规定下边框的颜色。
inherit 规定应该从父元素继承 border-bottom 属性的设置。
eg:
border-style:solid;
border-bottom:thick dotted #ff0000;

3.

<textarea> 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体

可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。
eg:<textarea id="txt1" rows="4" cols="40"></textarea>

4.操作整个页面

<script>
window.onload=function(){
document.body.onclick=function(){
alert('a');
}
} </script> <body style="border:1px solid red;">
<input type="button" value="aaa"/>
</body> /*想达到一个目的 点击页面的任意位置页面能做出反应(alert..)但是发现
document.body.onclick这招行不通
然后通过 style="border:1px solid red;"发现其实body撑不起来
<input type="button" value="aaa"/>+style发现body就那么大
(如果没有<input type="button" value="aaa"/>这句话(此时body就是一条线 得点击线才会反映alert)
*/
改正: document.onclick=function(){
         alert('a');
}
以后想用到整个页面的话就直接给document加

5.event

window.onload=function (){
/*event事件对象 兼容性
IE下事件处理函数
document.onclick=function(){
alert(event.clientX+','+event.clientY);//告知鼠标点击时的坐标(x,y)在哪个位置
}
Firefox下的事件处理函数 不同于IE 它是有一个参数的 参数是由系统传递过来的
document.onclick=function(ev){
alert(ev.event.clientX+','+ev.event.clientY);
}*/
document.onclick=function(ev){
var oEvent=ev||event;
alert(oEvent.clientX+','+oEvent.clientY);
}
}

6.事件冒泡(是最简单的事件流)

oBtn.onclick=function(ev){
        var oEvent=ev||event; //把事件对象获取过来
        
       oEvent.cancelBubble=true;//取消冒泡 就是事件不会再往上传了
}

/*
当最里面的div被点击之后他会把这个事件传递给他的父集 依次往上传直到html
所以你点击最里面的div(红色部分)会弹出red->green->(204,204,204)->body->html
事件冒泡:事件会顺着层级往上走
*/

<!DOCTYPE html>
<html onclick="alert('html');">
..... <body onclick="alert('body');">
<div style="background:#ccc;" onclick="alert(this.style.background);">
<div style="background:green;" onclick="alert(this.style.background);">
<div style="background:red;" onclick="alert(this.style.background);"></div>
</div>
</div> </body>

7.键盘

keyCode:获取用户按下键盘的哪个按键

document.onkeydown=function(ev){ //按下去就会发生不需要抬起来
var oEvent=ev||event;
alert(oEvent.keyCode); //按下a弹出65 没法出A因为按大小写键盘弹出20
//keyCode获取用户按下键盘的哪个按键
}
ctrlKey告诉我们ctrl有没有按下去(k是大写)
同理shiftKey altKey
 
8.oncontextmenu
document.oncontextmenu=function (){ //oncontextmenu:当用户点击右键

return false;                 再点击右键 右键菜单出不来了--》阻止默认事件
}

只能在文本框内输入数字:

if(oEvent.keyCode<48||oEvent.keyCode>57){
           return false;
} 因为其实在键盘按下什么键 text框内就出现什么键这个也是默认行为
所以如果想只能输入数字 就取消其他类型的默认行为;
 
拖拽行为:      鼠标和窗口左上角的距离保持不变
onmousedown:鼠标按下 onmousemove:鼠标移动 onmouseup:鼠标抬起
onmousemove 事件会在鼠标指针移到指定的对象时发生 当用户按下鼠标按钮执行Javascript代码
 
上一篇:SQL Server 查看identity值的几种方法。


下一篇:JavaScript 中repalce的使用