精华内容
下载资源
问答
  • 原因:绑定事件对象只会匹配第一个符合条件的对象 解决: 1.一个html页面上不应该存在多个相同id的元素,应该尽量要避免; 如果不可避免地出现了这种情况,可以使用$("[id=xx]"),如上述图片内红框下代码,这样...

    问题:多个相同Id的对象,第二个对象绑定的事件不触发

    代码:红色框内为第二个对象绑定的事件不触发代码

    原因:绑定事件的对象只会匹配第一个符合条件的对象

    解决:

    1.一个html页面上不应该存在多个相同id的元素,应该尽量要避免;

    如果不可避免地出现了这种情况,可以使用$("[id=xx]"),如上述图片内红框下代码,这样可以获取所有相同id的元素,而不是只匹配第一个元素。

    2.一般情况下,当确实需要多个对象绑定一个事件时,要按class名来绑定事件。用类名绑定事件是类具有一组具有共同特征的事物抽象的体现。代码如下:

    展开全文
  • 突然的发现某段 html 代码中点击事件失效了。 仔细观察才发现,这段代码内的...以上这篇解决vue 绑定对象内点击事件失效问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • 本文实例讲述了ES6中javascript实现函数绑定及类的事件绑定功能的方法。分享给大家供大家参考,具体如下: 函数绑定 箭头函数可以绑定this对象,大大减少了显式绑定this对象的写法(call、apply、bind)。但是,箭头...
  • Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <...

    Vue.js可以传递$event对象

    <body id="app">
      <ul>
        <li v-on:click="say('hello!', $event)">点击当前行文本</li>
        <li>li2</li>
        <li>li3</li>
      </ul>
      <script>
       new Vue({
           el: '#app',
           data: {
            message: 'Hello Vue.js!'
           },
           methods: {
            say: function(msg, event) {
               //获取点击对象      
               var el = event.currentTarget;
               alert("当前对象的内容:"+el.innerHTML);
            }
        }
       })
      </script>
     </body>
    
    属性描述
    bubbles返回布尔值,指示事件是否是起泡事件类型。
    cancelable返回布尔值,指示事件是否可拥可取消的默认动作。
    currentTarget返回其事件监听器触发该事件的元素。
    eventPhase返回事件传播的当前阶段。
    target返回触发此事件的元素(事件的目标节点)。
    timeStamp返回事件生成的日期和时间。
    type返回当前 Event 对象表示的事件的名称。

    currentTarget:currentTarget 事件属性返回其监听器触发事件的节点,即当前处理该事件的元素、文档或窗口。
    通俗一点说,就是你的点击事件绑定在哪一个元素上,currentTarget获取到的就是哪一个元素。

    target:target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。
    通俗一点说,就是你当前点击的是哪一个元素,target获取到的就是哪一个元素。

    <li v-for="img in willLoadImg" @click="selectImg($event)">
        <img class="loadimg" :src="img.url" :data-id="img.id"  alt="">
    </li>
    
    methods: {
        selectImg(event) {
                console.log(event.currentTarget);
                console.log(event.target);
        }
    }
    

    closest 获取事件源外层元素

    使用:data-XXX 来绑定

     <div class="custom-tree-node"
                  @click="getid"
                   :data-id="1"
    </div>
    

    获取 :

    利用closeet 获取到当前目标元素最近的外层元素含有 custom-tree-node 类名的dom

    然后再利用 dataset.id 拿到传的值

     async getid (event) {
          let customNode = event.target.closest('.custom-tree-node').dataset.id
         customNode //=> 1
    
    展开全文
  • JS创建对象事件绑定

    千次阅读 2020-06-30 17:09:11
    JS对象 1、对象的创建 1.使用原始的方式创建对象 var obj = new Object(); obj.name = "zhangsan"; //为obj对象添加属性 obj.age = 20; obj.say = function(){ //添加功能(函数/方法) console.log(this.name,...

    JS对象

    1、对象的创建

    1.使用原始的方式创建对象
       var obj = new Object();
       obj.name = "zhangsan"; //为obj对象添加属性
       obj.age = 20;
       obj.say = function(){ //添加功能(函数/方法)
     console.log(this.name,":",this.age);
       }
        //测试
       console.log(obj.name);
       console.log(obj.age);
        obj.say()
    2.使用工厂模式创建对象
        function createObject(name,age){
          var obj = new Object();
          obj.name = name; //为obj对象添加属性
          obj.age = age;
          obj.say = function(){ //添加功能(函数/方法)
            console.log(this.name,":",this.age);
          }
          return obj;
        }
        //测试
        var ob1 = createObject("lisi",20);
        console.log(ob1.name);
        ob1.say();
        var ob2 = createObject("wangwu",25);
        console.log(ob2.name);
        ob2.say();
    3.使用自定义构造函数创建对象
        function Stu(name,age){
          this.name = name;
          this.age = age;
          this.say = function(){
            console.log(this.name,":",this.age);
          }
        }
        //测试
        var s1 = new Stu("zhaoliu",28);
        var s2 = new Stu("xiaoli",21);
        s1.say()
        s2.say()
    4.直接创建自定义对象
        var ob = {name:"qq",age:26};
        console.log(ob.name);
        console.log(ob.age);
    
        var obj={};
        obj.name="小白";
        obj.say=function () {
        console.log("我叫: "+this.name);
        };
        obj.say();
    
        var obj2={
          name:"小明",
          age:20,
          say:function () {
            console.log("我叫: "+this.name+"; 年龄: "+this.age);
         },
        };
        obj2.say();
    
        var a = [10,20,30];
        console.log(a.constructor == Array);    //获取对象的构造方式
        console.log(s1 instanceof Stu);

    2、创建数组对象

            var a1 = new Array(); //定义一个空数组
            var a2 = new Array(10); //定义一个长度为10数组(值:undefined)
            var a3 = new Array(10,20,30); //定义一个指定数值的数组
    
            console.log(a1.length);
            console.log(a2.length);
            console.log(a3.length);
    
            var a4 = [10,20,30,40,50]; //快捷定义数组
    
            //数组的遍历
            for(var i=0; i<a4.length;i++){
                console.log(i,"=>",a4[i]);
            }
    
            for(var i=a4.length-1; i>=0;i--){
                console.log(i,"=>",a4[i]);
            }
    
            for(var i in a4){
                console.log(i,"=>",a4[i]);
            }
    
            a4.forEach(function(v){
                console.log(v);
            });
    
            //数组的方法:
            console.log(a4.toString());             //返回以,隔开的字符串
            console.log(a4.join(":"));
            var aa = [1,2,3];
            console.log(aa.concat(4,5));
    
            var b = [10,50,30,20,70,40];
            console.log(b.join(":"));                 //返回以:隔开的字符串
            console.log(b.sort().join(":"));           //排序
            console.log(b.reverse().join(":"));       //颠倒数组
    
            var aa = new Array(10,20,30); 
            console.log(aa.join(":"));
            aa.push(50);                   //从后面加入
            aa.push(40);
            console.log(aa.join(":"));
            aa.pop();                     //从后面删除一个
            console.log(aa.join(":"));
    
            //清空
            console.log(b.join(":"));
            b.length = 3;
            console.log(b.join(":"));
            b = [];
            console.log(b.join(":"));

    3、Date对象

         function formatDate(dd){
            if(!dd instanceof Date){
                return;
            }
            var y = dd.getFullYear(),
                m = dd.getMonth()+1,
                d = dd.getDate(),
                hh = dd.getHours(),
                mm = dd.getMinutes(),
                ss = dd.getSeconds();
            //判断单位数字前补零操作
            hh = hh<10?'0'+hh:hh;
            mm = mm<10?'0'+mm:mm;
            ss = ss<10?'0'+ss:ss;
            return y+"-"+m+"-"+d+" "+hh+":"+mm+":"+ss;
        }
    
        var dd = new Date();
        //从1970年1月1日零时零分0秒至今的毫秒数
        document.write("时间戳:"+dd.valueOf());
        
        document.write("<h2>"+formatDate(dd)+"</h2>");

    4、单击事件和获取html元素

    添加单击事件:

    1.任何标签都可以添加

    2.在标签内加:οnclick=“响应操作”

    <body>
        <h1 id="hid">JavaScript语言实例--单击事件</h1>
        <button onclick="fun()">点击我</button>
        <ul id="uid">
            <li>AAAAA</li>
            <li>BBBBB</li>
            <li>CCCCC</li>
            <li>DDDDD</li>
        </ul>
        <ol>
            <li>1111111</li>
            <li>2222222</li>
        </ol>
    </body>
    2.获取元素和改变元素样式:
        function fun(){
            console.log('hello js');
            //获取id属性值为hid的元素标签
            var hid = document.getElementById("hid");
            //输出元素标签之间的文本内容
            console.log(hid.innerHTML);
            //修改标签之间的内容
            hid.innerHTML = "JavaScript语言实例--元素操作";
            //改变 HTML 元素的样式
            hid.style.color = "red";
            hid.style.backgroundColor = "#ddd";
       }
    
       //获取当前网页中的所有li元素标签
       //var mlist = document.getElementsByTagName("li");
       var mlist = document.getElementById("uid").getElementsByTagName("li");
       
       //遍历输出
       for(var i in mlist){
           if(!isNaN(i)){      //mlist中包含length等属性,用if判断去掉
              console.log(mlist[i].innerHTML);
              mlist[i].style.color="red";
           }
       }
    

    5.Timing定时事件

    setTimeout(function, milliseconds

    setInterval(function,milliseconds)

    clearInterval(mytime) 参数为上面两个定时对象

        //定义时3秒后执行参数中的函数
        setTimeout(function(){
            console.log("Hello JS!");
        },3000);
    
        //定时每隔1秒执行参数回调函数一次
        var m = 0;
        setInterval(function(){
            m++;
            console.log("Hello "+m);
        },1000)
        

    6.事件绑定

    1.事件源:所有html标签

    2.事件:onclick、dblclick …

    3.事件处理程序

    事件绑定方式

    1.主动绑定

    2.被动绑定

    <body>
        <h1>JavaScript语言实例--事件处理(事件绑定方式)</h1>
        <button onclick="fun()">按钮1</button>       //方式1
       
        <button id="bid">按钮2</button>
    </body>
    <script>
         function fun(){
             console.log("按钮1被点击了");
         } 
    
         document.getElementById("bid").onclick = function(){  //方式2
            console.log("按钮2被点击了");
         }
    </script>
    事件源对象的获取:
    <body>
        <h1>JavaScript语言实例--获取事件源对象</h1>
        <h2 onclick="fun(this)">2级标题1</h2>
        <h2 id="hid">2级标题2</h2>
    </body>
    <script>
        function fun(ob){
            console.log("aaaaaaaaaa");
            //console.log(ob);
            ob.style.color = "green";
        }
    
        document.getElementById("hid").onclick = function(){
            console.log("bbbbbbbbbbb");
            //此种事件绑定方式,this就表示当前事件源对象
            //console.log(this);
            this.style.color = "red";
        }
    展开全文
  • 在layui下对元素进行事件绑定

    千次阅读 2018-08-21 21:58:29
    要注意的是记得要先引用element操作模块 ,否则是无法绑定的 格式: $(document).on(事件,标识,function(){}); layui.use(['jquery', 'form', 'table', 'element'], function() { var form = layui.form; ...

    要注意的是记得要先引用element操作模块 ,否则是无法绑定的

    格式:

    $(document).on(事件,标识,function(){});

        layui.use(['jquery', 'form', 'table', 'element'], function() {
            var form = layui.form;
            var table = layui.table;
            var element = layui.element;
            var $ = layui.$;
    
    
            // form.render();
            table.render({
                elem: '#tableList',
                // height: 315,
                url: "{{route('admin.data')}}",
                page: true, //开启分页 
                cols: [
                    [ //表头
                        { field: 'id', title: 'ID', sort: true, fixed: 'left' },
                        { field: 'name', title: '用户名' },
                        { field: 'role', title: '角色', sort: true },
                        {
                            field: 'status',
                            title: '状态',
                            templet: function(d) {
                                return d.status == 0 ? '禁止' : '启用'
                            }
                        },
                        { field: 'created_at', title: '创建时间' },
                        {
                            title: '操作',
                            // minWidth: 200,
                            templet: function(d) {
                                return '<button class="layui-btn layui-btn-xs " lay-filter="editF" id="edit" data-id="' + d.id + '">编辑</button>'
                            }
                        }
                    ]
                ]
            });
            //绑定事件
            $(document).on('click', '#edit', function(data) {
                var id = $(this).attr('data-id');
    
            });
         });

     

    展开全文
  • 1.获取自定义属性 var testEle = document.getElementById("test")  testEle.setAttribute("key","value"); // 设置  ...testEle.attributes["key...2.event的触发事件对象绑定事件对象 event.target返回触发事
  • 1 事件对象  react中点击一个按钮,然后调用一个方法,在这个方法定义时如果定义一个参数event,此时的这个event就是事件对象,我们可以通过在控制台输出它来查看,如图:      此对象有一个target...
  • VUE对象的动态绑定

    千次阅读 2019-08-29 22:34:35
    VUE对象的动态绑定vue不检测对象的删除和添加动态添加对象属性动态添加对象属性的双向绑定的实现 vue不检测对象的删除和添加 vue不能检测到对象的删除和添加,因为vue初始化实例的时候对属性进行一个get和set的过程...
  • 标签和js对象绑定事件以及传参问题

    千次阅读 2017-07-05 16:53:59
    总结: (1)在标签onclick=”“中写的js代码会自动嵌套在...(2)js中绑定事件并传参数主要是通过function(){setName(name);}将代码要绑定的函数在其中调用,并在外层定义好参数;代码:<!DOCTYPE html> <title
  • JavaScript-给对象绑定事件的三种方法

    千次阅读 2018-11-10 23:00:07
    第一种直接将事件添加到元素上 &lt;h1 onclick="...第二种将事件直接作为属性添加到对象上 &lt;h1&gt;hello&lt;/h1&gt; &lt;script&gt; windows.onload = function
  • 事件绑定:有三种常用的绑定事件的方法: 1、在DOM元素中直接绑定; 2、在 javascript 代码中绑定; 3、绑定事件监听函数。 1、在DOM中直接绑定事件 我们可以在DOM元素上直接绑定事件 例如: function ...
  • Tkinter:事件绑定

    千次阅读 多人点赞 2018-12-27 11:12:12
    正如我们此前提到的,一个 Tkinter 应用程序大部分时间花费在...Tkinter 提供一个强大的机制可以让你自由地处理事件,对于每个组件来说,你可以通过 bind() 方法将函数或方法绑定到具体的事件上。 widget.bind(...
  • knockout click绑定使用事件对象

    千次阅读 2017-05-08 21:38:25
    li中的信息通过ajax请求后使用foreach绑定加载至页面,然后针对每个li绑定click事件,并读取其id属性,进行后续操作。 初始代码如下: 若直接使用click绑定,在未点击的情况下,goDetail方法会自动执行,在...
  • jquery 多个对象如何绑定同一事件

    千次阅读 2017-06-02 14:19:33
    利用选择器的方法,已百度找到。如:$("#div1").click(function() { });
  • 谈到用户界面交互总少不了事件,前面一系列文章介绍的鼠标光标、坐标、弹出式提示框等实现的底层其实都是事件处理,只不过matplotlib或其他包...matplotlib的事件绑定由canvas对象调用mpl_connect方法实现,mpl_connec
  • 事件绑定与触发事件

    千次阅读 2020-02-20 22:39:35
    bind()方法绑定事件 1.绑定一种事件 .bind("click",function(){ .... }) 2.绑定多个事件,通过对象的方式 .bind({"click":function(){},"mouseover":function(){}...)}) 为创建子元素绑定事件 父元素.delegate("要...
  • Angular 8 事件绑定

    千次阅读 2019-05-05 23:13:30
    一般格式 (event)="模板语句" ...$event 对象为 DOM 事件对象,一般经常使用到 event.target.value 获取当前元素的值。 $event 包含大量的信息,而其实绝大多数情况下,我们仅仅需要使用 event.target.value...
  • 转载的,原版要的分10个,这里我提供给大家0分下载。 DataGridView绑定内嵌有对象对象,支持“aaa.bbb”,这种绑定方法
  • Vue框架——事件绑定

    千次阅读 2021-02-10 23:44:52
    事件绑定Vue如何处理事件事件函数的调用方式函数参数参数传递事件绑定-参数传递总结事件修饰符按键修饰符自定义按键修饰符 Vue如何处理事件 v-on指令用法 <div><button v-on:click='number++'>按钮<...
  • //新版JQ好像会自行循环所选对象 $("#mk_edit ,#mk_edit1").on('click',function () { //代码块 } 第二种 适用JQ版本非最新 //非新版侧需手动遍历所选对象 $("#mk_edit ,#mk_edit1").each(function () { ...
  • //可以给同名的事件绑定多个事件处理程序 //语法:对象.addEventListener(参数1,参数2,参数3); //参数1:事件名(字符串),不要加on 例如:click 、 mouseover 、mouseout //参数2:事件处理程序(函...
  • 文章目录事件绑定 事件绑定 鼠标事件类型: &amp;lt; Button-1 &amp;gt; 按下了鼠标左键 &amp;lt; ButtonPress-1 &amp;gt; &amp;lt; Button-2 &amp;gt; 按下了鼠标中键 &...
  • jQuery的事件绑定事件委托

    万次阅读 2016-07-28 13:42:57
    在用jQuery的事件绑定时,会用到on()、bind()、live()、 delegate()这几个方法,但对他们的区别缺从未注意过,现稍总结一下,如有错误,欢迎指正。  参考文档: ...
  • 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;...
  • Android DataBinding 双向数据绑定事件绑定、使用类方法 一、Android DataBinding 基础使用 二、Android DataBinding单向绑定 双向数据绑定 双向绑定的意思即为当数据改变时同时使视图刷新,而视图改变时也可以...
  • 2.组件的事件绑定,组件绑定事件采用的是 $on 方法 。 let compiler = require('vue-template-compiler'); // vue loader中的包 let r1 = compiler.compile('<div @click="fn()"></div>'); // 给普通...
  • vue模板里面,所有的内容需要被一个根节点包含起来 一、绑定数据 1、方法一: {{参数名}},大括号绑定数据 2、方法二:v-text="参数名" ...二、绑定属性 ...四、绑定对象 五、绑定列表 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 915,295
精华内容 366,118
关键字:

对象事件绑定