js 事件绑定

最新推荐文章于 2023-10-15 15:21:59 发布
最新推荐文章于 2023-10-15 15:21:59 发布
阅读量243 收藏
点赞数
分类专栏： js2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35187942/article/details/85945668
版权

给一个对象绑定一个事件处理函数的第一种形式

obj.onclick = fn;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <script type="text/javascript">
            function fn1(){
                alert(1);
            }
            function fn2(){
                alert(2);
            }
            document.onclick = fn1;
            document.onclick = fn2;//会覆盖前面绑定的fn1
        </script>
    </head>
    <body>
    </body>
</html>

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

ie:obj.attachEvent(事件名称，事件函数); ie11不支持！！！！！

1.没有捕获

2.事件名称有on

3.事件函数执行的顺序：标准ie->正序 非标准ie->倒序

4.this指向window（见下面的用call解决）

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

1.有捕获

2.事件名称没有on

3.事件函数执行的顺序：正序

4.this触发该事件的对象

是否捕获：默认false,                    false:冒泡      true：捕获

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <script type="text/javascript">
            function fn1(){
                alert(1);
            }
            function fn2(){
                alert(2);
            }
            document.addEventListener('click',fn1,false);
            document.addEventListener('click',fn2,false);
        </script>
    </head>
    <body>
    </body>
</html>

ie:obj.attachEvent(事件名称，事件函数); ie11不支持！！！！！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <script type="text/javascript">
            function fn1(){
                alert(1);
            }
            function fn2(){
                alert(2);
            }
            document.attachEvent('onclick',fn1);
            document.attachEvent('onclick',fn2);
        </script>
    </head>
    <body>
    </body>
</html>

//call 函数下的一个方法，call方法第一个参数可以改变函数执行过程中的内部this的指向，call方法第二个参数开始就是原来函数的参数列表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <script type="text/javascript">
            function fn1(){
                alert(this);
            }
            fn1.call();//调用函数  fn1() == fn1.call()
        </script>
    </head>
    <body>
    </body>
</html>

------------------------------------------------------------

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <script type="text/javascript">
            function fn1(a,b){
                alert(this);
                alert(a+b);
            }
            fn1.call(1,10,20);
        </script>
    </head>
    <body>
    </body>
</html>

解决ie下指向window改为指向document

-----------------封装--------------------------------------------------------------------------

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <script type="text/javascript">
            function fn1(){
                alert(this);
            }
            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);
        </script>
    </head>
    <body>
    </body>
</html>

 

 

 

 

