事件绑定3

获取事件中那个主对象旁边的离得最近相关对象
w3c标准

addEvent(window,‘load‘,function()
{
    var spanDom=document.getElementById(‘box‘);

    addEvent(spanDom,‘mouseover‘,function(e)
    {
        alert(e.relatedTarget);
    }
    );
}

);

ie标准的方法

ie标准的相关对象,鼠标移入mouseover 必须对应fromElement()鼠标移出mouseout 必须对应toElement()

addEvent(window,‘load‘,function()
{
    var spanDom=document.getElementById(‘box‘);

    addEvent(spanDom,‘mouseout‘,function(e)
    {
        alert(window.event.toElement);
    }
    );
}

);

两款浏览器兼容性解决

//两款浏览器兼容性解决
function getRelatedElement(e){

    var e=e.relatedTarget||window.event;
    if(e.srcElement)
    {
        if(e.type==‘mouseover‘)
        return e.fromElement;
        if(e.type==‘mouseout‘)
        {
           return e.toElement;
        }

    }
    else if(e.relatedTarget)
    {
        return e.relatedTarget;
    }

}

用传统方式阻止浏览器默认行为

addEvent(window,‘load‘,function()
{
    var a=document.getElementsByTagName(‘a‘)[0];
    a.onclick=function(){
        alert(‘qwe‘);
        return false;
        };
    }
);

w3c阻止默认行为

addEvent(window,‘load‘,function()
{
    var a=document.getElementsByTagName(‘a‘)[0];
   addEvent(a,‘click‘,function(e){

     e.preventDefault();
     alert(‘qaaa‘);

   });

    }
);

阻止默认行为的兼容

//阻止默认行为的兼容
function preventDft(e)
{
    var e=e||window.event;
    if(e.preventDefault)
      e.preventDefault();
      else
      e.returnValue=false;
}

上下文菜单事件

addEvent(window,‘load‘,function()
{
    var t=document.getElementsByTagName(‘textarea‘)[0];
   addEvent(t,‘contextmenu‘,function(e){
       preventDft(e);

       var menu=document.getElementById(‘menu‘);
       menu.style.display=‘block‘;
       menu.style.left=e.clientX+‘px‘;
      menu.style.top=e.clientY+‘px‘; 

     });
     }
);

卸载前事件,关于离开当前页面的事件

addEvent(window,‘beforeunload‘,function(e)
{
    preventDft();

});

关于鼠标滚轮事件

//对于非火狐浏览器
addEvent(document,‘mousewheel‘,function(e)
{
    alert(e.wheelDelta);//滚轮滚动度数

});
//对于火狐浏览器

addEvent(document,‘DOMMouseScroll‘,function(e)
{
    alert(e.detail);//滚轮滚动度数

});

DOMContentLoaded readystatechange两个事件关于加载性能

时间: 2024-10-13 19:23:29

事件绑定3的相关文章

vuejs学习笔记(1)--属性,事件绑定,ajax

属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, i) in list">{{v}}</li> </ul> <script> var vm = new Vue({ el: '#box', // 对应的元素选择器 或者是 指向元素的变量 data: { // data list: [1,2,3] } });

VBSCRIPT事件绑定(隐式)

很多新版的浏览器都开始不支持VBSCRIPT 所以系统开始不断地有script错误,开始比较多地接触VBSCRIPT vbscript 和javascript 事件绑定的类似方法为 vbscript:   txt_id.Attributes("onblur") = "vbscript:trim_space(me)" javascript:txt_id.Attributes("onblur") = "javascript:trim_spa

vuejs学习笔记(2)--属性,事件绑定,ajax

属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, i) in list">{{v}}</li> </ul> <script> var vm = new Vue({ el: '#box', // 对应的元素选择器 或者是 指向元素的变量 data: { // data list: [1,2,3] } });

jQuery之元素操作及事件绑定

1.操作元素之属性: ①attr读:("selector").attr("属性名"):=>getAttribute("属性名"):改: ("selector").attr("属性名",值):=>setAttribute("属性名",值):*(*无法访问不再开始标签中存在的prop属性:例:checked,selected,disabled): ②prop读:("se

JavaScript事件绑定

浏览器事件概述 技术一般水平有限,有什么错的地方,望大家指正. 当我们在浏览网页的时候,浏览器可以在视觉上为我们展示出页面还可以在行为上响应用户的操作,浏览器响应用户的操作就是通过事件来完成的,浏览器提供了事件注册接口和事件监听接口这样浏览器就可以接收用户的行为并且进行处理了.浏览器已经提供很多的事件包括页面加载.鼠标事件以及键盘事件等,我们只需要定义好事件处理函数即可,当用户的操作触发这些事件时就会执行我们预先定义好的处理函数.一个行为的完整过程如下: 浏览器在交互的过程中基本的功能就是通过事

jQuery挖源码——事件绑定

jQuery版本:2.1.4 最常用事件绑定bind,调用了on. 1 bind: function( types, data, fn ) { 2 return this.on( types, null, data, fn ); 3 } 对应解绑unband,调用了off. 1 unbind: function( types, fn ) { 2 return this.off( types, null, fn ); 3 } 只执行一次的one绑定,赤裸裸调用on. 1 one: function

javascript 事件绑定

一.最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性.事件属性名称由事件类型外加一个“on”前缀构成.这些属性也被称为事件处理器 <INPUT TYPE="text" NAME="first_name" onChange="convertToUpper(this)"> 或者 <INPUT TYPE="text" NAME="first_name" onChange=&quo

IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素

IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的this不是指向执行当前事件的dom而是window切记,感觉这一点IE做的太奇怪了!

焦点 、event对象、事件冒泡、事件绑定、AJAX知识点备忘

焦点:使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 设置焦点的几种方式: 1.点击 2.TAB键 3.JS onfocus   onblur 属性 var oinp=document.getElementById('shuru') oinp.onfocus=function(){ if(oinp.value=='请输入'){ oinp.value='' } } oinp.onblur=function(){ if(oinp.value==''){ oinp

Jquery之事件绑定(bind(),live(),delegate(),on())

1..bind() 描述: 为一个元素绑定一个事件处理程序. .bind()一个基本的用法: $(selector).bind('click', function() { alert('User clicked on "foo."'); }); 可以直接用原生js替代为: $(selector).click( function() { alert('User clicked on "foo."'); }); 在jQuery1.4.3,您现在可以通过传递false代替