javascript——事件绑定第二种形式

 事件绑定第一种形式:obj.onclick = fn1;

给文档添加多个点击事件,后面会覆盖前面的事件,所以只有最后一个事件执行了。

window.onload = function(){

    function fn1(){alert(‘1‘);}
    function fn2(){alert(‘2‘);}
    function fn3(){alert(‘3‘);} 

    document.onclick = fn1;
    document.onclick = fn2;
    document.onclick = fn3;    //最后一个会覆盖前面的事件
};

 

事件绑定第二种形式:【IE:obj.attachEvent(事件名称,事件函数); 标准:obj.addEventListener(事件名称,事件函数,是否捕获); 

IE:obj.attachEvent(事件名称,事件函数);
1.没有捕获
2.事件名称有on
3.事件函数执行的顺序:标准IE -> 正序 非标准 IE -> 倒序
4.this指向window

标准:obj.addEventListener(事件名称,事件函数,是否捕获);
1.有捕获
2.事件名称没有on
3.事件执行的顺序是正序
4.this触发该事件的对象

IE:obj.attachEvent(事件名称,事件函数);

window.onload = function(){

    function fn1(){alert(‘1‘);}
    function fn2(){alert(‘2‘);}
    function fn3(){alert(‘3‘);}
/*document.attachEvent(‘onclick‘, function() {
    fn1.call(document);
});
document.attachEvent(‘onclick‘, fn2);*/
};

标准:obj.addEventListener(事件名称,事件函数,是否捕获);

window.onload = function(){

    function fn1(){alert(‘1‘);}
    function fn2(){alert(‘2‘);}
    function fn3(){alert(‘3‘);} 

/*
    是否捕获 : 默认是false    false:冒泡 true:捕获
    object.addEventListener(type , fn ,false);
*/

    document.addEventListener(‘click‘ , fn1 , false);
    document.addEventListener(‘click‘ , fn2 , false);
    document.addEventListener(‘click‘ , fn3 , false);
};

上面都方法都只兼容个别浏览器,以下是集合两种做的兼容进行封装处理:

window.onload = function(){

    function fn1(){alert(‘1‘);}
    function fn2(){alert(‘2‘);}
    function fn3(){alert(‘3‘);}
//函数封装
function bind(obj , evname ,fn){
    if(obj.addEventListener){
        obj.addEventListener(evname,fn,false)
    }else{
        obj.attachEvent(‘on‘ + evname ,function(){
            fn.call(obj);
        });
    }
}
  //函数调用
    bind(document , ‘click‘ ,fn1);
    bind(document , ‘click‘ ,fn2);
    bind(document , ‘click‘ ,fn3);

};
时间: 2024-10-14 06:30:14

javascript——事件绑定第二种形式的相关文章

事件绑定的第二种形式 & call

<script> //call 函数下的一个方法,call方法第一个参数可以改变函数执行过程中的内部this的指向,call方法第二个参数开始就是原来函数的参数列表. function fn1(a, b) { alert(this); alert(a + b); } fn1(); //window fn1.call(null, 10, 20); //调用函数 fn1() == fn1.call() </script> <script> //给一个对象绑定一个事件处理函数

事件绑定的第二种形式

一.过去,给一个对象绑定一个事件,来处理函数的形式,如obj.onclick=fn1,我们称之为事件绑定的第一种形式(赋值形式). 这种形式的有一种缺点就是:同一个对象的同一个事件不能同时处理两个不同的函数. 例如: function fn1(){ alert("A") } function fn2(){ alert("B") } document.onclick=fn1; document.onclick=fn2;//后面一个事件会覆盖前面一个事件 二.为了解决上

【REACT NATIVE 系列教程之一】触摸事件的两种形式与四种TOUCHABLE组件详解

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2203.html 本文是RN(React Native)系列教程第一篇,当然也要给自己的群做个广告:   React Native @Himi :126100395  刚创建的群,欢迎一起学习.讨论.进步. 本文主要讲解两点: 1.   PanResponder:触摸事件,用以获取用户手指所在屏幕的坐标(x,y)或触

06-li移动第二种形式

li移动第二种形式 appendChild() 方法可向节点的子节点列表的末尾添加新的子节点. 提示:如果文档树中已经存在了 newchild,它将从文档树中删除,然后重新插入它的新位置.如果 newchild 是 DocumentFragment 节点,则不会直接插入它,而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾. 你可以使用 appendChild() 方法移除元素到另外一个元素. 1 <!DOCTYPE html> 2 <html> 3 <

原生js跨浏览事件绑定(移除)/javascript事件绑定(移除)

网上找了半天没看到,都是基于ie attachEvent(有诸多的问题存在)来写的,所以手动写了个js模拟绑定事件希望能帮到需要的童鞋 addEvent = function(obj,type,fn){  if(obj.addEventListener) {//W3C   obj.addEventListener(type,fn,false);  }else if (obj.attachEvent) {//ie(期待它的灭亡)   if(!obj.events) obj.events = {};

第一百二十一节,JavaScript事件绑定及深入

JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充

JavaScript事件绑定

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

javascript 事件绑定

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

JavaScript事件绑定的常见方式

在Javascript中,事件绑定一共有3种方式: ① 行内绑定 ② 动态绑定 ③ 事件监听 原文: https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_9649804010964222368%22%7D&n_type=1&p_from=4 原文地址:https://www.cnblogs.com/sangzs/p/9066556.html