【JS】【笔记】JavaScript入门经典（第5版）第9章响应事件

来源：互联网发布：2016淘宝怎么刷编辑：程序博客网时间：2024/06/10 00:20

本文为个人读书笔记，大部分为书中内容摘要。仅供记录和分享学习中遇到的需要留意的问题，如有相关版权问题请及时通知作者。

事件范例

常见事件处理器

事件处理器响应的事件onBlur用户离开字段onChange用户修改了值onClick点击onDblClick双击onFocus用户进入字段onKeydown在元素激活时，一个按键被按下onKeyup在元素激活时，一个按键被释放onKeypress在元素激活时，一个按键被按下，然后被释放onLoad对象已经加载onMousedown鼠标按钮在一个对象上被按下onMouseup鼠标按钮被释放onMouseover鼠标移动到对象上onMousemove鼠标在对象上方移动onNouseout鼠标离开对象onReset用户重置表单onSelect用户选择了对象的一些内容onSubmit用户提交了表单onUnload

用户关闭浏览器窗口

//在我个人的实践中发现，几乎所有的浏览器都无法响应这个事件

添加事件处理器

内联事件处理器

另一种：

定义一个函数。在JS代码里利用document.getElementByID（）方法访问元素，在把函数赋予给它相应的方法。

document.getElementById("myButton").onclick=buttonAlert;//这里函数名不能加括号，不然返回函数调用后的返回值。

匿名函数式：

document.getElementById("myButton").onclick=function(){//function body}

删除事件处理器

给它赋值null

document.getElementById("myButton").onclick=null;

默认操作

一般情况下，特定HTML元素的时间处理器是在元素默认操作之前执行的。

禁止默认操作

利用事件处理器优先执行的特点，我们可以禁止HTML元素的默认操作。

如果事件处理器给HTML元素返回一个布尔值false，元素的默认操作就不会执行。

还可以让事件处理器自己决定是否允许默认行为发生。

return confirm("xxx,ok?");

表单验证

function checkform(){

document.getElementById("form1").onsubmit=function(){

var allowSubmit=true;

if(document.getElemtnById("user").value==""{

alert("xxx cannot be blank")；

allowSubmit=false；

}

if（allowSubmit） alert("ok");

return allowSubmit;

}

window.onload=checkform;

event对象

由浏览器自动生成，包含的属性涉及被触发事件的方方面面。

浏览器兼容性问题会影响，因此分开说明。

W3C方式

在严格遵循W3C规范规范的浏览器里，事件被触发时，会自动把event对象作为参数传递给事件处理器。为了访问event对象的属性，为了访问event对象的属性，需要给它设置一个名称，也就是给事件处理器声明一个变量。

myElement=document.getElementById("someID");

myElement.onclick=function(e){...}

本例中，访问变量e的属性就可以访问event对象的属性：

myElement.onclick=function(e){alert(e.type);}//e是惯例

微软方式

微软方式是给window对象设计了一个evnet属性。它包含最近一次触发事件的细节：

myElement=document.getElementById("someID");

myElement.onclick=function(e){alert(window.event.type);}

跨浏览器的事件处理器

确保代码能够查看有效的event事件：在事件处理函数里检测event对象的存在性。如果有event对象，就说明是W3C兼容的浏览器；如果不存在，浏览器就可能是微软类型的，这时就需要获得window.event属性，把它赋予对象e

myElement.onclick=function(e){

if(!e) var e=window.event;

...

}

W3C浏览器和微软浏览器

通用事件属性

属性描述type事件类型altKeyAlt键是否按下，布尔值clientX，clientY相对于浏览器窗口的事件坐标ctrlKeyCtrl键是否按下，布尔值keyCode键盘字符编码screenX，sreenY相对于屏幕的事件坐标shiftKeyShift键是否按下，布尔值

不同的事件属性

微软W3C描述fromElementrelatedTargetmouseover或mouseout事件从哪个对象来toElementrelatedTargetmouseover或mouseout事件到哪个对象去offsetX，offsetYn/a事件在元素里的水平和垂直坐标n/apageX，pageY事件在文档里的水平和垂直坐标x，ylayerX，layerY事件在<body>元素里的水平和垂直坐标srcElementtarget接收事件的对象

为了实现跨浏览器的代码，需要在脚本中检测event对象是否具有我们需要的方法和属性

if(!e) var e=window.event;

var element=(e.target)?e.target:e.srcElement;

事件处理器的高级方式

给属性注册多个事件处理器

W3C方式

W3C提供了addEventListener和removeEventListener方法，可以根据需要添加和删除任意数量的事件处理器。

element.addEventListener('click',myFunction,false);

element.addEventListener('click',myOtherFunction,false);

element.removeEventListerner('click',myFuction,false);

第一个参数指明要捕获的事件，第二个参数指明事件要执行的函数。

第三个参数是布尔值，表示当多个嵌套元素捕获同一事件时事件处理的属性。一般情况下设置为false.

当多个嵌套元素捕获到同一个事件时，浏览器厂家和W3C采取两种方式之一进行处理。捕获：外部元素先执行，冒泡：内部元素先执行。

微软方式：

attachEvent和detachEvent

element.attachEvent('onclick',myFunction);

element.detachEvent('onclick',myFunction);

微软的onclick对应W3C的click

IE9支持W3C方法

跨浏览器的实现方式

事件检测方式：

function addEventHandler(element,eventType,handlerFunction){

if(element.addEventHandler){

element.addEventListener(eventType,handlerFunction,false);

}else if(element.attachEvent){

element.attachEvent('on'+eventType,handlerFunction);

}

var eventType='click';

var myButton=document.getElementById('button01');

addEventHandler(myButton,eventType,myFunction);

去除事件处理器的跨平台方式：

function removeEventHandler(element,eventType,handlerFunction){

if(element.removeEventListener){

element.removeEventListener(eventType,handlerFunction,false);

}else if(element.detachEvent){

element.detachEvent('on'+eventType,handlerFunction);

}

removeEventHandler(myButton,eventType,myFunction);

0 0

【JS】【笔记】JavaScript入门经典（第5版）第9章 响应事件

【JS】【笔记】JavaScript入门经典（第5版）第9章响应事件