使用prototype.js的事件处理方法

简介:       在prototype.js中包含了Event对象,其中提供了几个常用的方法,来帮助开发者完成事件处理。比较常用的方法有:       Event.element(event):获得当前事件发生的对象;       Event.

      在prototype.js中包含了Event对象,其中提供了几个常用的方法,来帮助开发者完成事件处理。比较常用的方法有:
       Event.element(event):获得当前事件发生的对象;
       Event.isLeftClick(event):判断按下的是否为鼠标左键;
       Event.pointerX(event):返回事件发生时鼠标的X坐标;
       Event.pointerY(event):返回事件发生时鼠标的Y坐标;
       Event.findElement(event, tagName):从当前事件发生的元素向上查找,直到发现第一个类型为tagName的标签;
       Event.stop(event):阻止事件的默认传递;
       以上方法中的参数都是事件对象,例如window.event。
       可以使用Event.observe(element, event, handler, useCapture)为某个元素添加某个事件的处理方法。除了使用prototype.js中已有的方法外,也可以自己扩展Event对象,增加新的方法以适应新应用程序,下面的程序就是对Event对象的简单应用:
     

< html >
  
< head >
    
< title > Prototype Test Program </ title >
    
< script  language ="javascript"  src ="prototype.js" ></ script >
    
< script  language ="javascript" >
       
//扩展Event对象,增加判断是否右键点击的方法
       Object.extend(Event, {
           isRightClick: 
function(event) {
             
return (((event.which) && (event.which == 2)) ||
                    ((event.button) 
&& (event.button == 2)));
           }

         }

       );
    
</ script >
  
</ head >
  
< body  onmousedown ="alert('点击了链接以外的区域');" >
    
< href ="javascript:void(0)"  onmousedown ="test()"  userName ="test1" > 测试连接1 </ a >< br >
    
< href ="javascript:void(0)"  id ="ddd"  userName ="test12" > 测试连接2 </ a >
    
< script  language ="javascript" >
      Event.observe($(
"ddd"), "mousedown", test, false);
      
function test() {
        
//获得当前事件发生的元素,并获得自定义的userName属性得值
        alert(Event.element(window.event).userName);
        
//判断点击为左键,还是右键,还是未知键
        if(Event.isLeftClick(window.event)) {
          alert(
"左键点击");
          alert(Event.pointerY(window.event));
        }
 else if(Event.isRightClick(window.event)) {
          alert(
"右键点击");
        }
 else {
          alert(
"未知键点击!");
        }


        
//阻止事件的向上传递,即此时不会触发body的onmousedown事件
        Event.stop(window.event);
      }

    
</ script >
  
</ body >
</ html >
目录
相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
javascript onkeydown事件
javascript onkeydown事件
|
4月前
|
JavaScript 前端开发
js事件队列
js事件队列
144 55
|
2月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
39 3
|
3月前
|
JavaScript 前端开发
JavaScript 事件
JavaScript 事件
35 2
|
20天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
29 5
|
4月前
|
JavaScript 前端开发
JavaScript 事件的绑定
JavaScript 事件的绑定
42 0
|
2月前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
50 6
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
25 5
|
3月前
|
监控 JavaScript 前端开发
|
2月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
141 0