事件绑定的第二种形式 & 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 = fn;
function fn1() {
    alert(this);
}
function fn2() {
    alert(2);
}

//document.onclick = fn1;
//document.onclick = fn2;    //会覆盖前面绑定fn1

//给一个对象的同一个事件绑定多个不同的函数
//给一个元素绑定事件函数的第二种形式

/*
IE:obj.attachEvent(事件名称,事件函数);
    1.没有捕获
    2.事件名称有on
    3.事件函数执行的顺序:标准ie-》正序   非标准ie-》倒序
    4.this指向window
标准:obj.addEventListener(事件名称,事件函数,是否捕获);
    1.有捕获
    2.事件名称没有on
    3.事件执行的顺序是正序
    4.this触发该事件的对象
*/

/*document.attachEvent(‘onclick‘, function() {
    fn1.call(document);
});
document.attachEvent(‘onclick‘, fn2);*/

//是否捕获 : 默认是false    false:冒泡 true:捕获

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);
</script>
时间: 2024-11-08 01:39:23

事件绑定的第二种形式 & call的相关文章

事件绑定的第二种形式

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

JS事件绑定的两种形式

第一种: obj.on*=function(){} var btn=document.getElementById('myBtn'); btn.onclick=function(){ alert(1); } 这种方法是很常用,就是将一个函数赋值给一个事件处理程序. 它的优点是简单,然后具有跨浏览器的优势,现代所有浏览器都支持. 如果要取消这种形式绑定的事件,可以将事件处理程序属性的值设为null: btn.onclick=null; //删除事件处理程序 但是,这种形式的绑定有一个缺点,那就是不

事件绑定的两种形式

到现在我学习的事件函数绑定对象都是使用的obj.on事件名称=函数名 这是我今天学习的第一种事件函数绑定对象方法. 这种方法有一个缺点就是这个对象的同意个事件只能绑定一个函数,那么就需要第二种事件函数绑定对象的方法了. 第二种方法存在着兼容性的问题ie:obj.attachEvent(事件名称,事件函数);//ie的非标准下顺序是倒序,事件名称有on前缀标准:obj.addEventListener(事件名称,事件函数,是否捕获)://事件名称没有on前缀是否捕获:默认是false false:

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

jquery事件绑定的几种用法

常见的事件绑定的几种方法 主要有on(),bind(),live(),delegate(),随着版本的不断更新,live(),bind(),delegate()被相继弃用.live():1.7版本之后被弃用bind().delegate():3.0版本之后被弃用虽然在3.0之后的版本中有bind和delegate在,但在具体的实现上还是调用的on() bind: function( types, data, fn ) { return this.on( types, null, data, fn

事件绑定的几种常见方式

在项目开发中,经常遇到绑定事件不起作用,或者事件绑定多次,导致重复触发.为了应对所遇到的问题,上网查阅了一些资料,对事件绑定做了一些系统研究.##1.事件绑定的几种常见方式(以click事件为例) $(selector).click(function(){...}) $(selector).bind("click",function(){...}) $(selector).live("click",function(){...}) $(document).deleg

06-li移动第二种形式

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

JS中事件绑定的三种方式

以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upload" onclick="upload_file();"> 原文: http://www.w3school.com.cn/jsref/jsref_events.asp 2. jQuery .on() $(node).on("change", function(e)

事件绑定的几种方式

(一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定.在js代码中绑定.下面的方式1.方式2属于在html中绑定事件,方式3.方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法. 方式1: HTML的DOM元素支持onclick.onblur等以on开头属性,我们可以直接在这些属性值中编写javascript代码.当点击div的时候,下面的代码会弹出div的ID: [html] view plain copy <div id