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>