JS中事件的区别

勤学苦练的小白
111 阅读3分钟

1.事件

  1. 事件传播

    • 含义：点击子集时会触发的点击事件，他的父元素也会触发相同的事件，父元素的父元素也会触发相同的事件
    • 点击了子盒子触发点击事件，那么会将这个事件的触发储层传递给以上父盒子直至window中(前提是都绑定了相同的事件)
    • 注意点：1.只会传播同类型事件，2.只会从点击的元素开始，按照html标签的结构逐层向上传递，3.中间的元素不管绑没绑定事件都会将事件传播上去
    • 注意：window的传播方式默认是事件冒泡的方式，如果想用事件捕获，我们需要用事件监听的方式
    • 注意：事件捕获与事件冒泡除了触发顺序不一样。其他都一样

  2. 事件冒泡 * 含义：点击事件传播时依次往上传播，而不是依次向下传播(从box，依次传播给window而不是先触发window) ```js var box = document.querySelector('.box') var box1 = document.querySelector('.box1') box.onclick = function(){ console.log('box的点击事件') } box1.onclick = function(){ console.log('box1的点击事件') } // 点击box1的时候也会触发box因为box1在box中

window.onclick = function(){

  console.log('window的点击事件')
} // 点击box1的时候也会触发box因为box1在box中
document.onclick = function(){
  console.log('document的点击事件')
} // 点击box1的时候也会触发box因为box1在box中
```

3. 事件捕获 * 含义：点击事件传播时依次向下点击(从window点击，逐层点击到box) js var box = document.querySelector('.box') var box1 = document.querySelector('.box1') window.addEventListener('click', function () { console.log('1') }, false) document.addEventListener('click', function () { console.log('2') }, false) box.addEventListener('click', function () { console.log('3') }, true) box1.addEventListener('click', function () { console.log('4') }, true) // 只有第三个参数为true时才会触发事件捕获，也就是反着来的事件冒泡

  1. 事件委托 * 含义：将我们想要做的一些事情委托给别人做，因为JS中有事件冒泡，点击子元素的时候会同步触发传播父元素的相同事件，所以在JS中我们可以把子元素的事件委托给父元素来做 * 优点：1.减少代码量，2.能够将新加入的DOM节点也添加一个事件，3.提高代码性能 js var ulo = document.querySelector('ul') var lio = [...document.querySelectorAll('li')] ulo.addEventListener('click',function(e){ if(e.target.nodeName != 'LI') return console.log('只有li标签可以触发') }) var li1 = document.createElement('li') ulo.appendChild(li1)

  2. 阻止默认行为 * 默认行为的含义：不需要我们去写，就可以自己实现的功能 * 语法：1. e.preventDefault() // 非IE使用 * 语法：2. e.returnValue = false // IE使用 js var div = document.querySelector('div') div.addEventListener('contextmenu', function(e){ e.preventDefault() // 此时div的右击没法用了 })

  3. 鼠标的光标信息 * 光标信息有一个相对坐标系，(1.相对于事件源)(2.相对于当前页面)(3.相对于浏览器) js var box = document.querySelector('#box') box.onclick = function(e){ console.log(e.button) // 获取按键信息，点击的话只有0这个值 console.log(e.offsetX,e.offsetY) // 相对于事件源 console.log(e.clientX,e.clientY) // 相对于浏览器 console.log(e.pageX, e.pageY) // 相对于当前页面 }

  4. 几个单词的差别

 浏览器滚动事件：
 window.onscroll = function() {滚动时要执行的代码}
 * 浏览器没有滚动其实是浏览器内的页面滚动
 语法：document.body.scrollTop
 document.documentElement.scrollTop
 区别：IE浏览器没有DOCTYPE,那么使用任意一个都可以，如果有只能使用documentElement
 chorme和火狐没有DOCTYPE用body，有的话用documentElement
 safari两个都不用，他用window.pageYoffset

获取浏览器尺寸
* 语法：document.documentElement.clientHeight // 没有节点. ， 获取浏览器视口高度，不包含滚动条高度这是它与window.innerHeight的区别
* 语法：document.documentElement.clientWidth // 没有节点. ， 获取浏览器视口宽度，不包含滚动条宽度这是它与window.innerWidth的区别

offsetLeft
 * 语法：节点.offsetLeft // 打印值为相对于那个父元素左边的偏移量
 * 语法：节点.offsetTop // 打印值为相对于那个父元素上边的偏移量

获取元素尺寸（获取元素占地面积）
 * 语法：节点.offsetWidth/节点.offsetHeight
 * 语法：节点.clientWidth/节点.clientHeight
 * 区别：offset：宽/高 + padding + border ，client：宽/高 + padding // 都不包含外间距
avatar
文章
阅读
粉丝