事件绑定1

事件绑定有两种,传统事件绑定,现代事件绑定。传统事件绑定有内联模式和脚本模式。脚本模式即把一个函数体赋给一个对象的事件属性。

window.onload=function()
{
   var domb=document.getElementById(‘bd‘);
    domb.onclick=function(){
    alert(‘按钮点击‘);
};};

传统事件绑定存在的问题:

1.同一个对象的事件属性多个函数赋值很多次,前面的会被覆盖掉,只显示最后一个。

解决方法,把第一个函数的事件保存下来,然后再去执行一次。

window.onload=function(){

                 alert(‘q‘);
                                      };

        if(typeof window.onload==‘function‘)
        {
             var saved=null;
              saved=window.onload;
           }

     window.onload=function(){
                saved();
                 alert(‘s‘);
                                      };
                            

2.同一个事件类型下,不同事件的切换

解决方法:  当执行了第一个事件后,把第二个事件在第一个事件函数中赋值给点击事件。

把添加事件封装在一个函数中去。并且一并解决上述问题。


//一个对象里面的键值对,也可以用数组形式访问,属性放在中括号里。一个事件函数,里面不应该再放同名的//事件函数。

function addEvent(obj,type,fn)
{
    var saveEvent=null;

    if(typeof obj[‘on‘+type]==‘function‘)
    saveEvent=obj[‘on‘+type];
    obj[‘on‘+type]=function(){
        if(saveEvent)
        saveEvent();
        fn.call(this);
    };
}

添加事件后必须移除,不然内存会溢出

//删除事件
function removeEvent(obj,type)
{
    if(obj[‘on‘+type])
    obj[‘on‘+type]=null;

}

存在的问题:

1.如何避免添加已经添加过的函数。需要遍历事件,重名不添加。

2.删除事件时候,精确删除某个对象,某个类型,某个名称的函数。避免误删。

时间: 2024-10-10 14:46:47

事件绑定1的相关文章

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代替