精华内容
下载资源
问答
  • 原生js绑定事件的方式
    2021-12-29 16:10:44

    1,直接在标签上绑定,属性赋值 ,这个在该元素的properties属性中可以查到, 也可以在事件监听中看到

    <p οnclick="console.log(112)">事件</p>

    2,获取元素绑定,属性赋值,这个在该元素的properties属性中可以查到,也可以在事件监听中看到

    document.querySelector("p").οnclick=function(){console.log('发发发');}

    3,添加事件监听,只可以在该元素的事件监听中看到

    document.querySelector("p").addEventListener('click',()=>{console.log('发发发');})

    更多相关内容
  • js绑定事件,并动态传参,比如绑定click事件。js绑定事件,并动态传参,比如绑定click事件。 js绑定事件,并动态传参,比如绑定click事件
  • js绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法 只支持IE678,不兼容其他浏览器 addEventListener方法 兼容火狐谷歌,不兼容IE8及以下 ...
  • 本文将详细介绍js移除事件 js绑定事件的实现过程,需要了解的朋友可以参考下
  • 实现一个简单的on和off方法 介绍: Event对象:  funcList: {}, //保存delegate所绑定的... Event.delegateHandle: 当发生事件之后,随着事件的冒泡上升,判断存在事件委托的元素,并执行对应的回调函数 addEvent / off
  • 今天小编就为大家分享一篇js事件on动态绑定数据,绑定多个事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 理解JS绑定事件

    2020-10-22 23:12:34
    主要帮助大家深入理解JS绑定事件,介绍了六种JS绑定事件的情况,感兴趣的小伙伴们可以参考一下
  • js绑定事件的三种方法和删除绑定事件

    1.行内绑定

    <style>
            div {
                width: 400px;
                height: 200px;
                background-color: antiquewhite;
            }
        </style>
    </head>
    
    <body>
        <div onclick="cli1()"></div>
    </body>
    
    </html>
    <script>
        // 绑定事件1
        function cli1(){
            alert('标签内部绑定事件1');
        }
    </script>

    2.通过元素绑定事件

    <style>
            div {
                width: 400px;
                height: 200px;
                background-color: antiquewhite;
            }
        </style>
    </head>
    
    <body>
        <div onclick="cli1()"></div>
    </body>
    <script>
    //绑定事件2 元素.on事件名= function name(params参数){}
    var div_ = document.getElementsByTagName('div')[0];
     div_.onclick = function(){
           alert('通过元素绑定事件 绑定事件2')
     } 
    </script>

    3.通过事件监听绑定事件

    <style>
            div {
                width: 400px;
                height: 200px;
                background-color: antiquewhite;
            }
        </style>
    </head>
    
    <body>
        <div onclick="cli1()"></div>
    </body>
    <script>
    
    var div_ = document.getElementsByTagName('div')[0];
    
        div_.addEventListener('click', function () {
            alert('通过事件监听绑定事件');
        })
    
    </script>

    4.删除事件监听

     /* 
        给dom元素删除事件监听
        el_obj.removerEventListener(1,2);
        1: 要删除的事件名
        2:相关的事件处理函数(注意:该函数需要时一个外部处理函数)
        */
        btn_2.removeEventListener('click', fn);

    展开全文
  • js 绑定事件的 3 种方式

    千次阅读 2021-04-20 23:54:33
    js 作为脚本语言, 可以为页面上的元素绑定事件, 有 3 种方式 在 html 中, 声明 onclick 属性, 值为函数调用, 不推荐, html 和 js 耦合, 不利于维护 在 js 中, 对元素赋值 onclick 属性, 值为函数声明, 不推荐, 只能...

    js 作为脚本语言, 可以为页面上的元素绑定事件, 有 3 种方式

    • 在 html 中, 声明 onclick 属性, 值为函数调用, 不推荐, html 和 js 耦合, 不利于维护
    • 在 js 中, 对元素赋值 onclick 属性, 值为函数声明, 不推荐, 只能赋值一个回调函数, 多次赋值, 之前的会失效
    • 在 js 中, 为元素添加 addEventListener, 推荐做法, 可以为一个事件类型绑定多个回调函数
    <html>
    
    <button onclick="triggerClick1()">使用 元素 onclick 属性绑定事件 (不推荐: html 和 js 耦合)</button>
    <br>
    
    <button id="btn2">在 js 中为元素的 onclick 属性赋值函数 (不推荐: 只能绑定一个函数, 多次绑定, 之前的会失效)</button>
    <br>
    
    <button id="btn3">使用 addEventListener 为元素绑定事件 (推荐)</button>
    <br>
    
    
    <script>
    
    
        function triggerClick1() {
            console.log('使用 元素 onclick 属性绑定事件')
        }
    
        let btn2 = document.querySelector('#btn2');
        btn2.onclick = function () {
            console.log('在 js 中为元素的 onclick 属性赋值函数 11111111')
        };
        // 第二次赋值, 会让之前绑定的函数失效
        // 其实本质是给元素的 onclick 属性赋值
        btn2.onclick = function () {
            console.log('在 js 中为元素的 onclick 属性赋值函数 22222222')
        };
    
        let btn3 = document.querySelector('#btn3');
        /*
            第一个参数: 事件名 (注意: 是单纯的 click, 而不是 onclick 没有 'on')
         */
        btn3.addEventListener('click', function () {
            console.log('在 js 中调用元素的 addEventListener 函数, 以绑定事件 (推荐做法)')
        })
    
    </script>
    </html>
    

    js 绑定事件

    展开全文
  • 主要为大家详细介绍了JavaScript绑定事件监听函数的通用方法,感兴趣的朋友可以参考一下
  • 这篇文章主要介绍了JS如何实现动态添加的元素绑定事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最近做的项目要实现一个动态添加动态删除的功能,思考了...
  • 最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看。 JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 ...
  • 主要介绍了vue.js绑定事件监听器的方法,结合实例形式分析了vue.js基于v-on事件绑定响应鼠标点击相关操作技巧,需要的朋友可以参考下
  • 下面小编就为大家带来一篇浅析js绑定事件的常用方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • JS绑定事件,传递参数

    千次阅读 2019-12-31 16:44:38
    绑定事件的两种方式 1. 方式一(在属性上绑定事件) <div onclick=“ck('hello')” id=“div”></div> <script> function ck(str){ console.info(str); } </script> 注意:在...

    绑定事件的两种方式

    1. 方式一(在属性上绑定事件)
    <div οnclick=“ck('hello')” id=“div”></div> 
    <script> 
        function ck(str){ 
            console.info(str); 
        } 
    </script>
    注意:在属性上绑定事件,是方法的调用,因此需要加()表示调用此方法,如果需要传入参数则写入准确的参数。此方法可以传参数
     
    2. 方式二(动态绑定)动态绑定不能传递参数
    • 直接把方法名赋给属性。这种方式一般绑定不带参数的方法。如果给属性绑定带参数的方法,会默认传递事件对象。
    <script>
        var odiv = document.getElementById(“div”);
        odiv.onclick = ck;//此处不能写成ck()
        function ck(){
            console.info("hello");
        }
    </script>
    • 给属性定义匿名方法。这种方法不能传参数。
    <script> 
        var odiv = document.getElementById(“div”); 
        odiv.onclick = function (){ 
            console.info("hello"); 
        } 
    </script>
     

    解决动态绑定不能传递参数问题

    var div=document.getElementById('div1');
    div.onclik=function () { 
        fun("此处传入实参"); 
    }
    function fun(arg){
        alert(arg);
    }
     

    需要注意的是:

    临时定义的这个函数中 this指的是div对象, 所以我们想传入div对象时使用 this就可以了
     
    change事件绑定示例:为table表格中每一个input绑定change事件
    window.onload = function(){
        var trNode = $(".contentTr");
        $.each(trNode,function(index,value){
           var inputNode = $(value).find("input");
           $.each(inputNode,function(i,val){
               val.onchange = function(){
                   check(this);//这里this表示val这个input节点对象    
               }
               //如果不需要传递参数,可以直接val.onchange = check;
           }); 
        });
    }
     
    function check(ele){
        console.log(ele.value);//这里输出就是我们改变input单元格的值
    }
     
    展开全文
  • JS绑定事件三种方式

    千次阅读 2018-11-05 22:53:30
    3、使用事件监听函数绑定事件 一、在DOM中直接绑定 也就是直接在html标签中通过 onXXX=“” 来绑定。举个例子: &amp;amp;amp;amp;amp;lt;input type=&amp;amp;amp;amp;quot;button&amp;amp;amp;amp;...
  • js绑定事件this指向发生改变的问题将在本文进行详细探讨下,感兴趣的朋友可以参考下哈,希望对你有所帮助
  • js回车事件绑定.txt

    2019-08-21 11:25:56
    js回车事件绑定
  • 原生js绑定事件的三种方式

    千次阅读 2020-05-20 15:38:20
    第一种:html标签事件绑定:属性绑定js中定义相应事件的函数。(这个在该元素的properties属性中可以查到,也可以在事件监听中看到) function show(){  console.log('show'); } function print(){  console....
  • 下面小编就为大家带来一篇js实现动态创建的元素绑定事件。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • js 绑定事件失败问题

    2019-06-03 14:34:55
    1、动态生成的dom节点,绑定事件生效问题: 解决办法就是 定位到父元素,然后绑定父元素的子元素事件 例如.nav-tabs的子元素li是动态生成的(通过append()函数或者vue数据双向绑定生成的 等), 通过$('.nav-tabs...
  • 本文实例讲述了ES6中javascript实现函数绑定及类的事件绑定功能的方法。分享给大家供大家参考,具体如下: 函数绑定 箭头函数可以绑定this对象,大大减少了显式绑定this对象的写法(call、apply、bind)。但是,箭头...
  • 今天小编就为大家分享一篇关于Javascript绑定click事件的四种方式介绍,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
  • 原生js绑定事件 解绑

    千次阅读 2018-01-03 14:33:44
    1 所以,想解除事件就相当简单了,只需要再注册一次事件,把值设成null,例如: var btn = document.getElementById("test"); 2 3 btn.onclick = function(e){ 4 alert("ok"); 5 }; 6 7 btn.onclick = null;原理...
  • 前言 本文主要给大家分享一下前段时间遇到的bug,这个Bug是关于jquery 的on方法绑交互事件,类似于$('#point').on('click','.read-more',function ... consol.log('jquery事件绑定') }); 第二种:  document.addEve
  • JavaScript绑定事件的常用方式 1. 直接在dom元素中绑定 <button id="btn" onclick="clickBtn()">我是按钮,请点一点我吧!</button> <script> function clickBtn(){ alert("点击成功"); } <...
  • 主要介绍了JS 事件绑定事件监听、事件委托详细介绍的相关资料,需要的朋友可以参考下
  • js 绑定事件函数的方法

    千次阅读 2018-05-15 17:14:05
    js 绑定事件函数的方法2016年12月25日 21:14:14阅读数:687要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。在...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 534,105
精华内容 213,642
关键字:

js 绑定事件