JavaScript学习_第8章_事件的处理

最新推荐文章于 2024-07-29 13:58:45 发布

weixin_34168880

最新推荐文章于 2024-07-29 13:58:45 发布

阅读量92

点赞数

文章标签： javascript ViewUI

原文链接：http://blog.51cto.com/stark/1033357

版权

本章目录

1.事件源

2.事件

3.事件对象

--概述

JS的事件处理有3个组成部分：事件源，事件，事件处理程序。

事件处理程序是一段代码，可以是一个函数调用，也可以是更多语句。

比如网页上有个按钮，点击后能让文字变成蓝色。按钮就是事件源，点击就是一个事件，点击后事件处理程序将文字变成了蓝色。

事件源

事件源就是Html中能够发生事件的元素。任何一个Html元素(节点)都可以是事件源，不只是button,还可以是body,div,p,h1....

事件

事件就是用户的操作。

--和鼠标相关的事件

click 单击
dblclick 双击
contextmenu 文本内容菜单事件(常在事件源body上发生)
mouseover 鼠标滑过
mouseout 鼠标离开
mousedown 鼠标按下
mouseup 鼠标抬起
mousemove 鼠标移动

--和键盘相关的事件

keypress 键盘事件
keydown 键盘按下
keyup 键盘抬起

--和文档相关的事件

load 加载页面(页面加载完之后触发此事件)
unload 关闭页面
beforeunload 关闭之前

--和表单相关的事件

focus 获取焦点
blur 失去焦点
submit 提交
change 改变(表单的内容改变)

--其他相关事件

scroll 滚动(拉滚动条的操作引起的)
selectd 选择(用鼠标选择某个区域)

--添加事件的3种方式

第1种

格式：

<tag on事件名 = "事件处理程序" />

注意：on和事件名之间没有空格。

例如：

<input type="button" οnclick="show()" value="show">
<script>
function show()
{
alert("aaaaa");
}
</script>

第2种

格式：

对象名.on事件 = "事件处理程序";

例如：

<div id="one">wwwwwwww</div>
<script>
var one=document.getElementById("one");
one.οnclick=function(){
this.style.backgroundColor="red";
}
</script>

这种方式给对象定义了事件。

第3种

格式：

<script for="事件源id" event="事件">事件处理程序</script>

文档流执行到事件处理程序时不会执行，只有事件源发生了事件时才会执行。
例如：

<div id="one">wwwwww</div>
<script for="one" event="onclick">
Var one=document.getElementById("one");
one.style.backgroundColor="red";
</script>

--注意：

一个事件源可以加多个事件。
事件返回假可以让事件处理结束。
事件返回假和事件处理函数返回假是有区别的，例如：

<body οncοntextmenu="return false"> //事件返回假，可以让事件处理结束
//所以，写事件处理函数时，可以这样：
<body οncοntextmenu="return test()">
<script>
function test()
{
return false;
}
</script>

由于onload事件是在页面加载完之后触发的，因此事件处理函数可以写在页面的前面，例如：

<script>
function test()
{
var one=document.getElementById("one");
alert(one.innerText);
}
</script>
<body οnlοad="test()">
<div id="one">
############
</div>
</body>

事件对象

--什么是事件对象

在事件发生时，JS会产生一个对象，用于记录事件的信息以及进行事件处理，这个对象就是事件对象。

事件对象在ie中是window.event，在火狐中是传给事件处理函数的参数.

--事件对象的属性

srcElement 事件源元素(事件源对应的对象)

使用例子：

<div οnclick="show()">aaaaaaaa</div>
<script>
function show()
{
event.srcElement.innerText="abc";//点击div标签后，内容变成abc
//实际是window.event,但window可以省略
}
</script>

keyCode 事件发生时键盘按键的asc ii码

使用例子：

<div οnkeyup="show()">aaaaaaaa</div>
<script>
function show()
{
alert(event.keyCode);//输出键盘上敲击字母的asc ii码
}
</script>