我的奋斗ing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js事件绑定
06-06
将事件和标签，完全分开， 事件分为三个主要部分，1.事件源，2.事件，3.响应行为，这三者之间的关系是如何的？这里为你解答
javascript事件（二）
pleasecallme_522的博客
02-26 345
一.事件函数的取消 1.第一种事件绑定形式的取消，如：function fn1(){ alert(1); } document.onclick = fn1; document.onclick = null; //取消点击事件2.第二种事件绑定形式的取消： IE浏览器下：obj.detachEvent(事件名称，事件函数);标准浏览器下：obj.removeEventListener(事件
2020-12-19L 1394幸运数 && alert(fn(1))
qq_44805237的博客
02-10 111
function fn1 (){ alert(1); return 2; // return 2; } alert(fn1(1)); function findLucky(arr){ let len = arr.length; let count = 1; arr.sort((a,b) => b-a); for(let i = 0; i < len; i++){ while(arr[i] == arr[i+1]){ count+...
js的function--js详解(十一)
xiaosa3134的专栏
05-02 130
1、函数的定义 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt; &lt;head&gt; &
js作用域
菜小白学前端
07-25 113
alert(a); //undefined var a=1; function fn1(){alert(2);} 浏览器执行步骤：找到 script后利用 “js解析器” 1）“找一些东西”：var function 参数 （js的预解析） 通过var 找到了变量a，先不管=后面的内容，a=未定义所有的变量，在正式运行代码之前，都提前赋了一个值：未定义 fn1= function fn1...
JS函数作用域
和上帝躲猫猫
11-04 806
什么是JS作用域：         域：空间、范围                          全局：整个 document 的 script             局部：函数、对象内                      作用：读、写          浏览器中：JS 解析器的工作原理          代码读到 script 标签了，JS 解析器就开始工作了（至少分两步）     
JavaScript 匿名函数与闭包
苦涩
04-10 194
匿名函数与闭包匿名函数闭包概念相关知识点 匿名函数 没有函数名的函数 单独的匿名函数是无法运行和调用的 可以把匿名函数赋值给变量 通过表达式自我执行，语法：(匿名函数)(); 匿名函数传递参数，语法：(匿名函数)(参数); <script> // 普通函数 function func1(){ alert("我是普通...
对象绑定事件处理函数和取消事件绑定
weixin_30713953的博客
12-27 241
一、事件绑定 1.给一个对象绑定一个事件处理函数的第一种形式 function fn1(){ alert(1); } function fn2(){ alert(2); } document.onclick=fn1; document.onclick=fn2;//会覆盖前面绑定的fn1 2.给一个对象绑定一个事件处理函数的第二种形式 ie:obj.attach...
前端面试题1
small_shadow的博客
09-26 991
B站陈学辉前端面试题 1、逗号运算符 <script> vari=0,j=0; for(;i<10,j<6;i++,j++){ k=i+j; }; console.log(k); </script> 答案：10 for循环中判断条件为i<10,j<6。逗号运算符以后面为准，所以相当于j<6，循环五次，最后结果为10（5+5） 2、找数组最小值 找到数组[-1, -2, 1, 10, 4, 5, 8]中的最
js基础周测考试题错误和易错知识点（笔试）
m0_47531829的博客
05-19 1273
1.下面代码的运行结果是：第一次弹（ ）第二次弹（ ） function fn1() { alert(1); } alert( fn1() ); A．1 B．alert(1); C．function fn1() { alert(1); } D．undefined 运行fn1(),弹出1，fn1()没有返回值，所以fn1()为undefined；alert（fn1()）alert里面的内容是fn1()的返回值， 所以是undefined； 2.alert( “12”>“9” ) 的运行结果正确的
JS 事件绑定函数代码
10-29
JS 事件绑定函数代码，解决了浏览器兼容，现在可以兼容IE6 7 8 FF 谷歌
javascript事件绑定学习要点
10-22
主要介绍了javascript事件绑定学习要点,主要包含下面四个方面1.传统事件绑定的问题，2.W3C事件处理函数，3.IE事件处理函数，4.事件对象的其他补充，有需要的小伙伴可以参考下
javascript 事件绑定问题
10-28
在子页面(<iframe></iframe>)创建父级事件！当子页面(<iframe></iframe>)被销毁！子页面(<iframe></iframe>)创建父级事件也会被销毁！
详解javascript事件绑定使用方法
10-21
主要为大家详细介绍了javascript事件绑定使用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript--13---闭包
lxhby520的博客
05-30 114
获取局部变量&lt;script&gt; function fn1() { var a ="月薪10w"; } alert(a); &lt;/script&gt;如何获取内部变量作为函数返回值&lt;script&gt; function fn1() { var a ="月薪10w"; return a; } alert(fn1()); ...
JS基础练习题及答案（二）
热门推荐
Hi_Eleven的博客
08-07 1万+
一、单选题（共30题，每题2分） 得分：2.0分 1.Math.pow(1,2)的结果是 A 1 B 2 C 3 D 0 正确答案: A 解析: 1的2次方，还是1 2.已知字符串"hello everybody "通过下面哪个方法可以去掉字符串两端的空白 A trim() B split() C reverse() D join() 正确答案: A 解析: 使用排除法：split分割字符串；reverse反转数组；join将数组转成字符串 trim() 去除字符串两端空
JS-绑定事件3种方法
SYQ15544423296的博客
06-30 8223
JS-绑定事件3种方法
JS绑定事件的三种方法(简单易懂)
最新发布
m0_74577714的博客
10-15 3250
相信大家都了解过事件，但如何给元素绑定事件，如何使用呢？让我为大家介绍三种绑定事件的方法吧！以下都是用点击事件(click)来做示范。
js第13天（事件绑定方式）
weixin_61884985的博客
09-04 2609
js事件的绑定方式，事件的执行机制，以及事件传播以及事件委托。
介绍一下JavaScript的事件绑定
04-28
JavaScript的事件绑定是一种将JavaScript代码与HTML元素事件相关联的方法。通过事件绑定，可以在HTML元素上注册事件监听器，以便在用户执行特定操作时执行JavaScript代码。事件绑定可以通过多种方式实现，包括传统的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值