JavaScript DOM-事件操作
事件
注册事件
给元素添加事件,为注册事件或者绑定事件
注册事件两种方式
- 传统方式
- 监听事件方式
事件监听
- addEventListener() 事件监听 (IE9以上)
eventTarget.addEventListener(type, listener, [useCapture])
- 参数type: 事件类型字符串,不要on 如click,mouseover
- 参数listener: 事件处理函数,触发的时候要做的事情
- 参数useCapture: 可选,是一个布尔值,默认false
- attacheEvent() 事件监听 (IE678支持)
evetagrget.attachEvent(eventNameWithOn, callback)
- 参数eventNameWithOn: 事件类型字符串,不要on 如click,mouseover
- 参数callback: 事件处理函数,触发的时候要做的事情
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<body> <button>传统注册事件</button> <button>addEventListener ie9以上</button> <button>attachEvent ie678</button> <script> var btns = document.querySelectorAll('button'); // 传统注册事件 btns[0].onclick = function () { alert('传统方式') }; // addEventListener 添加多个不覆盖 btns[1].addEventListener('click', function () { alert('ddEventListener ie9以上') }); btns[1].addEventListener('click', function () { alert('ddEventListener ie9以上---2') }); //attachEvent btns[2].attachEvent('click', function () { alert('attachEvent') }) </script> </body>
删除事件
- 传统方式
btns.onclick = null
- 方式删除监听事件
eventTarget.removeEventListener(type, listener, [useCapture])
- 参数type: 事件类型字符串,不要on 如click,mouseover
- 参数listener: 事件处理函数,触发的时候要做的事情
- 参数useCapture: 可选,是一个布尔值,默认false
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<body> <button>addEventListener ie9以上</button> <button>attachEvent ie678</button> <script> var btns = document.querySelectorAll('button'); // addEventListener 添加多个不覆盖 btns[0].addEventListener('click', fn); function fn() { alert(222); this.removeEventListener('click', fn) } //attachEvent btns[1].attachEvent('click', fn1); function fn1() { alert(111); this.detachEvent('click', fn1) } </script> </body>
事件冒泡
- onblur,onfocus,onmouseenter,onmouseleave 没有冒泡
dom 事件流,在js代码中
- 只能执行捕获或者冒泡其中的一个阶段;
- onclick 和 attachEvent(ie) 只能得到冒泡阶段;
- 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son;
- 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html –> document
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div class="father"> <div class="son">son盒子</div> </div> <script> var son = document.querySelector('.son'); // 给son 注册点击事件 son.addEventListener('click', function () { alert('son'); }, true); // true--> 捕获阶段,flase---> 冒泡阶段 // 给father注册单击事件 var father = document.querySelector('.father'); father.addEventListener('click', function () { alert('father'); }, true); // 给document 注册单击事件 document.addEventListener('click', function () { alert('document'); }, true) </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div class="father"> <div class="son">son盒子</div> </div> <script> var son = document.querySelector('.son'); // 给son 注册点击事件 son.addEventListener('click', function () { alert('son'); }, false); // true--> 捕获阶段,flase---> 冒泡阶段 // 给father注册单击事件 var father = document.querySelector('.father'); father.addEventListener('click', function () { alert('father'); }, false); // 给document 注册单击事件 document.addEventListener('click', function () { alert('document'); }) </script>
事件对象
- 事件触发发生时会产生事件对象,并且系统会以实参形式传给事件处理函数
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<body> <div>123</div> <script> var div = document.querySelector('div'); div.onclick = function (event) { // event 就是事件对象, 形参 event = event || window.event; // 兼容性问题 console.log(event); } </script> </body>
事件对象属性和方法:
e.target和this区别
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<body> <div>123</div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> var div = document.querySelector('div'); div.addEventListener('click', function (e) { console.log(e.target); // 一致 console.log(this); // 一致 }); var ul = document.querySelector('ul'); ul.addEventListener('click', function (e) { console.log(e.target); // 谁触发的就说谁, 这里是li console.log(this); // 我们给ul 绑定了事件 那么this 就指向ul }) </script> </body>
阻止默认行为
html的一种默认行为
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<body> <a href="http://www.baidu.com">百度</a> <form action="http://www.baidu.com"> <input type="submit" value="提交" name="sub"> </form> <script> var a = document.querySelector('a'); a.addEventListener('click', function (e) { e.preventDefault() // dom 标准行为,组织默认提交行为 }); // 传统方式阻止默认行为 a.onclick = function (e) { e.preventDefault(); return false // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 }; var from = document.querySelector('form'); from.addEventListener('click', function (e) { e.preventDefault() }) </script> </body>
阻止事件冒泡
e.stopPropagation()
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<body> <div class="father"> <div class="son">son儿子</div> </div> <script> var son = document.querySelector('.son'); var father = document.querySelector('.father'); son.addEventListener('click', function (e) { alert('son'); e.stopPropagation(); // 阻止事件冒泡 },false); father.addEventListener('click', function (e) { alert('father'); }, false); document.addEventListener('click', function (e) { alert('document') }) </script> </body>
事件委托
给父元素注册事件,利用事件冒泡,当子元素的事件触发,会冒泡到父元素,然后去控制相应的子元素。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<body> <ul> <li>知否知否,点我应有弹框在手!</li> <li>知否知否,点我应有弹框在手!</li> <li>知否知否,点我应有弹框在手!</li> <li>知否知否,点我应有弹框在手!</li> <li>知否知否,点我应有弹框在手!</li> </ul> <script> var ul = document.querySelector('ul'); ul.addEventListener('click', function (e) { e.target.style.backgroundColor = 'red'; // 事件委托 }) </script> </body>
常用鼠标事件
鼠标事件对象
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script> document.addEventListener('click', function (e) { // 1. client 鼠标在可视区的x和y坐标 console.log(e.clientX); console.log(e.clientY); console.log('---------------------'); // 2. page 鼠标在页面文档的x和y坐标 console.log(e.pageX); console.log(e.pageY); console.log('---------------------'); // 3. screen 鼠标在电脑屏幕的x和y坐标 console.log(e.screenX); console.log(e.screenY); }) </script>
相关代码: https://github.com/1515806183/html-code/tree/master/wapapi-01