使用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 >
目录
相关文章
|
3月前
|
JavaScript 前端开发
|
3月前
|
JavaScript 算法
|
3月前
|
JavaScript
|
16天前
|
JavaScript
事件触发、事件捕获与事件冒泡(js的问题)
事件触发、事件捕获与事件冒泡(js的问题)
|
18天前
|
JavaScript 前端开发 流计算
JS:oninput和onchange事件的区别
JS:oninput和onchange事件的区别
18 1
|
28天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素依次触发事件,而事件捕获则从最外层元素向内层元素传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。例如: ```javascript element.addEventListener(&#39;click&#39;, console.log, false); // 冒泡 element.addEventListener(&#39;click&#39;, console.log, true); // 捕获 ```
15 0
|
1月前
|
JavaScript 前端开发
JS页面加载事件
JS页面加载事件
|
1月前
|
JavaScript
|
1月前
|
JavaScript 前端开发
js阻止浏览器默认事件和防止事件传播事件
js阻止浏览器默认事件和防止事件传播事件
20 3
|
1月前
|
JavaScript
js事件记录(如有更新请留言我去补充)
js事件记录(如有更新请留言我去补充)