首页 > Web开发 > 详细

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

时间:2019-09-24 12:48:43      阅读:82      评论:0      收藏:0      [点我收藏+]

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" onmouseover="toclick(this,event)" onclick="add()" />
    <button onclick="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>

 

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

原文:https://www.cnblogs.com/lyraLee/p/11577511.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!