Springboot 静态IP volatile WorldCloud docker安装 multithreading keras checkbox encoding uiviewcontroller Seajs vue架构 网页后台模板 android开发项目 excel动态图表制作 oracle数据库版本 c语言求和 移动端上传图片插件 matlab生成对角矩阵 coreldraw入门学习 oracle查询数据库 matlab中不等于怎么表示 java上传图片 小程序下拉刷新样式 python for循环 python编程教程 python关键字 python匹配字符串 java定义接口 java多线程教程 获取当前时间java java怎么输出数组 linux系统教程 js图片上传 begininvoke flash制作工具 电子商城系统 微信骰子表情包 视频编辑专家下载 linux安卓模拟器
当前位置: 首页 > 学习教程  > 

React事件处理和原生JS事件处理

2020/10/16 18:03:59 文章标签: js原生点击事件

1.事件触发调用和this指向 1.原生JS 事件触发调用有三种方式: 1)on[event]事件属性,手动触发 ❗️on[event]事件是Window对象上的方法。 2)on[event]事件属性,通过htmlElement.click()模拟触发 3)addEvent…

1.事件触发调用和this指向

1.原生JS

事件触发调用有三种方式:

1)on[event]事件属性,手动触发  ❗️on[event]事件是Window对象上的方法。

2)on[event]事件属性,通过htmlElement.click()模拟触发

3)addEventListener监听事件,手动触发

this指向

1)如果onevent事件属性定义的时候将this作为参数,在函数中获取到该参数是DOM对象。用该方法可以获取当前DOM。

2)在方法中直接访问this, this指向当前函数所在的作用域。或者说调用函数的对象。

<body>
    <input type="checkbox" id="root" οnmοuseοver="toclick(this,event)" οnclick="add()" />
    <button οnclick="a.test(this)">Test</button>
    <script>
        function toclick(argThis,e) {
            console.log(e); // event对象;必须手动传参
            console.log(argThis); // 传递过来的this指向DOM元素,可以通过这个方法调用自身  
            const rootEle = argThis; // 等于document.getElementById('root');
            rootEle.click(); // 里面没有参数,只是触发
        }
        function add(arg) {
            console.log(arg);// undefined 说明事件想要获取event等参数必须要传参
            console.log(this); // window  不管是mouseover里面通过rootEle触发还是直接单击触发,相当于直接运行add()
        }
        const a = {
            test(argThis) {
                console.log(argThis); // dom元素
                console.log(this); // this指向对象a
            }
        }
        const rootEle = document.getElementById("root");
        rootEle.addEventListener('click', function() {
            console.log('listen===',this); // DOM元素;指向调用监听器的对象
        })
     </script>
</body>

 

转载于:https://www.cnblogs.com/lyraLee/p/11577511.html


本文链接: http://www.dtmao.cc/news_show_300369.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?