注意：

1.使用keyup事件只能输出字母，数字键(包括字母，数字，回车，空格，esc键)的ascii码。不能输出活动键(上，下，左，右，ctrl,shift,alt)，也不能输出功能键f1~f12。

2.使用keydown事件可以输出键盘任意按键的ascii。

clientX, clientY记录事件发生时，鼠标距客户端（浏览器）坐标原点（左上角）的距离
screenX, screenY记录事件发生时，鼠标距屏幕坐标原点（左上角）的距离

使用例子：

<body οnmοusemοve="test()">
<div id="one"></div>
<script>
var one=document.getElementById("one");
function test() {
var cx=event.clientX; //clientX 事件属性返回当事件被触发时，
//鼠标指针向对于浏览器页面（或客户区）的水平坐标。
var cy=event.clientY;
var sx=event.screenX; //距离屏幕原点的X坐标
var sy=event.screenY;
var str="clientX="+cx+", clientY="+cy+"; screenX="+sx+", screenY="+sy;
one.innerText=str;
window.status=str; //状态栏
window.document.title=str; //标题
}
</script>
</body>

returnValue 事件的返回值

可以用在事件处理函数中，如：

在事件处理函数中写上ev.returnValue = false; 可以让事件处理结束。

cancelBubble 此值为真的话可以取消弹出菜单

例如：

<body οnclick="one()">
<img src="bbs.gif" οnclick="two()">
<script>
function one()
{
alert("body onclick #######");
}
function two()
{
alert("p_w_picpath onclick @@@@@@@@");
window.event.cancelBubble=true; //如果这个值为true，
//就不会弹出"p_w_picpath onclick @@@@@@@@"
}
</script>
</body>

--关于ie和火狐的事件对象不同，如何处理

ie的事件对象是window.event。

而火狐的事件对象是在事件发生时创建，并将该对象作为事件处理函数的实参赋值给处理函数的形参。

因此写程序要照顾到这两个方面。

下面就是通常的处理手段：

对象名.on事件 = function(形参)
{
var ev = 形参 || window.event; //如果在火狐中，形参就有值；
//在ie中形参虽然没有值，但可以用window.event
将ev作为事件对象使用......
}

下面是使用例子：

<html>
<body>
<div id="one"></div>
</body>
</html>
<script>
var one = document.getElementById("one");
window.document.onmousemove = function(e)
{
var ev = e || window.event;
var cx=ev.clientX; //clientX 事件属性返回当事件被触发时,
//鼠标指针向对于浏览器页面（或客户区）的水平坐标。
var cy=ev.clientY;
var sx=ev.screenX; //距离屏幕原点的X坐标
var sy=ev.screenY;
var str="clientX="+cx+", clientY="+cy+"; screenX="+sx+", screenY="+sy;
one.innerHTML=str;
window.status=str; //状态栏
window.document.title=str; //标题
}
</script>

注意：

当事件处理程序中用到事件对象时，为了解决ie火狐兼容性问题，才需要按以下方式写事件处理程序：

对象名.on事件 = function(形参)
{
var ev = 形参 || window.event; //如果在火狐中，形参就有值；
//在ie中形参虽然没有值，但可以用window.event
将ev作为事件对象使用......
}

如果没有用到事件对象，可以不写function的形参，也不用定义对象ev。

转载于:https://blog.51cto.com/stark/1033357

weixin_34168880

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习_第8章_事件的处理

本章目录1.事件源2.事件3.事件对象--概述 JS的事件处理有3个组成部分：事件源，事件，事件处理程序。事件处理程序是一段代码，可以是一个函数调用，也可以是更多语句。比如网页上有个按钮，点击后能让文字变成蓝色。按钮就是事件源，点击就是一个事件，点击后事件处理程序将文字变成了蓝色。事件源事件...
复制链接

扫一扫